Webáruház termék képeinek optimalizálása

4

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.

Photoshop képbeállítások

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ő.

Photoshop mentés webre

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.

Photoshop kép méretezése

Ilyen lett a termékképünk »

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.

Photoshop kép beállítások

Ilyen lett a termékképünk »

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.

Ilyen lett a termékképünk »

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.

Photoshop menü

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.

Photoshop Batch conversion

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. 

Photoshop kép részletei

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.

Photoshop Batch conversion

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.

Vissza a listába!