Ez a cikk segíteni fog, ha

  • már van webáruházad, és a sebességtesztek szerint sok a nagyméretű kép,
  • nem tudod, hogy mivel lehetne tömegesen képeket átméretezni, optimalizálni,
  • még nincs webáruházad, de tervben van egy beindítása.

Miért fontos a képek mérete?

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.

Ha nagy képek vannak az oldaladon, brutálisan lassíthatják a betöltés sebességét – és az egészben a legrosszabb, hogy ezt nem fogod észrevenni. Ennek az oka, hogy a böngésződ elmenti a honlapod képeit, szerkezetét. Amikor felmész az oldalra, nem az internetről tölti be, hanem a gépedről. Ezért neked gyorsan fog bejönni. De az olvasódnak, aki először megy fel rá, lassan töltődik be.

Kép fájltí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. 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. 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épméretek. 

Mérés

Ha tudni akarod, milyen gyors az oldalad, menj a Google Sebességmérő Eszközére, és teszteld le a honlapod. Az eszköz ki fogja írni, hogy mekkorák a képeid. Ha ezek meghaladják a szükséges mértéket, akkor lassítják a honlapodat. Ebben az esetben az alábbi eszközök egyikével le kell kicsinyíteni a képeket.

Az ideális termékképek 

Az ideális képméret 150 KB alatt van. 

Offline Eszközök

Ha le kell méretezned a képet, ezekkel az eszközökkel tudsz dolgozni.

A fényképek leméretezésében ma is az Adobe Photoshop a király, ezen nincs mit ragozni. 

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 1500×1500 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. Illetve négyzet formátumba mentve ugyanazek az értékek érvényesek.

Mac / Apple számítógépekhez:

  • ImageOptim nagyon jól működik. Egyszerre több képet is le tudsz méretezni anélkül, hogy meg kellene nyitnod őket. 

Windows operációs rendszerhez:

Online programok

Ha azonban ingyenes (felhőalapú) megoldást keresel, akkor tapasztalataim szerint az Image Optim verhetetlen, és nagyon jól működik a Compressor nevű internetes alkalmazás is. online használhatod a JPEG MINI-t a PunyPNG-t vagy a Kraken-t.

 

A fényképek keresőoptimali­zálása

Ez a cikk segíteni fog, ha

  • még nincs webáruházad, és felkészült szeretnél lenni az indítás előtt,
  • SEO tesztek (vagy a rendszergazda) megmutatták, hogy a képeket optimalizálni kell.

A fényképek mérete önmagában fontos keresőoptimalizációs tényező. A nagy képek rontják az oldalad besorolását, a jó képek pedig javítják. Ezen kívül még az alábbi dolgokra figyelj oda.

Megfelelő ALT szövegek (meta szövegek)

A képekhez minél több szöveges leírást adj meg. A Google (többnyire) olyan, mintha vak lenne: nem látja a képeket, ezért rá kell írni, mi van a képeken. Ehhez használj minél több funkciót.

  • Fájlnév (file name). 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. Ahelyett, hogy DSC8374.JPG nevet adnál, legyen a képnek értelmes neve. Használj kis betűket, ékezetek nélkül. Ha két szóból áll a file neve, akkor rövid kötőjellel válaszd el a szavakat:

például tolgyfa-setapalca-ferfiaknak.jpg 

  • Alternatív szöveg (alternative text). A képekhez adj helyettesítő szöveget (angol kezelőfelületen ezt alt text-nek nevezik). 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

  • Cím (title). Hasonló kitöltése legyen, mint az Alt text.
  • Felirat (caption). Készíts feliratot a képhez. Ezt a látók is olvassák, és ezzel magyarázatot, kiegészítő megjegyzést tudsz adni a fényképhez. (Termékekhez nem kötelező, mert többnyire nem jelenik meg.) 
  • Leírás (description). Ezzel részletes leírást tudsz adni a képnek, ami nem jelenik meg a képernyőn, hanem a Google és a látássérültek olvassák. Lehet akár 2-3 mondat is, de mindenképpen hosszabb, mint az Alt és a Title.

például: „Egy palack BOCK Rosé Cuvée 2016 – könnyű rozé bor, nyári estékre

Mi van akkor, ha egy kép rossz fájlnévvel lett feltöltve?

Ha nincs sok ilyen és sokáig fent lesznek, akkor érdemes cserélni. Töröld a médiatárból, töltsd fel az újat jól, és végezd el a meta szövegek kitöltését.

Ha nagyon sok van, akkor rengeteg erőforrás lenne ezeket megcserélni, ezért hagy úgy. Elég a meta-szövegeket kitölteni, csak tudd, hogy nem lesz minden 100%-os. Lehetséges utólag is módosítani a fájlneveket, de ez informatikus beavatkozását igényli.

___

Források:

https://premiumhonlap.hu/honlapkeszites/kep-atmeretezese/

https://www.webaruhazkeszitesarak.hu/hir/webaruhaz-termek-kepeinek-optimalizalasa