A weboldaladon a vizuális elemek – elsősorban a képek és a design – azok, amelyek leginkább felkeltik és fenntartják az olvasók érdeklődését. Ha webshopot üzemeltetsz, akkor a termékképek döntő szerepet játszanak: ezek alapján dönti el a vásárló, hogy megveszi-e a terméket vagy sem. A jó képek személyesebbé teszik az oldaladat, és közelebb hozzák az olvasót a témához, valamint azokhoz az értékekhez, amiket képviselsz.

Ha elérhetőbbé és barátságosabbá szeretnéd tenni a weboldaladat az olvasóid és vásárlóid számára, akkor nem csak az számít, mit ábrázol a kép, hanem az is, ami „mögötte van”: a szöveges leírások (alt szöveg) és a kép fájlmérete.

Ez a cikk neked szól, ha

• már van webáruházad, és a sebességtesztek szerint sok a túlméretezett kép,
• nem tudod, mivel lehetne tömegesen képeket átméretezni és optimalizálni,
• még nincs webshopod, de tervezed a létrehozását.

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

Minél kisebb a kép fájlmérete, annál gyorsabban töltődik be az oldalad a látogatók számára. A saját gépeden nem tudod pontosan lemérni a betöltési sebességet, mert a böngésző cache-eli a képeket és az oldal struktúráját – így nálad gyakorlatilag a saját merevlemezről töltődik be minden.

Amikor valaki először látogat el az oldaladra, akkor tapasztalja meg a valódi betöltési időt. Ha nagy képek lassítják az oldalt, ő fogja először észrevenni. A potenciális vásárlók többsége nem vár 2-3 másodpercnél többet – ha lassú az oldal, egyszerűen továbbállnak.

Tehát hiába gyönyörű és egységes a designod, ha a látogató nem jut el odáig, hogy egyáltalán lássa, mert a nagy képek miatt már elnavigált máshová.

Hogyan mérheted le a képeidet?

Ha kíváncsi vagy az oldalad sebességére, használd a Google PageSpeed Insights eszközt. Az elemzés megmutatja, mennyire nagyok a képeid. Az ideális fájlméret általában 150 KB alatt van képenként. Ha nálad ennél nagyobbak, akkor biztosan lassítják az oldalt.

A megfelelő méretet a fájlformátum is befolyásolja, ezért érdemes ezzel is foglalkozni az optimalizálás során.

Képfájl-típusok

Két fő formátumra koncentrálunk, amelyeket általában termékképekhez használnak a weben: JPG és PNG.

• JPG (JPEG) a legnépszerűbb formátum az interneten. Tökéletes választás fényképekhez, sok színt, árnyalatot, színátmenetet vagy összetett mintákat tartalmazó képekhez. Beállítható magas vagy alacsony minőségben is, így könnyen megtalálhatod a minőség és a fájlméret közötti legjobb egyensúlyt.
• PNG a másik elterjedt formátum. Legnagyobb előnye az átlátszóság (transzparencia) támogatása, így könnyen cserélheted a termékképek hátterét. Veszteségmentes tömörítést használ, jó hatásfokkal, de hátránya, hogy általában nagyobb fájlméretet eredményez, mint a JPG.

Programok és eszközök képátméretezéshez és optimalizáláshoz

Ha a sebességteszt jelzi, hogy a képek okozzák a lassulást, az alábbi eszközökkel könnyen csökkentheted a méretüket.

Professzionális megoldás: Az Adobe Photoshop a legjobb választás komolyabb képszerkesztéshez. Nyisd meg a képet, majd Kép → Képméret menüben állítsd be a kívánt felbontást. Webáruházban általában nincs szükség 1500×1500 pixelnél nagyobb képre – 1000–1200 pixel szélesség (vagy magasság álló képeknél) tökéletes egyensúlyt teremt a minőség és a sebesség között.

Ingyenes offline eszközök:

• FileOptimizer
• FastStone Photo Resizer

Ingyenes online/felhőalapú eszközök:

• ImageOptim (különösen Mac/Apple felhasználóknak – egyszerre több képet is optimalizál)
• Compressor.io
• JPEGmini
• TinyPNG / TinyJPG
• Kraken.io
• PunyPNG
• Photopea (ingyenes, böngészőben futó Photoshop-szerű szerkesztő, szinte minden fontos funkcióval)

Reméljük, ez a cikk segített eligazodni a képátméretezés és optimalizálás világában. Ha kérdésed van, keress minket bátran!

Sikeres és gyors webshopot kívánunk!

Források: https://premiumhonlap.hu/honlapkeszites/kep-atmeretezese/ https://www.webaruhazkeszitesarak.hu/hir/webaruhaz-termek-kepeinek-optimalizalasa https://zetra.hu/online-kepszerkeszto/