Kako optimizirati slike v programu WordPress (za oboje, hitrost in SEO)

Ko gre za optimizacijo slike, ste verjetno slišali dovolj o alt besedilu.


Obstaja 20 različnih načinov za optimizacijo slik (če vključite tudi SEO in optimizacijo hitrosti). Tako boste dosegli boljše rezultate v GTmetrix / Pingdom, potencialno pa boste uvrstili višje pri iskanju in naložili veliko hitrejšo nalaganje vsebine. Uspelo mi je pridobiti 100-odstotno poročilo GTmetrix s časi nalaganja .5s … optimizacija mojih slik v WordPressu je bila velik del tega.

Optimizirajte slike PRED nalaganjem – Uporaba programa, kot je Photoshop, za optimizacijo slik, preden jih naložite, lahko prihrani veliko dela. Podatke EXIF ​​lahko spremenite v velikost, stisnete, odstranite, shranite v pravilni obliki (npr. PNG / JPEG) in napišete opisno ime datoteke (ki se samodejno uporabi kot alt besedilo, če uporabite Samodejni prikaz Alt Attributes vtičnik). To je 6 optimizacij!

Če potrebujete slike visoke ločljivosti (npr. spletno mesto za fotografije), morda ne boste želeli spremeniti velikosti in stisniti (korak 3 in 8), ker lahko to zmanjša kakovost, tudi če gre za majhno količino.

Glavna orodja, ki jih uporabljam – Jaz uporabljam GIMP spremeniti velikost / stisniti slike (moj urejevalnik slik po izbiri), Raketa WP za moj vtičnik za predpomnilnik, Predstavljajte si za nadaljnje stiskanje brez izgub + odstranjevanje EXIF ​​podatkov, oboje Cloudflare in StackPath CDN, Samodejna slika ALT Atributira vtičnik za samodejno uporabo imena slikovne datoteke kot alt besedila in Optimalni predpomnilnik Gravatar da predpomni Gravatarje v komentarjih. jaz uporabljam Pregled WP Pro kot moj vtičnik za bogate delčke, Boljše iskanje Zamenjaj za skupno posodabljanje slik (zelo priročno) in GTmetrix kot moje orodje za testiranje hitrosti. Oglejte si celoten seznam orodij.

1. Poiščite neoptimizirane slike

Zaženite svoje spletno mesto skozi GTmetrix in te elemente boste videli na zavihkih Hitrost strani / YSlow. Prvih pet je običajno specifičnih za stran, kar pomeni, da bo GTmetrix pokazal samo neoptimizirane slike za samo eno stran, ki jo testirate. Zadnji 3 se običajno pojavijo na celotnem spletnem mestu. Seveda je to le 7 načinov za optimizacijo slik, vendar je nekaj najpomembnejših, zato bomo to najprej storili.

  • Postrezite pomanjšane slike: spremenite velikost velikih slik na pravilne dimenzije (2. korak)
  • Določite dimenzije slike: določite širino / višino v HTML-ju ali CSS-ju slike (3. korak)
  • Optimizirajte slike – stiskanje slik brez izgube (4. korak)
  • Česanje slik z uporabo CSS-ovih dokumentov – združite več slik v 1 sliko (5. korak)
  • Izogibajte se preusmeritvam URL-jev – ne prikažite slik iz napačne različice www ali http (s) (6. korak)
  • Uporabite omrežje za pošiljanje vsebin – strežejo slike / datoteke s CDN-ja (7. korak)
  • Uporabite predpomnjenje brskalnika – predpomni slike / datoteke s svojim predpomnilnikom (8. korak)
  • Naj bo favicon majhen in predpomnjen – uporabite favicon 16x16px in ga predpomnite (korak 9)

Optimizacija slike v GTmetrix

Začnite s popravljanjem slik, ki se pojavijo na več straneh: logotip, slike stranske vrstice / podnožja itd. Začnite tudi s prikazom pomanjšanih slik, saj boste morda morali spremeniti velikost / znova naložiti nove dimenzije.

2. Vročite pomanjšane slike

