A képek optimalizálásának fontosságát rengetegen alulértékelik. Azonban ha a weboldalunkon nem megfelelő formában helyezzük el fotóinkat, könnyen visszaeshet a forgalmunk, és vele együtt a bevételünk, így mindenképpen érdemes extra figyelmet szentelnünk a képfájljainknak.
A látogatók 40%-a elhagyja azt a weboldalt, amely 3 másodperc alatt nem tölt be. Bár épp ezért köztudott, hogy a webhelysebesség egy kiemelten fontos SEO-elem, azt sokan nem sejtik, hogy az ilyen jellegű problémák mögött gyakran a rosszul optimalizált képek állak. A problémás képfájlok rengeteg galibát tudnak okozni, de ha ügyesen bánunk velük, akkor ennél is több hasznot hozhatnak a weboldalunk számára. Ne feledjük: egy helyesen optimalizált kép például a Google képkeresőjében is kiválóan teljesíthet. Épp ezért érdemes követnünk bizonyos aranyszabályokat.
Mindenképp töltsük ki az alt textet
A weboldalunk forráskódjában képek hozzáadásakor lehetőségünk van egy “alt” attribútummal felruházni a képünket az alábbi módon:
<img src=”image.png” alt=””>
Ez az úgynevezett alt text, aminek a kitöltése több szempontból is rendkívül fontos. Részben, mert a webes szövegfelolvasók felolvassák ennek a mezőnek a tartalmát, ezért hasznos a vakok és gyengénlátók számára, másrészt SEO-szempontból kiváló lehetőséget teremt kulcsszavak elhelyezésére. Természetesen ebben az esetben is fontos, hogy kerüljük a kulcsszóhalmozást és a felsorolásszerűen bedobált kifejezéseket.
Egy régebben alkalmazott gyakorlat szerint érdemes leírni, hogy pontosan mit ábrázol a kép. Egy becsukott ablakról készült fotó például “becsukott ablak” alt texttel is szerepelhetne az oldalon. Ennek ellenére a legújabb trend az, hogy ebben a mezőben próbáljunk meg egy rövid, a témához passzoló, kulcsszóval ellátott rövid mondatot elhelyezni. Ebben az esetben például nem lőhetünk nagyon mellé, ha azt írjuk, hogy “a becsukott ablak védelmet nyújthat az esőtől”.
Az alt text mellett a képünkhöz title attribútumot is megadhatunk, melynek kitöltése szintén nem árt, de a jelenleg ismert gyakorlatok alapján SEO szempontból kevesebb haszna van.
Fontos a megfelelő méret
Az már köztudott, hogy a Google esetében erős rangsorolási faktor a weboldalak betöltési ideje. Az ideális sebesség eléréséhez viszont feltétlenül szükség van a képeink méretének optimalizálására, törekednünk kell azok megfelelő tömörítésre. Az aranyszabály, hogy próbáljunk meg körülbelül 100 kilobyte-nál kisebb képeket használni a weboldalunkon. Érdemes lehet PNG és JPEG formátumokat használni, előbbieket a 16 színnél kevesebbet megjelenítő grafikáknál (pl. logók), utóbbiakat klasszikus fényképeknél.
Amennyiben valamilyen oknál fogva mégis muszáj a kelleténél nagyobb méretű képet feltöltenünk, késleltessük annak a betöltését. Ehhez érdemes lehet különböző lazy loading megoldásokat, CMS esetén pluginokat alkalmazni. Fontos, hogy a képünk a tényleges méretében jelenjen meg a weboldalunkon, egy 2000×4000 pixeles felbontású képet például ne 100×200-as méretben jelenítsünk meg. Ilyen esetekben eleve 100×200 pixeles képet töltsünk fel, így nem lesz feleslegesen nagyméretű a fájl. Érdemes elkerülnünk azt is, hogy felesleges információkat rendeljünk hozzá a képünkhöz, nem minden esetben van például szükség arra, hogy megadjuk a kamera típusát, a fényképész nevét, vagy a kép elkészítésének időpontját.
Minek nevezzelek?
A szakirodalom és az aktuális trendek szerint a képfájlok megfelelő elnevezése elképesztően fontos SEO-szempontból. Hallhatunk olyan hasonlatot is a témában, miszerint – a keresőoptimalizálást tekintve – a megfelelő fájlnév nélküli képet feltölteni olyan, mint töltelék nélkül fánkot enni. Minimális értelme nyilván van, de alapvetően kihagyott ziccer.
Ügyelnünk kell ugyanis arra, hogy a Google botjai teljesen tisztában legyenek azzal, mit ábrázol a kép. Szemben az alt texttel, ahol a korábban részletezett módon elmehetünk egy picit kreatívabb irányba, itt törekedjünk arra, hogy visszaadjuk azt, amit a kép ábrázol. Ha például egy kocka étcsokoládéról töltünk fel képet, bátran illessük “etcsokolade-kocka” névvel a fájlt. Nyugodtan használjunk kulcsszavakat ebben az esetben is, a példánkban szereplő kötőjel viszont szintén nem véletlen: kerüljük az alulvonást (_), a szóközt, és alapvetően maradjunk meg az ABC betűi, a számok és az említett kötőjelek használatánál.
A jövő formátumai
Ahogy más technológiák, úgy az internetes technológiák is folyamatos változásokon és fejlődésen mennek keresztül. Ez természetesen az interneten megjelenő képekre is igaz. Az utóbbi években megjelent következő generációs formátumok, a JPEG 2000, JPEG XR és WebP jobb minőséget és kisebb fájlméretet, jobb tömörítést kínálnak, mint a jelenleg népszerű társaik, a JPEG vagy PNG formátumok.
A Google például azt állítja, hogy mióta a YouTube-videók thumbnailjeihez WebP képeket használnak, azóta 10%-ot gyorsult a weboldal betöltési ideje. A JPEG-el szemben ez a formátum ráadásul támogatja az átlátszó rétegeket a képekben – ahogy egyébként a PNG is, aminél viszont átlagosan 25%-kal kisebb a WebP fájlok mérete. A temérdek pozitívum mellett a helyzet természetesen most sem fekete-fehér, és mielőtt letesszük a voksunk egy bizonyos kiterjesztés mellett, fontos, hogy megismerjük a teljes képet.
Hiszen ha annyira kiváló ötlet ezen formátumok használata, akkor hogy-hogy nem botlunk bele a hétköznapok során .jp2 vagy .webp kiterjesztésű képekbe? A válasz elsősorban a böngészőinkben keresendő. A legfelkapottabb browserek és alkalmazások ugyanis egyelőre még nem támogatják az ilyen formátumú képek megjelenését. A Safari például képtelen a Google által fejlesztett WebP képeket megjeleníteni, az Apple pedig valószínűleg nem dolgozik nagy erőkkel azon, hogy ilyen módon népszerűsítse a versenytársa szabadalmát. Az iOS-használók közben szabadon nézegethetik a JPEG2000 típusú fotókat – ez jelenleg Chromeban, Edge-ben vagy Firefoxban lenne lehetetlen.
Persze a böngészőkön kívül számos egyéb területen el kell még terjednie a következő generációs formátumoknak, hiszen jelenleg a legnépszerűbb tartalomkezelő rendszerek többsége, így a WordPress sem tudja őket kezelni. Egyelőre.
