Kép SEO: képoptimalizálás a felhasználóknak és keresőrobotoknak

Hiába tökéletes a weboldalad szöveges tartalma: ha a képeid optimalizálásáról megfeledkezel, értékes látogatóktól eshetsz el. 

A képeid megfelelő optimalizálásával gyorsabb betöltési időt, jobb Core Web Vitals értékeket és több organikus látogatót érhetsz el. A kisebb fájlméretek csökkenthetik az oldal adatforgalmát, míg a jól megírt alt textek, fájlnevek és strukturált adatok javíthatják az esélyeidet, hogy képeid megjelenjenek a Google Képekben, a Google Lens találatai között vagy akár a képes keresési találatokban. 

Mindez több termékmegtekintést és potenciálisan több vásárlást is eredményezhet. 

Mutatjuk, milyen képoptimalizálási beállításokkal érheted el mindezt.

A megfelelően beállított képek szerepe

Abban, hogy az internet alapjaiban alakítja át vizuálissá az elmúlt (legalább) 500 évben szövegközpontú kultúránkat, ma már szinte mindenki egyetért.

Ezért is meglepő, milyen kevesen fordítanak figyelmet az oldaluk képi elemeinek optimalizálására. Pedig – megelőzve (de nem mellőzve) – minden technikai szőrözést: az oldalunk vizuális arculata az, amellyel minden felhasználó (tehát potenciális ügyfél) először találkozik. Ha az oldalunk a nagy képméretek miatt lassan töltődik be vagy nem átlátható már az első pillanatban, a felhasználó hamar visszalép a találati oldalra, ami negatív rangsorolási jeleket küld a Google-nek. 

Ráadásul fogalmazhatunk mi bármennyire is érzékletesen: a termékünket mégis csak a róla készült képet mutatják be a legrészletesebben. Ahogy a márkánk is képileg vésődik be a látogatók emlékezetébe.

És ne feledkezzünk meg az akadálymentességi szempontokról sem.

Az intenetet ugyanis nem mindenki ugyanúgy használja. Sok látássérült embertársunk képernyőolvasó segítségével fogadja be az oldalunkat. Ez az eszköz hangzó beszéddé alakítja a számítógépen vagy az okostelefonon megjelenő szöveges tartalmakat. 

És igen, a képeket is.

Már ha méltányosak vagyunk, és mellékelünk a képeinkhez kellőképpen leíró helyettesítő szöveget, azaz alt textet. 

Ami nem mellesleg SEO szempontból sem elhanyagolható, hiszen a keresőrobotok és az AI modellek is alapvetően szövegesen értelmezik a képek tartalmát. 

A megfelelően optimalizált képek tehát olyan felületekre röptethetik be az oldalunkat, mint a Google Images, a Googe Discover, vagy éppen a ChatGPT. 

Ha odafigyelsz olyan – már korábban belengetett – technikai részletekre is, mint például a képméretek megfelelő beállítása, az a Core Web Vitals értékeidet is feljebb tekerheti, ami pedig a helyezésed is javítja.

Ez különösen azért fontos, mert a Google keresések több, mint 10 százaléka a Képekben történik. A teljes Google ökoszisztémát nézve azonban még nagyobb ez az arány. A Semrush adatai szerint a hagyományos Google-keresések közel 33–38%-a eleve feldob képtalálatokat (úgynevezett képcsomagokat) a főoldalon, mivel a felhasználók egyre inkább vizuális válaszokat várnak. Bizonyos kategóriákban, mint a termékek vagy az utazás, ez az arány a 70-80%-ot is eléri.

Ha tehát az olyan keresésekre a te képedet dobja fel a Google, amelyekre úgy ítéli meg, hogy vizuális tartalmakat várnak a felhasználók, már – szinte – nyert ügyed van.

De tegyük fel például, hogy kézműves sneakereket árulsz. 

A boldog vásárlód elégedetten feszít új cipőjében a villamoson, utastársai irigykedő tekintetének kereszttüzében. Az egyikük viszont megunja a meddő epekedést, és a telefonjához nyúl. 

Beizzítja a Google Lens-t. 

Suttyomban a vásárlód cipőjére irányítja a kamerát.

És bumm.

Már szereztél is egy új – feltehetően elégedett – jövöbeli vásárlót.

Elégedett vagy te is, nem igaz?

Ehhez azonban az kell, hogy a keresőknek egyértelműen azonosítható legyen a terméked.

Mutatjuk, hogyan teheted azzá.

Képoptimalizálás és SEO – best practicek