Če vidite služijo pomanjšane slike Napake v GTmetrix, pomeni, da imate slike v velikem obsegu in jih morate spremeniti v velikosti pravilnih dimenzij (kar vam ponuja GTmetrix). Dokler sledite goljufijskemu prikazu dimenzij slike (glejte spodaj), teh napak ne bi smeli videti. Če pa ste že naložili velike velikosti slik, jih boste morali spremeniti velikost ročno ali uporabiti vtičnik.

Servirajte-pomanjšane slike

Velikost velikosti slik s pomočjo vtičnika – težava pri tem je, da različne slike zahtevajo različne dimenzije (gradniki, drsniki, slike celotne širine). Medtem ko ima večina vtičnikov za optimizacijo slike možnost spremeniti velikost slike v eno samski določen nabor dimenzij, jih morate pred nalaganjem res obrezati / spremeniti velikost. Če spremenite velikost slik s pomočjo vtičnika, ohranite varnostne kopije izvirnih slik (in jih preizkusite le nekaj), če niste zadovoljni z rezultati.

Velikost velikosti slik

Ročno spremenite velikost slik – dobite pravilne dimenzije od GTmetrix in jih spremenite v velikost / ponovno naložite. Ne pozabite, da GTmetrix prikazuje samo neoptimizirane slike za eno samo stran, ki jo testirate.

Ustvarite preglednico razsežnosti slike svojega spletnega mesta
Drsniki, stranska vrstica spletnega dnevnika, predstavljene slike in vsebina spletnega dnevnika bloga zahtevajo določene dimenzije, na katere je treba spremeniti velikost slik. Ustvarite varalni list, da jih lahko spremenite, preden jih naložite v WordPress. To je še posebej koristno, če imate na številnih področjih svojega spletnega mesta, ki zahtevajo različne velikosti slik in če imate več oblikovalcev / urednikov.

Primer:

  • Slike drsnikov: 1900 (š) x 400 (h)
  • Slike vrtiljaka: 115 (h)
  • Slike gradnikov: 414 (w)
  • Slike na spletnem dnevniku celotne širine: 680 (w)
  • Predstavljene slike: 250 (š) x 250 (h)
  • Yoast Facebook OG slika: 1200 (š) x 628 (h) – korak 11
  • Slika Yoast Twitter OG 1024 (š) x 512 (h) – korak 11

Širina pravokotnika 680 pik

3. Določite dimenzije slike

To pomeni, da v HTML ali CSS slike dodate širino / višino. Vizualni urejevalnik to naredi za vas (vendar gradnike, nekatere ustvarjalce strani in HTML po meri ne). Preizkusite nekaj strani v GTmetrixu.

GTmetrix vam pove dimenzije slike …

Določite mere slike GTmetrix

Dodajte širino / višino v HTML slike …

Določite dimenzije slike

4. Brezhibno stisnite slike

To so elementi “optimizirajte slike” v GTmetrix. Številni programi (npr. Photoshop in Gimp) lahko ob izvozu stisnejo. Čeprav je to odličen začetek, vtičniki za stiskanje slike navadno dobijo še boljše rezultate. raje bi Predstavljajte si, Kraken, ShortPixel, ali Smash. Znano je, da drugi vtičniki vizualno zmanjšujejo kakovost slike in lahko povzročijo napake pri slikah.

Stiskanje slik z Imagify

  1. Prijavite se Predstavljajte si
  2. Namestite Zamislite vtičnik
  3. Pozvani boste s spodnjimi navodili:
  4. Vnesite svoj ključ API iz računa Imagify
  5. Nastavite raven stiskanja (normalno, agresivno, ultra)
  6. Imagif vse (fotografija spodaj) z množičnim materialom optimizira vse slike na vašem spletnem mestu
  7. Ko dosežete svoj limit, plačajte 4,99 USD ali počakajte naslednji mesec, da omejite svoj limit

domišljijo

Preizkusite, kako izgledajo slike z različnimi stopnjami stiskanja …

Predstavljajte si primerjavo stiskanja

Ko ste prijavljeni, optimizirajte vse slike na svojem spletnem mestu …

imagify-wordpress-optimizacija slike

Nastavite možnost za optimizacijo slik pri nalaganju …

Zamislite Optimizirajte slike ob prenosu

5. Združite slike v CSS-ove

