Képeket az e-kereskedelmi tevékenységünk számtalan pontján használunk. Nem csak a kategórialistákban és termékbemutató oldalakon, hanem a blogunkban, Facebook és Instagram felületeinken, a kiküldött tranzakciós és promóciós leveleinkben is. A használatuk egyértelműen fontos és hangsúlyos, a tartalomfogyasztásban megkérdőjelezhetetlen figyelemfelkeltő szerepük van.

Az, hogy hogyan kezeljük a képeinket, nem csak az eredményességünkre van közvetlen hatással. A nem megfelelő megjelenítés többek között a keresők találati listáiban elért helyezésünket is befolyásolhatja.

Ennek ellenére a képek sokszor háttérbe szorulnak a sok teendő között a fontossági listán, és elfelejtkezünk arról, hogy azokat az aktuális elvárásoknak megfelelően optimalizáljuk. De hogyan kezdjünk neki?

Miért fontosak a képek?

Első lépésként egy gyors áttekintés arról, hogy miért is kell nagy figyelmet fordítanunk a képekre:

Az első benyomás

Általában a képek az elsők, amikre a látogatók felfigyelnek, ha a termékek adatlapját megnyitják. Ez az első egy-két másodperc, és az ekkor szerzett benyomás már eldöntheti, hogy az oldalon maradnak, vagy továbbállnak a felhasználók.

Egy kép többet mond ezer szónál

Egy jó képről sokkal jobban megítélhetőek egy termék részletei, minősége, mint bármilyen szöveges leírásból. Minél jobban be tudjuk mutatni a kínálatunkat, annál közelebb tudjuk hozni a böngészési élményt ahhoz, mintha egy boltban a kezébe tudná venni a vásárló a kiszemelt terméket.

Figyelemfelkeltés mobilon

A mobil eszközök használatának terjedésével a képek szerepe is megnőtt. Egy kisebb képernyőn végigpörgetve a listákban nem a leírásokat fogják olvasgatni a látogatóink, hanem ott állnak meg, ahol egy-egy kép felkelti a figyelmüket az alatt az egy pillanat alatt, amíg átsuhan a kijelzőjükön.

Rangsorolási szempontok

A képek nem csak vizuálisan részei az oldalunknak, hanem a keresőmotorok is vizsgálják őket, többféle szempontból. A nem megfelelő formátumban, méretben, tömörítettséggel alkalmazott képek lassítják az oldal betöltődését, a hiányzó metaadatok megnehezítik az indexelést, ezáltal befolyásolhatják a találati listákban elért helyezéseinket is.

A megfelelő formátum kiválasztása

A célnak megfelelő képformátum kiválasztása jelentős hatással lehet az eredményeinkre.

GIF formátum esetén a képek minősége általában alacsonyabb, viszont csökken a képfájl mérete is. Akkor érdemes ezt használni, ha kis méretű ikonokat vagy bélyegképeket készítünk.

PNG formátumban akár átlátszó hátterű képeket is készíthetünk, és szélesebb színpalettát is hatékonyan használhatunk. A lehetőségek kihasználásával azonban a képek mérete is növekszik.

JPEG formátumot használ a legtöbb fényképezőgép, valamint ez a legelterjedtebb változat az online világban is. A különböző tömörítési fokozatoknak köszönhetően magunk választhatjuk ki, hogy a minőség és méret közötti optimális határt hol húzzuk meg. Az esetek többségében ez lehet a megfelelő megoldás.

Mikor ne használjunk JPEG-et?

Bár sokszor ez a jó választás, vannak esetek, amikor mégis érdemes másik megoldást használni. PNG képekkel jobb eredményt érhetünk el akkor, ha a képeink főleg vonalakból, ikonokból, vagy éles kontúrvonalas formákból állnak. A JPEG tömörítés ilyen esetben elmossa a határokat a tárgy és a háttér között, így kissé életleníti a képeinket.