A képek optimalizálása szerencsére nem igényel különösebb programozói tudást. Sokszor néhány apró változtatással is elősegítheted, hogy a keresőrobotok könnyebben értelmezzék a tartalmukat, a látogatók pedig gyorsabban és kényelmesebben böngészhessék az oldaladat.

A következő beállításokkal könnyedén optimalizálhatod az oldalad vizuális tartalmát:

• Fájlnevek: használj rövid, leíró, releváns kulcsszavakat tartalmazó fájlneveket, lehetőleg kisbetűkkel, ékezetek nélkül és kötőjeles elválasztással.
• Alt text: minden tartalmi képhez írj pontos, tömör helyettesítő szöveget. A kizárólag dekorációs képeknél használj üres alt=”” attribútumot.
• Képformátum: lehetőség szerint válassz WebP vagy AVIF formátumot. Fényképekhez JPG, átlátszó grafikákhoz PNG, logókhoz és ikonokhoz SVG is megfelelő lehet.
• Képméret és tömörítés: csökkentsd a fájlméretet veszteséges vagy veszteségmentes tömörítéssel, és igazítsd a képfelbontást a megjelenítési mérethez. A képminőség megőrzésére is figyelj.
• Lazy loading: alkalmazz késleltetett betöltést a hajtás alatt megjelenő képeknél, de kerüld a használatát az oldal legfontosabb, kezdetben látható képeinél.
• Schema jelölés: használj releváns strukturált adatokat, például ImageObject, Product vagy Article jelölést, hogy a keresők könnyebben értelmezhessék a képek szerepét és kapcsolatait.

Nézzük meg részletesebben, miért érdemes ezekre odafigyelned, és hogyan ültetheted át őket a gyakorlatba!

Beszédes fájlnevek használata

Ha azt szeretnéd, hogy a Google pontosan értse, mit ábrázolnak a képeid, érdemes már a feltöltés előtt odafigyelned az elnevezésükre.

A kereső ugyanis a fájlnevekből is következtethet a képek tartalmára.

Térjünk vissza például a korábban említett sneakerüzletedhez.

Ha feltöltesz egy képet a legújabb, kézzel készített, fehér bőrcipődről, az IMG_4389.jpg fájlnévvel nem sokat árulsz el a keresőnek. A feher-kezmuves-bor-sneaker.jpg viszont már egészen más történet. Ugyanilyen hatékony lehet az is, ha a konkrét terméknevet adod meg.

A jó fájlnév tehát rövid, leíró jellegű, és lehetőleg tartalmazza a kép témájához kapcsolódó releváns kulcsszót is.

Néhány további apróságra azért érdemes odafigyelned:

• A szavakat kötőjelekkel (–) válaszd el egymástól, ne aláhúzásokkal (_) vagy szóközökkel.
• Lehetőleg ékezet nélküli, kisbetűs fájlneveket használj, így az esetleges karakterkódolási problémákat is elkerülheted.
• Ne zsúfold tele a fájlnevet kulcsszavakkal. Csak azt nevezd meg, ami valóban szerepel a képen.

A kötőjelek használatát egyébként a Google URL-struktúrákra vonatkozó útmutatója is kifejezetten javasolja, mivel így könnyebben felismerhetők az egyes szavak.

Persze önmagában egy jól megválasztott fájlnévtől még nem fogsz a Google Képek találati listájának élére ugrani. De ha már egyszer elnevezed a képedet, miért ne mondanád el vele azt is, hogy mi látható rajta?

Alt text: ne hagyd, hogy a képeid szó nélkül maradjanak!

A fájlnévnél azonban van egy lényegesen fontosabb szöveges elem, amelynek segítségével a keresőrobotok értelmezhetik a képeidet.

Ez pedig az alt text, magyarul helyettesítő szöveg.

Lényegében egy rövid, leíró szövegről beszélünk, amely a kép HTML-kódjában, az alt attribútumban kap helyet. Elsődleges feladata, hogy azok is megértsék a kép tartalmát, akik valamilyen okból nem látják azt.

Például azért, mert látássérültként képernyőolvasót használnak, vagy mert a kép – a technika ördögének köszönhetően – egyszerűen nem töltődik be. Utóbbi esetben a böngésző a helyettesítő szöveget is megjelenítheti.

A Google hivatalos útmutatója szerint ráadásul az alt text az egyik legfontosabb szöveges információforrás a képek tartalmának értelmezéséhez. A kereső ezt az oldal szövegkörnyezetével és képfelismerő algoritmusaival együtt használja.