Na moji domači strani se vam zdi, da vidite 21 ikon, vendar so dejansko ena sama slika. To je a CSS sprite, kjer združite več slik v eno samo sliko. To zmanjša število slik (in zahtev), zato ima moja domača stran le 10 zahtev. Namesto da naložite 21 slik, se naloži 1. Za to potrebujete znanje CSS ali uporabite a CSS sprite generator.

CSS Sprites

GTmetrix CSS Sprites

Za dekorativne slike uporabljajte le CSS-ove – če združite 21 slik v 1. izgubite veliko oznak alt za slike 1. NE združite pomembnih slik v zapise CSS, če opisujejo vašo vsebino. Kar se mene tiče, je hitrost moje domače strani pomembnejša, kot je SEO … Na številnih mestih uporabljam poročilo GTmetrix svoje domače strani (zato moram biti čist) in moja domača stran, verjeli ali ne, ne cilja na cilj ključna beseda. Namen je opisati moje vaje … in hitro se naložiti.

6. Izogibajte se preusmeritvam URL-jev slike

Če ste spremenili v HTTPS, www različice ali začeli prikazovati slike s CDN-ja, morate posodobiti vse slike (in povezave) z uporabo Boljše iskanje Zamenjaj zato strežejo pravilno različico. V nasprotnem primeru boste morda videli zmanjšati preusmeritve ali uporabite domene brez piškotkov napake.

Zmanjšajte preusmeritve

Piškotki brez domen

Uporabite vtičnik Better Search Zamenjaj za množično posodabljanje URL-jev slike …

Boljše iskanje Zamenjajte verzije WWW

Boljše iskanje Zamenjajte HTTP v primerjavi s HTTPS

7. Prikažite slike s CDN-ja

To zahteva spreminjanje URL-jev slik, da vključite svoje CDN URL

  • URL stare slike (brez CDN): Https://onlinemediamasters.com/wp-content/uploads/2017/02/Tom-Dupuis-Widget.png
  • Nov slikovni URL (s CDN): Https://t9w8m8j8.stackpathcdn.com/wp-content/uploads/2017/02/Tom-Dupuis-Widget.png

Cloudflare vs. StackPath – Uporabljam oboje Cloudflare in StackPath saj več podatkovnih centrov = hitrejša dobava vsebine Cloudflare ima 200+ podatkovnih centrov, StackPath ima 34+ podatkovnih centrov ki se nahajajo v Združenih državah Amerike (od koder je večina mojih obiskovalcev). Cloudflare vam ne dodeli CDN URL-ja zato bomo za prikazovanje slik uporabili StackPath-ov CDN.

Podatkovni centri StackPath

Korak 1: Izberite CDN. jaz uporabljam StackPath (imajo 30-dnevno preskušanje).

2. korak: Na nadzorni plošči kliknite jeziček CDN in nato ustvarite spletno mesto StackPath CDN

StackPath-CDN-Tab

StackPath-CDN-domena

CDN-URL-StackPath

3. korak: Kopirajte svoj CDN URL in ga prilepite v vtičnik za predpomnilnik (spodaj je za WP Rocket)…

WP-raketa-CDN

4. korak: URL-je slik zamenjajte tako, da vključujejo vaš CDN URL (z uporabo Boljše iskanje Zamenjaj).

Boljše iskanje Zamenjajte CDN URL

5. korak: Preverite stare URL-je slike s pomočjo Chrome DevTools. Včasih je vaš vtičnik za predpomnilnik oz CDN Enabler za to skrbi, razen povezav v CSS in JavaScript, ki so težko kodirani. Za povezave, ki so zaostale, so običajno v datoteke (na primer CSS ali Javascript), ki zahtevata ročno preverjanje in zamenjavo. Chrome DevTools prikazuje vse trenutno uporabljene domene.

6. korak: Zaženite spletno mesto v GTmetrix in “omrežje za pošiljanje vsebine” mora biti v zeleni barvi YSlow zeleno. Ne bi smeli imeti nobenih napak niti pri »zmanjšanju preusmeritev« ali »uporabi domene brez piškotkov«.

CDN GTmetrix YSlow

8. Predpomni slike

Večina vtičnikov predpomnilnika ima možnost za predpomnilnik brskalnika, ki predpomni slike. Uporabljam WP Rocket, ki je bil ocenjen kot 1 vtičnik predpomnilnika v več Facebook anketah, in za to imam vadnico.. Hitra izvedba je na splošno uvrščen na 1. vtičnik brezplačnega predpomnilnika (tudi za to imam vadnico).