Ha várhatóan többszörös feldolgozáson esik át az eredeti képünk (például a nagy méretű termékfotóból a webshop több különböző méretű változatot is konvertál, majd vízjelet is tesz rá), a tömörítés minden alkalommal ront egy kicsit a minőségen, ilyenkor is érdemes inkább a PNG használatát megfontolni.

Használjunk képoptimalizáló eszközöket!

A képfájl mérete a kép formátumától, tartalmától, tömörítettségétől és az eredeti képmérettől függően változhat. Sok kép esetén elég nagy munka kiválasztani a megfelelő beállításokat, azonban vannak olyan eszközök, amelyek ezt automatizáltan el tudják végezni helyettünk.

A TinyJPG JPEG és PNG fájlok esetén alkalmazható, és a képek elemzésével meghatározza, hogy mi az a minimális képméret, ami még a minőség jelentős romlása nélkül alkalmazható. Használható egyesével, de az API segítségével a webshop motorunk automatizált képfeldolgozó részébe is integrálhatjuk.

A jpegoptim kifejezetten automatizált feldolgozásra készült, tapasztalataink szerint nem túlzottan erőforrásigényes, ezzel együtt jó tömörítési eredményeket ér el.

A guetzli JPEG képek automatizált feldolgozására alkalmas, jelentős erőforrásigénye van, cserébe 10-15%-kal jobb hatásfokkal tömörít, és a képek látható minősége is jobb mint a versenytársaié.

A PageSpeed Module a Google által kiadott, közvetlenül a kiszolgáló szerverekre telepíthető modul, amely a képek optimalizálásáról gondoskodik anélkül, hogy ezzel a művelettel a webshop motoron belül foglalkoznunk kellene.

Ha az oldalunkat a PageSpeed Insights elemző eszközben lefuttatva, az eredmények között szerepel az „Optimalizálja a képeket” felhívás, akkor érdemes a fenti eszközök valamelyikének használatát megfontolnunk.

SEO-zzuk a képeket is!

A képek megfelelő információkkal ellátása segíti a keresőmotorokat, hogy ne csak a szöveges tartalmakat indexeljék az oldalunkon, hanem a vizuális elemeket is. Ehhez mindössze néhány irányelvet kell következetesen betartanunk.

Fájlnevek

A képfájlok elnevezése az elsődleges információ forrás. A fényképezőgép által generált sorszám semmit nem mond el annak a tartalmáról, ehelyett mindig használjunk releváns fájlnevet, mondjuk a termék megnevezését.

Például: „IMG_1567.jpg” helyett „bock_rose_cuvee_2016.jpg”

Megfelelő ALT szövegek

Az ALT mezőben megadott információk a böngészés során általában nem láthatóak, azonban a felolvasó programok számára és a keresőmotoroknak is kulcsfontosságúak. Ügyeljünk rá, hogy ez mindig legyen megfelelően kitöltve, és azt írja le, amit az adott kép ábrázol, termék esetén

például: „BOCK Rosé Cuvée 2016”

Kontextus

A képeket körülvevő szöveges tartalom szintén fontos. A keresőmotorok hasonlóan dolgozzák fel az oldalunkat, mint ahogy a látogatóink böngésznek: az oldal egészét figyelembe veszik ahhoz, hogy kialakítsák az összképet. A képek mellett megjelenített egyedi termékleírások jelentősen hozzájárulnak az eredmények növeléséhez.

Figyeljünk a közösségi médiára!

Utolsó lépésként győződjünk meg arról, hogy ha valaki megosztja az oldalainkat valamelyik közösségi média felületen, akkor ott is ideálisan jelenjen meg a tartalmunk.

Az ún. Open Graph protocol megfelelő implementálásával meghatározhatjuk, hogy egy oldal megosztása esetén milyen kép és milyen szöveg jelenjen meg, ahelyett hogy egy látszólag véletlenszerűen kiválasztott kép, pl. vállalkozásunk logója és bemutakozása kerüljön a termék kép helyére.