De milyen a jó alt text?

korábban elnevezett képünkhöz például az alábbi helyettesítő szöveget rendelhetjük:

<img src=”feher-kezmuves-bor-sneaker.jpg” alt=”Fehér, kézzel készített bőr sneaker barna gumitalppal”>

A lényeg, hogy röviden, természetesen és pontosan írd le, ami a képen látható, lehetőleg a releváns kulcsszavakat is belefoglalva. A kulcsszóhalmozást viszont itt is jobb, ha inkább elfelejted.

És hogy milyen hosszú legyen?

A legtöbb ajánlás általában 125 karakteres limittel él, de ez nem egy hivatalos adat, szóval ne ragaszkodj hozzá mereven. A lényeg, hogy a kép tartalmát minél informatívabban és tömörebben írd le.

Van azonban egy fontos kivétel.

A kizárólag dekorációs célokat szolgáló képekhez nem szükséges leíró alt textet írnod. Ilyenkor a W3C akadálymentességi ajánlása szerint üres attribútumot (alt=””) érdemes használnod, hogy a képernyőolvasók figyelmen kívül hagyhassák ezeket.

Az alt text tehát egyszerre szolgálja a keresőoptimalizálást és az akadálymentességet. Kevés olyan SEO-beállítás létezik, amellyel a Google és a látogatóid dolgát is ennyire egyszerűen megkönnyítheted.

Képformátumok: JPG, PNG, WebP, AVIF vagy SVG?

A képek megfelelő elnevezésével és az alt textek beállításával már sokat tettél azért, hogy a keresők megértsék, mit is szeretnél megmutatni nekik.

De van még egy fontos döntés, amit lehetőleg a feltöltés előtt érdemes meghoznod.

Ez pedig a képformátum kiválasztása.

A különböző formátumok ugyanis eltérő fájlméretet és képminőséget kínálnak, ami közvetlenül befolyásolhatja az oldalad betöltési sebességét. Minél kevesebb adatot kell letöltenie a böngészőnek, annál gyorsabban jelenhetnek meg a képeid, ez pedig a felhasználói élmény és a Core Web Vitals szempontjából sem mellékes.

A jól ismert JPG és PNG formátumok mellett ezért ma már érdemes a modernebb WebP és AVIF megoldásokkal is számolnod.

A Google web.dev útmutatója szerint ugyanis ezek általában hatékonyabb tömörítést biztosítanak a hagyományos formátumoknál, vagyis hasonló képminőség mellett kisebb fájlméretet érhetsz el velük.

A WebP például a JPG-nél átlagosan 25–35%-kal kisebb fájlokat eredményezhet hasonló vizuális minőség mellett. A még újabb AVIF pedig bizonyos esetekben ennél is jobb tömörítési arányt kínál.

Ráadásul a WebP-t ma már valamennyi jelentős modern böngésző támogatja. Az AVIF támogatottsága is széles körű, bár régebbi böngészőverzióknál még előfordulhatnak kompatibilitási problémák.

És hogy melyiket érdemes választanod?

Formátum	Előnyök	Hátrányok	Ajánlott felhasználás
JPG / JPEG	Széles körű támogatás, jó tömörítés fényképeknél	Veszteséges tömörítés, nincs átlátszóság	Fotók, termékképek
PNG	Veszteségmentes minőség, átlátszó háttér	Fényképeknél jellemzően nagyobb fájlméret	Képernyőképek, egyszerű grafikák
WebP	Kis fájlméret, jó képminőség, átlátszóság	Régi böngészőkben kompatibilitási gondok	Fotók, termékképek, webes grafikák
AVIF	Kiemelkedő tömörítés, jó képminőség	Régebbi böngészőkben korlátozott támogatás	Nagy felbontású fotók, webes képek
SVG	Minőségromlás nélkül méretezhető	Fotókhoz és túl összetett grafikákhoz nem ideális	Logók, ikonok, egyszerű illusztrációk

Forrás: MDN Web Docs – Image file type and format guide

Ha tehát most építed a weboldaladat, általános felhasználásra a WebP remek kiindulópont, míg a lehető legkisebb fájlmérethez az AVIF-et is érdemes kipróbálnod.

Ha viszont valamiért ragaszkodsz a hagyományos formátumokhoz, fényképek esetén inkább JPG-t válassz. A PNG-t pedig tartogasd azokhoz a képekhez, amelyeknél fontos az átlátszó háttér vagy az apró részletek veszteségmentes megőrzése.