Predvajanje pred brskalnikom

9. Naj bo Favicon majhen in predvajalnik

Prepričajte se, da je vaš favicon 16x16px, je format favicon.ico in se predpomni z uporabo vtičnika za predpomnilnik.

10. Odstranite podatke EXIF

Exif podatkov vsebuje podatke, kot so zaslonka, hitrost zaklopa, ISO, goriščna razdalja, model fotoaparata, datum fotografiranja in drugo. Tega ne potrebujete za slike na vašem spletnem mestu. The VA Odstranjevanje vtičnika Exif samodejno odstrani podatke Exif, ko se slike naložijo.

Večina vtičnikov za optimizacijo slike (vključno z Imagify, ShortPixel, Kraken, EWWW in Smush) lahko samodejno odstrani podatke EXIF. Tu so nastavitve za Imagify…

Predstavljajte si odstranjevanje podatkov EXIF

11. Optimizacija slike v oblaku

Cloudflare ima tudi nekaj načinov za optimizacijo slik. Mirage in poljščina najdemo v vašem Nastavitve hitrosti v oblaku medtem ko zaščita Hotlink najdemo v vašem Nastavitve Scrape Shield.

Cloudflare Mirage (Pro Feature) – zmanjšuje zahteve za slike, leno nalaga slike in izboljša čas nalaganja slike na mobilnih napravah s počasnimi omrežnimi povezavami. Tu je več podrobnosti …

  • Velikost slike temelji na napravi / povezavi obiskovalca. Obiskovalec na slabi povezavi bo dobil manjšo različico (nižjo ločljivost), dokler se ne vrne na večjo pasovno širino.
  • Zmanjša količino zahtev – Mirage namesto pošiljanja več zahtev za vse slike na spletnem mestu, to potegne v eno zahtevo, tako da lahko obiskovalci takoj vidijo slike.
  • Leni nalagajo slike (naložijo jih le, ko se uporabniki pomaknejo navzdol in dejansko vidijo sliko).

Cloudflare image Mirage

Cloudflare poljščina (Pro Feature) – odstrani EXIF ​​podatke in stisne slike.

Cloudflare Image Polish

Cloudflare Hotlink zaščita – preprečuje, da bi ljudje kopirali vaše slike in jih prilepili na svoje spletno mesto, ki bo (odkar še vedno gostite to sliko) posnemalo vašo pasovno širino.

Cloudflare Hotlink zaščita

12. Lazy Load Images

To nalaga nalaganje slik, dokler se uporabniki ne pomaknejo po strani in slike vidno vidijo. Čeprav izboljšuje začetne čase nalaganja, je lahko stalno nalaganje slik med drsenjem zelo nadležno. Jaz osebno le obremenjujem videoposnetke, saj se nalagajo veliko dlje kot slike.

Lahko uporabite Leni Load plugin, Vtičnik Lazy Load For Videos, ali uporabite WP Rocket…

WP-Rocket-Lazy-Load

13. Shrani kot pravilno obliko

PNG v primerjavi z JPEG – PNG je nestisnjen (večja velikost datoteke) in ga je treba uporabljati v preprostih slikah brez veliko barv. JPEG je stisnjen (manjša velikost datoteke), ki nekoliko zmanjša kakovost slike, vendar je manjše velikosti, in se uporablja v slikah z veliko barvami. GIMP in drugi programi za urejanje slik bi morali samodejno uporabljati pravilno obliko, vendar je to še vedno dobro vedeti.

jpg_vs_png

Ilustriral avtor Labnol

14. Imena slikovnih datotek

Iskalniki uporabljajo tako alt besedilne kot slikovne datoteke, zato imejte datoteke, preden jih naložite v WordPress. Če uporabljate vtičnik, ki samodejno doda alt besedilo na podlagi imena datoteke je vse, kar morate storiti, poimenovanje datotek! Ne polnite ključnih besed, samo opišite sliko.

Označite Imena slikovnih datotek

15. Alt Text

Te morajo biti enake imenu vaše slikovne datoteke. Lahko uporabite Samodejni prikaz Alt Attributes vtičnik za samodejno uporabo imena datoteke kot alt besedila. Dokler uporabljate ustrezne slike, bi morale nekatere od njih seveda vsebovati (bite) vaše ključne besede … ni popolnoma nobenega razloga, da bi ključne besede polnili v slike, kar pomeni tveganje za kazen za polnjenje ključnih besed.

