Webáruház termék képeinek optimalizálása
Egy kép többet ér ezer szónál. Mivel a látogatók nem tudják kézbe venni és megvizsgálni a termékeinket, ezért nagyon fontos, hogy jó minőségű képekkel tudjuk bemutatni a termékeinket. A jó termékbemutató képeknek nem csak vásárlásösztönző szerepük van, hanem a Google keresőoptimalizálásunkat is nagyban segíteni fogják.
Fontos, hogy megtaláljuk a megfelelő egyensúlyt és végeredményben jó minőségű, de optimális méretű termékképeket tudjunk feltölteni a webáruházunkba.
Ez a cikk segíteni fog, ha
- már van webáruháza, de szenved a nagyméretű képekkel,
- nem tudja, hogy mivel lehetne tömegesen képeket átméretezni, optimalizálni,
- még nincs webáruháza, de tervben van egy beindítása,
- seo tesztek megmutatták, hogy a képeket optimalizálni kell.
Kép fájl típusok
Két fő képfájl típusra fogunk fókuszálni, amiket általában a termékképek megjelenítésére a weben használunk: JPG és PNG. Röviden a két fájltípus erősségei és gyengeségei.
JPG (más néven JPEG) a legnépszerűbb kép fájltípus az interneten. JPG tökéletes formátuma a fényképeknek és a sok színt, árnyékot, színátmenetet, összetett mintákat tartalmazó képeknek. JPG elmenthető kiváló- és alacsony minőségben is. Képméretező programokban könnyen paraméterezhető, így megtalálhatjuk az arany középutat a minőség és a fájlméret között.
PNG az egyik legelterjedtebb formátum a JPG mellett. Előnye, hogy veszteségmentes és viszonylag jó tömörítési hatásfokkal dolgozik. Hátránya, hogy a jpg-hez képest sokkal nagyobbak a kép méretek. Az Adobe Photoshop programban, lehetőség van PNG-8 vagy PNG-24 formátum mentésére. A PNG-8 csak 256 színnel dolgozik, így a kép mérete kisebb lesz. A PNG-24 egy sokkal jobb minőségű képet, de emellett nagyobb fájlméretet eredményez. A PNG legfontosabb tulajdonsága, hogy kezelni tudja az átlátszóságot, így a termékképeink mögé könnyen tudunk más hátteret varázsolni.
Az ideális termékképek mentése
A nagy képek betöltéséhez idő kell, amit egy vásárló nem fog kivárni a mi kedvünkért, még akkor sem, ha hiper-szuper minőségű képeket mutatunk neki. A leendő vásárlóink 47% -a elvárja egy weboldalnál, hogy 2 másodperc alatt betöltődjön. 40%-a leendő vásárlóinknak elhagyja az oldalt, amelynek betöltése tovább tart, mint 3 másodperc, ezért nagyon fontos, hogy a képek megfelelő méretűek legyenek.
Négy hasznos dolog, hogy a termékképeink megfelelően optimalizáltak legyenek:
1. Megfelelő méretű (szélesség, magasság) kép mentése
Nyissuk meg Photoshopban a képet, majd a Kép > Képméret menüre kattintva állíthatjuk be a kívánt képméretet. Több éves tapasztalat mondatja, hogy egy webáruház képének csak nagyon ritka esetben kell 1500x1500 pixelnél nagyobbnak lennie. Általában az 1000-1200 pixeles szélességet, álló képek esetében pedig ugyanezt a magasságot szoktuk javasolni.
2. Mentés webre Photoshop beállítás
Egyszerű módja a kép optimalizált mentésének, ha a Mentés webre Photoshop kép mentést használjuk. A kép megnyitása után menjünk a Fájl > Mentés webre menüpontra. Egy ablak jelenik meg, amely lehetővé teszi, hogy kiválasszuk a kép minőségét. A minőséget 60% körülire állítva a kép méretén jelentősen tömöríthetünk úgy, hogy a kép minőségének romlása nem vagy alig érzékelhető.
3. Online képméretező program használata
Számos képtömörítési alkalmazás van, amivel egyszerűen csökkenthetjük a képeink méretét. Ezek az eszközök gyors és egyszerű megoldást kínálnak a képméret csökkentésére, szintén a Photoshophoz hasonlóan a kép minőségének szemmel látható romlása nélkül.
Ilyen programok:
4. Offline ingyenes képméretező program használata
Ingyenesen letölthető programokat is használhatunk a képek átméretezésére.
Ilyen programok:
Nézzünk egy konkrét példát egy kép optimalizálására Photoshopban
Papagáj webshopunkba fotóztunk szép képeket, amikkel szeretnénk „termékeinket” bemutatni. Van egy olyan képünk, ami ~7MB méretű és 4288x2848 pixelű, tehát nagyon nagy ahhoz, hogy optimális böngészési élményt nyújtson vásárlóinknak.
Az eredeti kép megnyitása új abakban »
Emlékeztetőül, amit tennünk kell az optimális képméretért:
- csökkentsük a kép szélességét és magasságát
- csökkentsük a fájl méret a minőség csökkentésével mentés előtt
- mentsük jpg formátumba
Kép szélesség és magasság beállítása
Állítsuk be a javasolt 1200 pixel szélességet a Photoshopban. Ezzel a kép átméretezéssel már nagyon sokat nyertünk, a 7MB-os képünk mérete már csak 900Kbyte, így majdnem tizedére csökkentettük termékképünk méretét.
Kép minőségének csökkentése mentés előtt és jpg formátumban való elmentése
60%-ra állítva a minőséget jpg formátumban a kép mérete már csak 200Kbyte. Ezzel a három beállítással az eredeti kép méretének 3%-ára sikerült a képünket méretezni, lényegében szabad szemmel látható minőség romlás nélkül.
Ha ezt a 60%-os beállítást kevésnek érezzük, akkor 80%-ra állítva már tényleg nem fogunk tudni belekötni a képbe és így is a kép mérete 400Kbyte lesz. Még ez is bőven az elfogadható méret.
Képek tömeges átméretezése az irfanView program segítségével
Az irfanView program segítségével több képet is átméretezhetünk egyszerre, így nem kell egyesével méretezni a képeinket, hanem több száz képet méretezhetünk át néhány perc alatt. A program innen tölthető le: www.irfanview.com
Röviden egy csoportos átméretezés folyamata
A Fájl menüben válasszuk a Batch Conversion/Rename menüpontot.
A felugró ablak jobb oldali részén válasszuk ki az átméretezni kívánt képet/képeket. CTRL gomb nyomvatartásával és egérrel kattintva a képekre többet is kiválaszthatunk egyszerre. Pipáljuk be a Use advanced options pontot, itt fogjuk tudni állítani, hogy milyen méretre szeretnénk konvertálni a képeinket. A kiválasztott képeket az Add gombra kattintva, vagy egérrel a képek alatti üres részbe áthúzva tudjuk hozzáadni a konvertálási folyamathoz.
A felugró ablakban ha fekvő képekről van szó, akkor állítsuk be a kívánt méretet, mondjuk legyen az 1200 pixel. Értelemszerűen ha álló képeket méretezünk, akkor a Height legyen 1000-1200 pixelre állítva és a másik üresen. Arányt tartva fog a program méretezni.
Az Outpu directory for result files mutatja, hogy hova fognak kerülni az átméretezett képeink, ezt szabadon átállíthatjuk. Fontos, hogy a konvertálás előtt mindig legyen biztonsági mentésünk a képeinkről, amiket nem szerkesztünk. A Start Batch gomb megnyomásával indul el az átméretezési folyamat.
Az átméretezett képeket már csak fel kell töltsük a webáruházunkba.
Összegezve: Volt egy nagyméretű termékfotónk, amit nem tudtunk felrakni a webáruházunkba, mert elriasztotta a látogatókat, nagy visszafordulási arányt eredményezett. Azonban néhány egyszerű lépésben csökkentettük a termékkép méretét, így végeredményül kaptunk egy kisebb méretű, jó minőségű termékfotót, amit már fel tudunk tölteni a webáruházunkba.