Külön említést érdemel az SVG is, amely a többi felsorolt formátummal ellentétben vektorgrafikus megoldás. Ez azt jelenti, hogy a képet nem képpontok, hanem matematikailag meghatározott alakzatok írják le, így akármekkorára nagyíthatod anélkül, hogy pixelesedne.

Logókhoz és ikonokhoz tehát ideális választás, egy részletgazdag termékfotót viszont ne akarj vele megörökíteni.

Képméret csökkentése és tömörítés: a kevesebb néha tényleg több

Hiába választottad ki a legkorszerűbb képformátumot, ha utána egy több megabájtos, óriási felbontású képet töltesz fel az oldaladra.

Éppen ezért a képoptimalizálás egyik legfontosabb lépése a fájlméret csökkentése, amit alapvetően kétféleképpen érhetsz el: tömörítéssel és a képek felbontásának megfelelő beállításával.

Kezdjük a tömörítéssel.

Ehhez használhatsz olyan eszközöket, mint a Squoosh, az ImageOptim vagy a TinyPNG, amelyekkel jelentősen csökkentheted a képek fájlméretét. A korábban bemutatott WebP és AVIF formátumokra történő konvertálás szintén hatékony megoldás lehet.

A tömörítésnek két alapvető típusa létezik:

• Veszteséges (lossy) tömörítés: a kisebb fájlméret érdekében bizonyos képi információkat végleg eltávolít. Fényképek esetén különösen hatékony, hiszen megfelelő beállítások mellett a minőségromlás szabad szemmel alig észrevehető.
• Veszteségmentes (lossless) tömörítés: az eredeti képi információk megőrzése mellett csökkenti a fájlméretet. Akkor lehet hasznos, ha a legapróbb részletek pontos megjelenítése is fontos.

De azért ne ess túlzásba!

A túlzott tömörítés elmosódott részleteket, furcsa színátmeneteket és zavaró képhibákat eredményezhet.

Márpedig hiába töltődik be villámgyorsan a termékfotód, ha a látogatód a végén azt sem tudja eldönteni, hogy cipőt vagy egy különösen formabontó péksüteményt nézeget.

A cél tehát nem a lehető legkisebb fájlméret, hanem a megfelelő egyensúly a képminőség és a betöltési sebesség között.

A tömörítés mellett azonban a képek felbontására is figyelned kell.

Ha ugyanis egy kép mindössze 800 pixel szélességben jelenik meg az oldaladon, általában felesleges az eredeti, 5000 pixeles változatát letöltetned a felhasználóval.

Általános webes felhasználásra sok esetben a 2500 pixelnél kisebb képek is bőven elegendők. Ez azonban nem kőbe vésett szabály: a megfelelő felbontás a megjelenítési mérettől, a kijelző pixelsűrűségétől és a kép funkciójától is függ. Egy nagyítható termékfotó például nagyobb felbontást igényelhet.

A legjobb megoldás ezért az, ha különböző képméreteket biztosítasz a különböző eszközökre. A reszponzív képek segítségével például elérheted, hogy a mobiltelefonon böngésző látogatóidnak ne kelljen ugyanazt az óriási fájlt letölteniük, mint az asztali számítógépet használóknak.

A Google web.dev útmutatója szerint a megfelelően méretezett, reszponzív képek javíthatják a Largest Contentful Paint (LCP) értékét is, amely a Core Web Vitals egyik fontos mutatója.

Ha pedig nem tudod, mely képek lassítják leginkább az oldaladat, érdemes a PageSpeed Insights segítségét kérned. Az eszköz konkrétan megmutathatja, hol érdemes csökkentened a képek letöltési méretét.

Mert a jó képoptimalizálásnak végső soron nem az a célja, hogy minél kevesebbet mutass a látogatóidnak. Hanem az, hogy ugyanazt a vizuális élményt a lehető legkevesebb felesleges adat letöltésével biztosítsd.

Lazy loading: ne töltsd be azt, amit még senki sem lát!

Képzeld el, hogy egy több száz terméket kínáló webshopban böngészel. Megnyitod az egyik kategóriaoldalt, de a böngésződ máris nekilát valamennyi termékkép letöltésének.

Azokénak is, amelyekhez talán soha nem fogsz legörgetni.

Nem hangzik különösebben hatékony megoldásnak, igaz?

Pontosan ezt a problémát hivatott kiküszöbölni a lazy loading, vagyis a képek késleltetett betöltése.