Samodejno dodajte besedilo Alt v slike – uporabi Samodejni prikaz Alt Attributes vtičnik. Zdaj, ko dodate sliko, bo vtičnik dodal alt besedilo, ki je enako imenu datoteke …

alt ="WP-Najhitreje-Cache-Plugin" širina ="577" višina ="247" />

Poiščite manjkajoče besedilo Alt – Screaming Frog je brezplačno orodje, ki vam pokaže vse slike z manjkajočim alt besedilom.

  • Prenesi Screaming Frog SEO Spider
  • Vnesite svoje spletno mesto in kliknite »Začni«, da spletno mesto pregledujete
  • Kliknite zavihek slike
  • Pojdite na Pregled → Manjka besedilo Alt (glej spodaj)
  • Poiščite te slike na svojem spletnem mestu in dodajte alt besedilo

Manjka slika Alt Text - kričeča žaba

16. Odpri graf (Facebook + Twitter)

Zaradi tega je vaša vsebina pravilno oblikovana pri skupni rabi na Facebooku / Twitterju, še posebej vaša slika, saj obe mreži za prikaz prikazujeta dimenzije po meri, sicer bo videti smešno.

facebook-delite

Če uporabljate Yoast, pojdite na nastavitve »Social« in omogočite Open Graph za Facebook / Twitter …

Yoast-Social-Meta-Data

Zdaj uredite stran / objavo, nato kliknite povezavo »daj v skupno rabo« v Yoast in videli boste možnosti za nalaganje slik po meri za Facebook (1200 širina x 628 višina) in Twitter (1024 širina x 512 višina).

yoast-social-media-optimizacija

17. Slike v predstavljenih odrezkih

Predstavljeni odrezki so, ko Google na koncu rezultatov iskanja prikaže koščke vaše vsebine in lahko (vendar ni zajamčeno), da vključi sliko. Google jih bo potegnil iz katerega koli rezultata 1. strani, vendar je odvisno od tega, ali bodo prikazali tudi predstavljeni delček ali sliko. Zaradi tega se lahko vaš delček prikaže dvakrat in je neverjeten način, da pridobite veliko prometa.

3 vrste predstavljenih odrezkov

  • Odgovori
  • Mize
  • Seznami

Izrečeni sliki-odrezki

Kako dobiti predstavljene odrezke v Googlu

  • Ciljajte na ključno besedo, kjer si ljudje želijo jedrnato odgovor
  • Uporaba Moz Explorer za prepoznavanje ključnih besed z vprašanji
  • Uporabite Odgovor javnosti, če želite poiskati še več ključnih besed
  • Izberite, ali naj bo odgovor odstavek, seznam ali tabela
  • Oblikujte lepo grafiko (ali fotografirajte), ki opisuje ključno besedo
  • Uporabite optimalno dolžino znakov (glejte spodnjo fotografijo Moz)
  • Ustvarjanje vsebin na podlagi dejstev s kakovostnimi referencami (povezave, grafike itd.)
  • Ciljajte ključne besede, ki že imajo predstavljen delček, vendar opravljajo slabo delo
  • Če ciljate na polje za odgovore, ciljno usmerite ključno besedo z natančnim ujemanjem
  • Prepričajte se, da ste na 1. strani za ključno besedo, če ne, izboljšajte vsebino

Optimialna predstavljena dolžina izrezkov

18. Strukturirani podatki

Slike je mogoče uporabiti v strukturirani podatki (in značke) za naslednje vrste vsebine:

Video Rich Snippet

Recipe-Rich-Snippets

Izdelek z bogatim izdelkom

Kateri vtičnik za obogatene delčke naj uporabim?
jaz uporabljam MyPhemeShop’s WP Review Pro (tukaj je stran, na kateri jo uporabljam), ki podpira 14 vrst podatkov, vključno z recepti in pregledi izdelkov. Včasih sem uporabljal WP Rich Snippets, vendar je razvijalci opustil vtičnik in se ni posodabljal 2+ let in Vtičnik All In One Schema je prav dolgočasen (manjka možnosti in stajlinga). WP Review Pro je zelo enostaven za uporabo.

