A vásárlók megszerzése, megtartása és az optimális konverzió elérése összetett feladat, amelyben a webáruházunk technikai teljesítménye is fontos szerepet játszik. Márpedig az oldalunk betöltési sebessége, vagy megjelenése a keresőben olyan apróságokon is elcsúszhat, mint a termékképeink optimalizáltsága.
A weboldal különböző alkotóelemekből áll, amelyek mérete összeadódik, és együttesen teszik ki az oldal bájtokban mért nagyságát. Az elemek között a képek közel 50%-os súllyal szerepelnek, ezért van az, hogy az ő optimalizálásukkal lehet leginkább javítani az oldal betöltési sebességén, illetve a Google találati listáján elfoglalt pozícióján.
A legtöbb e-kereskedő persze nem programozó, hogy mélységében foglalkozzon a technikai részletekkel, de a képek optimalizálását fejlesztői szaktudás nélkül is meg lehet oldani. Ehhez adunk néhány tippet.
1. Használjuk a megfelelő formátumot
A három általánosan elterjedt képformátum: JPEG, PNG és GIF. Mindegyikük más-más tulajdonságokkal rendelkezik.
A JPEG vagy JPG nyújtja a legszélesebb színpalettát. Másik előnye, hogy módosíthatjuk a fájl méretét. Fontos tudni, hogy amikor ezt tesszük, akkor a kép minőségét is változtatjuk. A jobb minőséghez ugyanis nagyobb fájlméret társul, ezért meg kell találni az optimális kompromisszumot. Ezt a formátumot érdemes használni a termékképként, fotók publikálására, illetve sok színt tartalmazó képek esetében.
A GIF jóval kevesebb színt tud megjeleníteni, mint a JPEG (konkrétan csak 256-ot), ugyanakkor ez a formátum az egyetlen lehetőségünk arra, hogy mozgó képet, rövid videót, animációt tegyünk közzé, mégpedig kis fájlméretben. Jellemző felhasználási köre: animáció, kis képek (pl. ikonok), néhány színt használó képek (pl. logo).
A PNG a legújabb formátum a három közül. Fájlméretet tekintve jellemzően nagyobb, mint egy JPEG, de a minősége is jobb. Előnye, hogy két altípusa is van: a PNG-8 csak 256 színt képes megjeleníteni, mint a GIF (ezért kisebb méretű), míg a PNG-24 több millió színt kezel. Akkor célszerű ezt a formátumot választani, ha a kép minősége fontosabb, mint a mérete.
2. Optimalizáljuk a fájlméretet
A képméret és a fájlméret között óriási különbség van. A képméret alatt a szélességet és magasságot értjük (pl. 1024×768 pixel, azaz képpont), míg a fájlméret alatt azt, hogy az az adott kép mennyi tárterületet foglal el a szerveren (kilobájt, megabájt). Minél nagyobb egy fájl, a vevőinknek annál tovább tart letölteni. Ha egyszerre sok vásárlónk van, ez a hatás sokszorozódik, ami végül akár az egész webáruház belassulásához is vezethet. Ezért fontos az optimalizálás.
Ne aggódjunk, ha nincs a gépünkön Photoshop: léteznek ingyenesen, böngészőből elérhető megoldások is. Ilyen például a PIXLR, amelynek az Editor verziója egy teljes értékű képszerkesztő, az Express változat pedig egyszerűbb, gyakori műveletek elvégzésére alkalmas.
Ha megnyitunk (pontosabban feltöltünk) egy képet szerkesztésre, akkor a mentés során lehetőségünk van a minőség beállítására (quality). Érdemes kipróbálni, mi az a legkisebb fájlméret, ami számunkra még elfogadható képminőséget ad. Ha ezt az arányt egyszer sikerült jó beállítanunk, utána következetesen alkalmazhatjuk a képeinkre.
3. Adjunk keresőbarát fájlnevet
A keresők szempontjából nem mindegy, hogyan nevezzük a képfájljainkat. Sokan elkövetik azt a hibát, hogy meghagyják a fotó eredeti, például csupa számból álló nevét. Ezzel szemben a jó fájlnév körülírja, hogy mi látható a képen. Minél direktebb módon tesszük ezt, annál jobban támogatjuk a keresők munkáját.
4. Ne feledjük az alt taget
Amikor egy képet feltöltünk a publikációs rendszerünkbe, többféle információt is megadhatunk róla. Ezek egyike az úgynevezett alt tag. Ez valójában egy leírás, ami akkor jelenik meg a weboldalon, ha a kép fölé húzzuk az egeret. Vagyis tájékoztatja a látogatóinkat, ráadásul – akárcsak a fent említett fájlnév – a keresők dolgát is segíti. Sőt, ha például egy rosszul látó vásárló olyan szoftvert használ, ami felolvassa neki a weboldal tartalmát, akkor az alt tag egy felolvasható szövegként működik.
A fájlnévhez hasonlóan az alt tag szövege is legyen leíró jellegű, egyszerű és lényegre törő. Ugyanakkor a részleteket nem célszerű kihagyni: a kockás ing helyett sokkal jobb a férfi kockás ing XL.
5. Küldjünk oldaltérképet a Google számára
Az oldaltérkép egy olyan szöveges fájl, amely bemutatja a webáruházunk struktúráját, oldalainak listáját. Ezzel nagyban megkönnyítjük a keresők számára az összes tartalmunk módszeres bebarangolását és indexelését. Az oldaltérkép alkalmas rá, hogy megkülönböztessük benne a képes és videós tartalmakat. Ha sok képünk van, akár ennek a tartalomtípusnak külön térképet is készíthetünk.
Ha az áruházunk WordPress alapokon működik, egy bővítmény telepítésével (ilyen például a Yoast SEO) egyszerűen generálhatunk oldaltérképet.
6. Optimalizáljuk a bélyegképeket is
Egy profi áruház az értékesítési folyamat végén további, kapcsolódó termékeket is a vásárló figyelmébe ajánl. Jellemzően ezeket az árucikkeket normál termékképeknél kisebb méretű bélyegképekkel jeleníti meg. Csupán ezért, mert ezek a szokásosnál kisebbek, még nem lehet eltekinteni az optimalizálásuktól. Egy ilyen bélyegkép ideális mérete 70 Kb alatt van. Ne feledjük: az összes többi, fentebb vázolt szempont ugyanúgy érvényes rájuk is, mint a nagyobb termékképekre.
7. Tegyünk különbséget a kép célja szerint
Egy webáruházban egyaránt akadnak egyszerűbb képek, amelyeknél teljes mértékben a technikai optimalizálásra fókuszálhatunk, és olyanok is, amelyeknél az elsődleges szempont az esztétika, a jó képminőség. Mielőtt belevágunk az összes kép finomhangolásába, célszerű meghatározni, hogy mi tartozik az egyik, és a mi a másik kategóriába.
8. Végezzünk A/B tesztet
Korábban többször is írtunk már arról, hogy az e-kereskedelemben mennyire fontos az A/B tesztelés, és ez bizony a képek esetében is így van. Néhány javasolt szempont, melyeket érdemes lehet megvizsgálni:
Mennyiség
Kevés vagy sok kép működik jobban egy-egy terméknél? Akár azt is tesztelhetjük, hány bélyegkép jelenjen meg egy termék alatt.
Méret kontra minőség
Ki lehet próbálni, hogy a lassabb betöltési idő mennyire befolyásolja a konverziót. Ha például drágább design termékeket árulunk, jobb minőségű és nagyobb képekre lesz szükségünk, ugyanakkor az ügyfelek ki fogják várni, amíg ezek betöltődnek.
Azt azonban sose feledjük, hogy az A/B teszt során egyszerre csak egy paramétert módosítsunk.
