Így méretezze át a képeit, hogy gyors legyen a weboldala

2021.04.20.

A weboldalán található információk közül leginkább a vizuális anyagok, mint a képek és a design, amelyek felkeltik az olvasói érdeklődését és képesek fenntartani is. Ha webshopot üzemeltet, akkor a képek azok, amelyek alapján az online vásárlás során a vásárló eldönti, megvegye-e a termékét vagy sem.  A képek képesek személyesebbé tenni a weboldalát és közelebb hozni az olvasót a témához és értékekhez, amiket képvisel.  Amikor elérhetőbbé szeretnénk tenni weboldalunkat olvasóink és vásárlóink számára, akkor azonban nemcsak az számít, amit a kép ábrázol, hanem az is, ami mögötte van: a szöveges leírások és a kép mérete

 

Ez a cikk segíteni fog, ha

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

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

A kép mérete minél kisebb, annál könnyebben tölthető be a weboldal olvasói számára. A weboldal betöltési sebességét a saját gépén nem tudja jól felmérni, ugyanis a böngészője elmenti a weboldala struktúráját és képeit, így az valójában nem is az internetről, hanem a gépéről töltődik be. 

Amikor valaki először nyitja meg az oldalát online, akkor mutatja a weboldal a valós betöltési sebességét – így ha nagyméretű képek lassítják az oldalát, a potenciális olvasói fogják először észrevenni.

Ha nagyméretű képei vannak a weboldalon, az számottevően lassítja a betöltési sebességet. A leendő vásárlói nagy része azonban nem fog 2-3 másodpercnél többet várni az oldal betöltésére. 

Tehát hiába rendelkezik a weboldala egységes, esztétikus dizájnnal, ha képei nagy mérete miatt az olvasó nem jut el odáig, hogy lássa őket. 

Hogyan mérje le a képeit? 

Ha tudni akarja, milyen gyors az oldala, menjen a Google Sebességmérő Eszközére, és tesztelje le a honlapját. Az eszköz ki fogja írni, hogy mekkorák a képei. Az ideális képméret 150 KB alatt van. Ha az Ön képei meghaladják a szükséges mértéket, akkor lassítják a honlapot.  A kép optimális méretet a fájformátum is befolyásolja, így érdemes erre is vetni egy pillantást, ha átméretezné a képeit.

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. 

 

Programok képátméretezéshez

Amennyiben a sebességmérő programja jelzi, hogy nagyméretű képei lassítják a weboldalát, az alábbi eszközök egyikével le tudja kicsinyíteni a képeket. A fényképek szerkesztésében, köztük az átméretezésben az Adobe Photoshop vezeti a ranglistát.  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. Egy webáruház képének nem szükséges 1500×1500 pixelnél nagyobbnak lennie. Általában az 1000-1200 pixeles szélesség, álló képek esetében pedig ugyanezt a magasság javasolt, hogy a kép minősége és a weboldal gyorsasága egyensúlyban legyen.

Ha offline megoldást keres,

  • FileOptimizer és a FastStone Photo Resizer programok is alkalmasak képei átméretezésére.

Ha online (felhőalapú) megoldást keres

  • Mac / Apple számítógépekhez, akkor az Image Optim verhetetlen, egyszerre több képet is le tud méretezni anélkül, hogy meg kellene nyitnia őket. 
  • A Photoshop-hoz nagyon hasonló működése van a Photopea webalkalmazásnak is, amely ingyenes, és a leggyakrabban használt Photoshop funkciók megtalálhatók benne.

Reméljük, ez a cikk segített a képátméretezés rejtelmeinek felfedezésében. Ha kérdése van, keressen minket bátran.    Sikeres üzletet!     ___ Források: https://premiumhonlap.hu/honlapkeszites/kep-atmeretezese/ https://www.webaruhazkeszitesarak.hu/hir/webaruhaz-termek-kepeinek-optimalizalasa https://zetra.hu/online-kepszerkeszto/