19. Sliko slike

Ne pozabite oblikovati svojih slik! Večino mojih uporabljam meje.

  • Naslovi slik
  • Slikovne povezave
  • Meje slike
  • Napisi za slike

20. Spremenite velikost GIF-jev

Tako kot spremenite velikost slik na pravilne dimenzije, je treba spremeniti tudi velikost GIF-jev (uporabite GIF GIF).

Velikost GIF…

Spreminjanje velikosti GIF-jev

Nato stisnite …

Stisnite GIF

Rezultat :-)

Optimizirajte GIF za pse

21. Cache Gravatars

Če imate objave z veliko komentarji, Gravatarji lahko v celoti pokvari vaše poročilo. Lahko jih onemogočite, razbijete komentarje, da prikažejo le določeno število komentarjev, ali poskusite vtičnik Gravatar cache. Morda boste morali nekaj preizkusiti, saj nekateri vtičniki ne delujejo na nekaterih spletnih mestih.

  • Cache Gravatars (Optimalno, Harry je, ali FV Gravatar predpomnilnik)
  • Gravatarje popolnoma onemogočite
  • Nastavite privzeti Gravatar na prazno
  • Izbrišite komentarje, ki ne dodajajo vrednosti
  • Nastavite privzeti Gravatar na sliko po meri na vašem strežniku
  • Omejite svoje slike Gravatarja na manjše dimenzije (npr. 32 slikovnih pik)
  • Paginiranje komentarjev v programu WP Onemogočeno, da hkrati prikazuje samo 20 komentarjev
  • Če nič od tega ne deluje, poglejte WP Rocket za predpomnjenje vadnice Gravatars

Cache-Gravatar-slike

22. Izogibajte se vstavljanju slik z zunanjih spletnih strani

Slike vedno nalagajte na svoje spletno mesto, nikoli jih ne kopirajte in prilepite. V nasprotnem primeru imate dodatne zahteve, saj slika ni gostjena na vašem strežniku, zato jo morate povleči od drugod.

23. Orodja za optimizacijo slik

Izogibajte se uporabi vtičnikov z dvojno funkcionalnostjo – Zamišljajte, ShortPixel, Kraken, EWWW in Smush vsi počnejo isto (stiskanje brez izgub, odstranjevanje podatkov EXIF, spreminjanje velikosti slik). WP Rocket ima možnosti za leno nalaganje, predpomnjenje in CDN (in čiščenje baze podatkov + lokalno gostovanje Google Analytics), ki jih večina vtičnikov predpomnilnika ne prihrani, zato ne uporabljate dodatnih dodatkov.

Pogosto zastavljena vprašanja

&# x2705; Kako popravite Optimiziranje napak v sliki v GTmetrix?

Če jih brez izgube stisnete s pomočjo vtičnika, kot so ShortPixel, Imagify ali Smush. Uporabljam ShortPixel, ker to napako vedno odpravi v GTmetrixu.

&# x2705; Kako popravite napake prikazovanja pomanjšane slike v GTmetrix?

To pomeni, da morate obrezati / spremeniti velikost slik do pravilnih dimenzij. Če so slike prevelike, bo GTmetrix prikazal napake v prikazanih slikah in vam povedal pravilne dimenzije, na katere bi morali spremeniti velikost.

&# x2705; Kako popravite Določite napake v dimenziji slike v GTmetrix?

Oglejte si HTML slike in preverite, ali ima določeno širino in višino, kot je prikazano v tej vadnici.

&# x2705; Vsi drugi načini za hitrejše nalaganje slik?

Če odstranite podatke EXIF ​​in uporabite CDN za prikazovanje slik, bo največ priporočil izven priporočil v GTmetrix.

&# x2705; Katera optimizacija slike je najboljša?

Uporabljam ShortPixel, ker je izguba kakovosti praktično ničelna in popravlja element Optimize Images v GTmetrix.

Kaj misliš?
Ali vaše poročilo o GTmetrixu izgleda nekoliko bolje? Sporočite mi v komentarjih! Če želite še več nasvetov, s katerimi boste dosegli še boljše rezultate / čas nalaganja, si oglejte celoten vodnik za hitrost WordPressa.

Na zdravje,
Tom

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map