Ha már az e-shopon a termékekneveket megfelelően megadtad, akkor jó ha tisztában vagy azzal is, hogy az e-shopok és weboldalak 99%-án van lehetőség a képek jobb optimalizálására, és tapasztalatok szerint a cégek ebben csak marginálisan vesznek részt. A webhely teljesítménye nagy, mérhető hatással van a konverziós arányra, javítja a felhasználói élményt, vagy akár befolyásolja a webhely organikus keresésben való elhelyezését. 

Napjainkban a felhasználók nagyszerű felhasználói élményt és a lehető legjobb webhelysebességet várják el az internet használatakor. A képek teszik ki a betöltött tartalom nagy részét, és nagymértékben befolyásolják a webhely betöltési sebességét. 

Mi az a képoptimalizálás?

Az e-shopok és weboldalak képoptimalizálása egy olyan folyamat, amely a képek betöltési sebességének javítására irányul a felhasználói élmény javítása érdekében. A képoptimalizálás szabályai természetesen szintén általánosak, de sajátosságaik is lehetnek attól függően, hogy milyen aloldalhoz készíted a képeket. Tehát más lesz a kezdőlap, a termék, a kategória és a blog. 

A jobb képméretet a kép tulajdonságainak különböző paramétereken keresztül történő változtatásával érjük el, aminek köszönhetően a lehető legkisebb fájlmérettel a legjobb minőségű és legmegfelelőbb képet kapjuk. A cél az ideális állapot megtalálása a fotó minősége és az e-shop sebessége szempontjából. A méretet elsősorban a következők befolyásolják:

  • Felbontás – ha a fénykép nem megfelelő felbontású, akkor használhatatlan vagy túl nagy lesz. 
  • Formátum – leggyakrabban JPG-t, WebP-t, SVG-t és esetenként PNG-t használunk.
  • Tömörítés – használhatjuk JPEG, WebP, AVIF formátumok optimalizálásában. SVG-t vagy tömörítetlen PNG-t is használunk. Ideális az egyensúly megtalálásához a fénykép minősége és mérete között.

Fontos a megfelelő forráskép kiválasztása is. Ha a fotó rossz minőségű (elsősorban élesség, mélységélesség és színvisszaadás szempontjából), akkor nehéz lesz optimalizálni.  Gyakran előfordul, hogy a megfelelő formátum kiválasztása is fontos. Például a logóhoz a SVG formátum ajánlott..

Néha átlátszó képeket használnak, ilyenkor a megoldás a PNG formátum. Természetesen, ha nagy területeken és magas minőségű PNG képekről van szó, az jelentősen lelassíthatja a weboldal vagy az online áruház sebességét, így jobb lenne elkerülni a használatukat a design tervezésekor.

Miért érdemes a képoptimalizálásra összpontosítani?

Ahogy korábban említettem, a képek teljes méretaránya általában a betöltött adatok teljes méretének 60-98%-a. Használd például a WebPageTest eszközt, és derítsd ki, hogy mekkora ez az arány a saját webhelyeden.

Az optimalizálás azonban valószínűleg soha nem lesz teljesen optimális, ahogy azt a különféle weboldal-sebesség ellenőrző eszközök javasolnák, mert mindig figyelembe kell venni a képek minőségét is, nem csak a sebességet.

Jobb eredmények az organikus keresésben

A keresési eredményekre is pozitív hatással lehet. A Google a gyorsan betöltődő webhelyeket részesíti előnyben. Ha a képek optimalizálva vannak, az általános organikus keresés is előnyös. 

Megfigyelhetjük például, hogy a képoptimalizálás apró változtatásai, fejlesztései is segíthetnek. Ezt persze csak akkor tudhatod meg, ha rendszeresen és hosszú távon figyelemmel kíséred saját és versenytársaid pozícióit a keresési eredmények között.

Az optimalizált képek könnyebben jelennek meg a képkeresési eredmények között, ami egyre népszerűbb. Ott nem kell nemcsak a fent említett paramétereket optimalizálni, hanem a képek segédszövegeit sem, mint például az alt tag és a title attribútum közvetlenül a forráskódban. Minden modern e-shopnak vagy CMS rendszernek képesnek kell lennie ezen paraméterek szerkesztésére. 

Jobb felhasználói élmény és magasabb konverziós arány

A betöltési sebesség és a használható webdizájn kombinálva jobb felhasználói élményt jelent. Ez alapvetően befolyásolja az átváltási arányt. Ha a képek nagy százaléka nincs optimalizálva, az ronthatja a felhasználói élményt és a konverziós arányt. Emiatt sem szabad megfeledkezni erről a folyamatról egy e-shop vagy weboldal készítésekor. Új tartalom létrehozásakor és új termékek hozzáadásakor dolgozz ki egy folyamatot a képek lehető legnagyobb mértékű optimalizálására.

Minél lassabb a weboldal betöltési sebessége, annál alacsonyabb a konverziós arány.

Képoptimalizálási folyamat

Nézzük meg, hogyan optimalizálhatod a képeket, hogy biztosítsd a megfelelő egyensúlyt webhelyed minősége és sebessége között.

Határozd meg a szabályokat és eljárásokat bizonyos típusú aloldalakhoz

Meghatározhatunk egyszerű szabályokat az e-shop képformátumaira vonatkozóan. Nem számít, ha időnként elromlik valami, fontos, hogy leírjuk, mi az optimális.

  • Honlap, szalaghirdetés: 1920 x 600 px, JPEG, 50-200 KB méret.
  • Termékkép, galéria: 1600 x 1600 px, WebP, 10-100 KB méret.
  • Termékkép a termék részleteiben: 600 x 600 px, WebP, 10-50 kB méret.
  • Termék előnézet, kategória: 400 x 400 px, WebP, 5-30 KB méret.
  • Blogcikk: 1200 x 800 px, JPEG, 30-150 KB méret.

