Képek és SEO: a négy dolog, ami tényleg számít

A képek a magyar weboldalak lassúságának leggyakoribb egyetlen oka — és egyben a leggyorsabban javítható tétel. A legtöbb oldalon nem a képek száma a baj, hanem hogy fotógép-méretben kerültek fel, és a böngészőnek kell kicsinyítenie őket, miután letöltötte.

Miért a kép a leggyakoribb probléma

Amikor egy oldal lassú, a legtöbben a tárhelyre gyanakszanak. A gyakorlatban az esetek nagy részében nem a szerver a szűk keresztmetszet, hanem az, hogy mennyi adatot kell letölteni — és ennek az adatnak a zöme kép.

A tipikus eset így néz ki: valaki feltölt egy fényképet a telefonjáról vagy a fényképezőgépéről. Az a fájl 4000 képpont széles és 5 megabájt. Az oldalon 800 képpont széles helyen jelenik meg. A böngésző letölti a teljes 5 megabájtot, aztán kicsinyíti — a látogató pedig addig vár.

Ez egyetlen képnél is érezhető. Egy tíz képes oldalon, mobilinterneten, ez az a különbség, amitől a látogatók egy része meg sem várja a betöltést.

A négy beavatkozás sorrendben

Nem mindegyik ér ugyanannyit. Ez a sorrend a hatás és a ráfordítás aránya szerint áll:

A táblázatból az látszik, ami a gyakorlatban is igaz: az első két sor adja a hatás nagy részét, és mindkettő néhány óra munka.

1. A méret

Két külön dologról van szó, és mindkettőt rendezni kell. Az egyik a képpontban mért méret: ha az oldalon 800 képpont széles helyen jelenik meg a kép, akkor ne legyen 4000 széles. Az általános szabály, hogy a megjelenési méret kétszerese elég — ez a nagy felbontású kijelzőkön is jól néz ki.

A másik a fájlméret. Egy jól tömörített fénykép a weben ritkán indokolt 300 kilobájt fölött, egy egyszerűbb grafika pedig 100 alatt is elfér. Ha az oldaladon vannak megabájtos képek, azok szinte biztosan tömöríthetők úgy, hogy a különbség szemmel nem látszik.

A leggyakoribb ellenérv az szokott lenni, hogy „romlik a minőség”. A gyakorlatban a 80 százalék körüli tömörítés és a szemmel látható romlás között nagy a távolság — a legtöbb oldalon a fájlok 80-90 százaléka megspórolható anélkül, hogy bárki észrevenné.

2. A formátum

A hagyományos JPEG és PNG formátumok mellett ma már rendelkezésre állnak modernebb megoldások, amelyek ugyanazt a minőséget lényegesen kisebb fájlból hozzák. A gyakorlatban ez jellemzően 25-50 százalékos megtakarítást jelent ugyanazon a képen.

A legtöbb tartalomkezelő rendszerben ez egy bővítménnyel megoldható úgy, hogy a régi formátum is megmarad tartaléknak. Nem kell kézzel konvertálni, és nem kell a régi képeket kicserélni — a rendszer automatikusan azt szolgálja ki, amit a böngésző támogat.

Ami itt fontos: a formátumváltás a méret rendezése után jön. Ha egy 4000 képpontos képet konvertálsz modern formátumba, akkor egy kisebb, de továbbra is túl nagy fájlt kapsz.

Egy dolgot érdemes ellenőrizni a váltás után: hogy a régi képekre mutató hivatkozások továbbra is működnek-e. Ha egy bővítmény átnevezi vagy áthelyezi a fájlokat, akkor a korábban máshol beágyazott képeid eltörhetnek — például egy régi hírlevélben vagy egy másik oldalon, ahonnan hivatkoztak rád. A jó megoldások ezért nem törlik az eredetit, csak mellé teszik az újat.

3. Az alt-szöveg

Az alt-szöveg eredeti célja az akadálymentesség: ez az, amit a képernyőolvasó felolvas annak, aki nem látja a képet. Ebből következik a helyes használata is: azt írd le, mi látszik a képen, egy rövid mondatban.

Amit ne csinálj: ne pakold tele kulcsszóval. Az „olcsó SEO szolgáltatás Budapest keresőoptimalizálás” típusú alt-szöveg nem segít a rangsorolásban, viszont akadálymentességi szempontból használhatatlan, és a kereső is felismeri, mi történik.

