A képeidet is optimalizálnod kell

A képeidet is optimalizálnod kell
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  - írja a kosarertek.hu.

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.  A teljes cikk itt érhető el.

Kövesd az oldalunkat a Facebook-on és a Twitteren is!





Címkék: E-kereskedelem