Ezt követően követheted és ellenőrizheted ezeket a szabályokat. 

Képfeldolgozási folyamat webes vagy e-shop számára

Válaszd ki az e-shop vagy a webhely azon részét, amelyet optimalizálni szeretnél, és határozd meg hozzá saját folyamatod (egy lépéskészletet, amelyet egyszer vagy rendszeresen meg kell ismételni). Egy blognak más folyamata lesz, mint egy e-shopnak. A zoknit árusító e-shop és a bútorokat árusító e-shop más folyamatot fog elvégezni, ahol a fotók minősége jelentősen eltérhet.

A forrásképeket érdemes feltölteni egy megosztott felhőtárhelyre forrás és optimalizált formában is, így mindig rendelkezésére áll majd egy forrás arra az esetre, ha módosítani szeretnéd őket.

Példák offline és online képoptimalizálási eszközökre:

  • Adobe Resize 
  • Compress Now 
  • JPEG Optimizer
  • Tiny PNG
  • Optimizilla
  • JPEG.io
  • ImageRecycle
  • Compressor.io
  • Irfan View
  • Adobe Photoshop

Vágd le a forrás képet a megadott célpont paraméterek szerint a megfelelő eszköz segítségével. Koncentrálj olyan paraméterekre, mint például a szélesség, magasság, DPI, minőség (tömörítés) és formátum. 

Ha nem vagy elégedett az eredménnyel, akkor használhatsz másik eszközt, ahol menthetsz gyengébb minőségben, vagy használhat más formátumot. Ügyelj azonban arra, hogy ne használj túl sok tömörítést, és ne csökkentsd túlságosan a képminőséget.

Nevezd át az exportált fájlokat úgy, hogy ne tartalmazzanak diakritikus jeleket, a szóközöket pedig kötőjelekkel helyettesítheted, ideális esetben a keresett kulcsszóval. A fájl készen áll a weboldalra vagy e-shopba való feltöltésre.

Kép feltöltése e-shopba vagy weboldalra

Képek manuális hozzáadása

Feltöltéskor az e-shopnak vagy webes CMS rendszernek képesnek kellene lennie az alapvető leíró mezőket kitöltésére. Ezek elengedhetetlenek a kép jobb megjelenítéséhez a keresési eredményekben a keresőmotorokban, az oldal tartalmának indexeléséhez (a robot információt kap arról, mi található a képen), és az oldal elérhetőségének javítása érdekében.

A következő leíró mezőket töltjük ki:

  • Az „Alt” szöveg az „img” tagben jelenik meg. Ez a legfontosabb tényező a kereséshez és az indexeléshez. Akkor is megjelenik, ha a kép nem töltődik be. Az „Alt” szövegnek az ábra tartalmát kell leírnia, ideális esetben kulcsszó használatával.
  • A cím az „img” tag „title” paraméterével van definiálva. Ez gyakorlatilag egy alternatív szöveg a kép „Alt” szövegének, amely további információkat nyújthat a felhasználó számára, ha az egérrel rámutat a képre.

Ezenkívül a WordPress további mezőkkel rendelkezik:

  • A „Felirat” egy rövid szöveges leírás, amelyet hozzá adhatunk képekhez. Általában arra használják, hogy további részleteket adjanak a képről.
  • A leírás zavaró tényező lehet. Azok a képek, amelyeket a WordPress média könyvtárában tárolnak, rendelkeznek saját URL címmel.

A képfeldolgozási folyamat automatizálása

A fent említett folyamat alkalmazása nehezebb lehet termékképek feedjeire vagy több ezer termékre. De jó hír, hogy ezeket a szabályokat együttműködve a programozókkal alkalmazni lehet az ilyen típusú tartalomra is.

Gyakorlatilag minden említett dolog módosítható az e-shop technikai megoldásainak oldalán. Például, ha a beszállító PNG képeket küld 2000 x 2000 pixel felbontással, akkor megváltoztathatja őket a kért felbontásra, használhatja a tömörítő eszközöket és megváltoztathatja a formátumot, például WebP-re. Ugyanakkor legenerálhatja belőlük a szükséges előnézeti méreteket, ahol például valamivel jobb tömörítést adhatunk.

Ugyanez igaz a leíró mezőkre is. Dinamikusan generálhatja és helyettesítheti a üres mezőket, mint az alt és a cím mezők, a meta címből és az H1-ből. Jobb, ha van duplikált alt mező, mint sem üres mezők. Nagyobb cégeknek lehetősége van a kulcsszavak elemzése alapján generálni ezeket a mezőket.

Sebesség ellenőrzés az optimalizálás után

A webhely sebességének ellenőrzéséhez különféle eszközöket használhatunk. 

Néhány példa:

Ellenőrző lista, vagy mit ne felejts el a képek optimalizálásakor az e-shopban

  • Ne adj hozzá sok képet és bannert a kezdőlaphoz, nehogy lelassítsa azt. 
  • Optimalizáld az összes képet.
  • Használd a leírás mezőket a képeknél.
  • Hozz létre kép-előnézeteket a kategóriában a ténylegesen használt méretben.
  • Használd ki a képoptimalizálási lehetőségeket.
  • Állítsd be a lehető leghatékonyabb képoptimalizálási folyamatot, legyen az manuális vagy automatizált.

Források:

Bianka Sillik
Bianka