A módszer lényege, hogy a böngésző nem tölti le azonnal az oldal összes képét, hanem bizonyos elemek letöltését addig elhalasztja addig, amíg a látogató a közelükbe nem görget.

Ezzel csökkentheted a kezdeti adatforgalmat, és több erőforrás maradhat a valóban fontos tartalmak betöltésére. Ez pedig az oldal sebességére, bizonyos esetekben a Core Web Vitals mutatóira is kedvező hatással lehet. 

A gördülékenyebb felhasználói élményen túl tehát a rangsorolásodon is javíthat.

Ráadásul az implementálása sem igényel különösebb varázslatot.

A legtöbb modern böngésző natívan támogatja a késleltetett betöltést, így elegendő a kép HTML-kódjához hozzáadnod a loading=”lazy” attribútumot:

<img src=”image-example.png” loading=”lazy” alt=”A kép tartalmának rövid leírása”>

De mielőtt felbuzdulva az összes képedre ráaggatnád ezt a beállítást, van egy fontos részlet.

A lazy loading nem minden kép esetén jó ötlet.

A hajtás felett, vagyis a görgetés nélkül is látható területen megjelenő képeknél – különösen a nagy méretű hero képeknél – kifejezetten hátrányos lehet.

A Google web.dev útmutatója szerint ugyanis a rossz vagy túl sok képnél alkalmazott késleltetett betöltés ronthatja a Largest Contentful Paint (LCP) értékét, mivel a böngésző később kezdi el letölteni az oldal legfontosabb vizuális elemét. 

Ezzel épp azokon a CVW-mutatókon rontasz, amiken lazy loading javítani lenne hivatott.

Érdemes tehát a lazy loadingot elsősorban a lejjebb található képeknél alkalmaznod, miközben a kezdetben látható tartalmakat hagyod azonnal betöltődni.

A módszer közvetlenül nem garantál jobb Interaction to Next Paint (INP) értéket sem, bár az erőforrások tudatosabb felhasználása közvetve segítheti az oldal reszponzivitását. A natív megoldással ráadásul elkerülheted a felesleges JavaScript-alapú betöltőmegoldásokat is.

A lazy loading tehát nem arról szól, hogy minden képet a lehető legkésőbb tölts be. Hanem arról, hogy a megfelelő képeket a megfelelő időben jelenítsd meg.

A látogatóidnak ugyanis nem kell mindent azonnal megmutatnod. Csak azt, amiért éppen érkeztek.

Schema jelölés: segíts a Google-nek, hogy még többet tudjon a képeidről!

A fájlnevekkel és az alt textekkel már egész szépen elmagyaráztad a Google-nek, hogy mi látható a képeiden.

De mi lenne, ha azt is elmondhatnád neki, hogy milyen szerepet töltenek be az oldaladon, ki készítette őket, vagy éppen milyen termékhez kapcsolódnak?

Pontosan erre szolgálnak a strukturált adatok, vagyis a schema jelölések.

Ezek olyan, a weboldal kódjában elhelyezett információk, amelyek szabványosított formában segítik a keresőrobotokat a tartalom és az egyes elemek közötti kapcsolatok értelmezésében.

A képek esetében például az ImageObject schema segítségével megadhatod a kép URL-jét, készítőjét vagy felhasználási feltételeit. De a Product, Article vagy Recipe jelölések image tulajdonságával azt is jelezheted, hogy az adott kép melyik termékhez, cikkhez vagy recepthez tartozik.

Hogy ez miért jó neked?

Mert a megfelelő strukturált adatok hozzájárulhatnak ahhoz, hogy a tartalmad gazdagabb, vizuálisan is hangsúlyos keresési találatokban (rich results) jelenjen meg.

Egy webshop esetében például a termékadatok megfelelő jelölése elősegítheti, hogy a Google a termék képét, árát, elérhetőségét vagy vásárlói értékeléseit is megjelenítse a releváns találati felületeken.

Ha szeretnéd ellenőrizni, hogy megfelelően implementáltad-e a jelöléseket, a Google Rich Results Test eszközével megvizsgálhatod, hogy az oldalad alkalmas-e a Google által támogatott bővített találatok megjelenítésére.

Mert bár – hogy visszacsatoljak a gondolatmenet elejére – a digitális kultúra hiába mozdul a egyre erőteljesebben a vizualitás felé, ennek a változásnak a motorjai, az informatikai rendszerek, továbbra is a Guttenberg-galaxisban maradtak. 

Ne félj tehát szöveges információkkal is segíteni őket!