Két gyakorlati eset. Ha a kép tartalmat hordoz — egy diagram, egy termékfotó, egy képernyőkép —, akkor írd le, mi van rajta. Ha a kép díszítés — egy hangulatfotó a szöveg mellett —, akkor az üres alt-szöveg a helyes megoldás, mert így a képernyőolvasó átugorja.

Egy gyakori kérdés: mi legyen az alt-szöveg egy embert ábrázoló fotónál. A válasz attól függ, számít-e, hogy ki van rajta. Egy munkatárs bemutatkozó képénél írd le a nevét és a szerepét, mert az információ. Egy hangulatfotónál viszont az „irodában dolgozó nő” típusú leírás nem ad hozzá semmit — ott az üres alt a helyes.

4. Késleltetett betöltés

A késleltetett betöltés azt jelenti, hogy a böngésző csak akkor tölti le a képet, amikor a látogató odagörget. Egy hosszú oldalon, ahol húsz kép van, de a látogató csak az első hármat látja, ez érdemi különbség.

A legtöbb mai rendszerben ez alapból be van kapcsolva. Egy dologra viszont figyelni kell: a legelső, a képernyő tetején látható képre ne vonatkozzon. Ha arra is késleltetést állítasz, akkor a látogató az első pillanatban üres helyet lát, és pont az a benyomás romlik, amit javítani akartál.

Érdemes-e képkeresésre optimalizálni

Ez attól függ, mit árulsz. Vannak szakmák, ahol a képkeresés valódi forgalmi forrás: divat, lakberendezés, építészet, kertészet, esküvő, gasztronómia. Ott a kép maga a termék, és az emberek képek alapján választanak.

A legtöbb szolgáltatói szakmában viszont a képkeresés elhanyagolható forgalmat hoz, és a rá fordított munka jobb helyen is elkelne. Egy könyvelőnek vagy egy ügyvédnek nem éri meg a képkeresésre optimalizálni.

Ha a te szakmád az első csoportba tartozik, akkor a fájlnév és a kép körüli szöveg is számít — a kereső ugyanis a képet a környezetéből érti meg. Ha a másodikba, akkor elég a méret, a formátum és a korrekt alt-szöveg.

Hogyan ellenőrizd magad

Három lépés, és nem kell hozzá eszköz. Az első: nyisd meg a legnehezebb oldaladat mobilinterneten, és nézd meg, mennyi idő alatt lesz használható. Ha három-négy másodpercnél tovább tart, akkor van tennivaló.

A második: kattints jobb gombbal egy képre az oldaladon, és nézd meg az eredeti méretét. Ha 2000 képpontnál szélesebb, akkor megtaláltad a problémát.

A harmadik: nézd meg a legnagyobb fájlokat a médiatárban. A legtöbb rendszerben rendezhető méret szerint. Ha az első tíz fájl mind megabájtos, akkor a képek rendezése lesz a legnagyobb hozamú munka, amit a sebességen elvégezhetsz.

Egy utolsó szempont, amiről ritkán esik szó: a képek arányos elosztása. Sok oldalon az összes kép a főoldalon van, a belső oldalakon pedig egy sem. Ez két bajt okoz: a főoldal indokolatlanul lassú lesz, a belső oldalak pedig olvashatatlanul tömörek. Egy hosszabb szöveget három-négy kép tagol jól — nem díszítésként, hanem azért, hogy legyen hol megpihennie a szemnek.

És egy praktikus tanács a jövőre nézve: állítsd be, hogy a rendszer feltöltéskor automatikusan átméretezze és tömörítse a képeket. Így a probléma nem keletkezik újra minden alkalommal, amikor valaki a telefonjáról tölt fel valamit — és ez a leggyakoribb forrása annak, hogy a rendbetett oldal fél év múlva megint lassú lesz.

Összefoglalva: a hatás nagy része két lépésen múlik — méret és formátum —, és mindkettő néhány óra munka. Az alt-szöveg akadálymentességi és tartalmi okból fontos, nem rangsorolási trükként. A fájlnév pedig csak ott számít érdemben, ahol a képkeresés valódi forgalmi forrás. Ez a sorrend akkor is érvényes, ha valaki hosszabb ellenőrzőlistát mutat: a többi tétel a maradék néhány százalékért van.

Kapcsolódó: Oldalsebesség — mit érdemes javítaniSEO-audit saját kezűlegVizuális SEOWebergonómia