Képek optimalizálása a weboldalra – 12MB-ból 100kB

growthbox logo

Veled is megtörtént már, hogy megnyitottál egy weboldalt, és csak vártál… csak vártál… és vártál…, de nem igazán történt semmi?

Igen, a lassú betöltődés részben annak is köszönhető, hogy a képek optimalizálása egyáltalán nem, vagy nem megfelelően történt.

Miért fontos a képek optimalizálása?

Néhány évvel ezelőtt egy weboldal átlagos mérete 600–700 kB volt. Jelenleg az átlag 2 MB, és évről évre növekszik. Ha nem vigyázol, a képek akár a weboldalad teljes méretének a felét is kitehetik.

Lehet, hogy most azt gondolod, hogy „nekem mindegy, gyors netem van”, de a felhasználóidnak lehet, hogy nem. Sőt, a Google algoritmusa sem kedveli a lassú weboldalakat, ami kedvezőtlenül befolyásolhatja a weboldalad megjelenését a keresési találatok közt.

A weboldalon szereplő képek optimalizálása nagyban csökkentheti a weboldalad méretét, gyorsabb betöltődést eredményezve és megkíméli a felhasználókat a felesleges adatforgalomtól.

Képek optimalizálása lépésről lépésre

Az alábbiakban bemutatok 3 eszközt, amit én használok képek optimalizálására. Az eszközöket egyesével is használhatod, viszont, ha kombinálod őket, a végeredmény magáért fog beszélni.

Íme a kép, amit optimalizálni fogunk:

képek optimalizálása

A kép eredeti mérete 8000×4591 px és 12.6 MB.

A 8000×4591 pixeles felbontás hatalmas és teljesen felesleges webre. A leggyakoribb képernyő felbontás még mindig 1366×768 px, ezt követi a 1920×1080 pixeles felbontás. Ennél nagyobb felbontású monitorral csak a felhasználók elenyésző része rendelkezik. (1-2%).

Mint láthatod, teljesen felesleges ekkora képekkel dolgoznod, hiszen úgysem tudod teljes felbontásában megjeleníteni a 8000px-es képet egy 1920px-es monitoron, csupán a betöltési időt növeled a nagy képmérettel.

Bőven tökéletes, ha 1920px-re optimalizálod a képeidet, így a felhasználóid képernyőinek 99%-án tűéles képet kapsz, még akkor is, ha a képet teljes képernyőméretben szeretnéd megjeleníteni.

Na, de hogy is néz ki a képek optimalizálása a gyakorlatban?

Az alábbiakban 3 eszközt mutatok be, amivel a képeidet optimalizálhatod.

1. eszköz: ResizeImage.net

Az „Upload an image” gomb segítségével töltsd fel az átméretezni kívánt képet.

Ezt követően a 4. szekcióban állítsd be 1920px-re a képet, és az oldal alján katt a „Resize image” gombra.

Nézzük, mi történt a képünkkel, miután 1920 px-re méreteztük:

Igen, jól látod! 86%-kal csökkent a kép mérete. Gondolj csak bele, milyen hálásak lesznek a mobilnetes felhasználóid… 😉

2. Eszköz: CompressJPEG.com

Ez az eszköz nem méretezi át a képet, csupán tömöríteni fogja. Így az eredeti, jelen esetben 8000px-es felbontásban fog megjelenni a kép továbbra is.

Nagyon egyszerű a használata. Az „UPLOAD FILES” gombra kattintva válaszd ki a képet, amit tömöríteni szeretnél. A tömörítés automatikusan elindul, majd a tömörítés végeztével a „DOWNLOAD” gombra kattintva tudod letölteni a képet.

Több képet is tudsz tömöríteni egyszerre. Ebben az esetben a „DOWNLOAD ALL” gombra kattintva .zip formátumban tudod letölteni az összes képet.

Nézzük, mi történt a képünkkel a tömörítés során. A felbontás 8000×4591 px maradt, azonban a kép mérete 12.6 MB-ról 3.5 MB-ra csökkent.

A kép felbontása nem változott, csupán a kép mérete. Akár ezzel az eredménnyel is elégedettek lehetnénk, de ez a felbontás még mindig felesleges webre, és a kép mérete sem elfogadható, ha gyors weboldalt szeretnénk.

3. eszköz: TinyPNG

Ezzel az eszközzel a maximum 5 MB méretű képeket tudjuk tömöríteni.

Mivel az eredeti képünk 12 MB, ezért nem fogjuk tudni CSAK TinyPNG-vel tömöríteni.

Mi történik, ha mindhárom eszközt használjuk a megfelelő sorrendben?

Most figyelj, most jön a varázslat. Ha az eredeti 8000 px-es és 12 MB-os képet mindhárom eszközzel optimalizáljuk, hihetetlen eredményt kaphatunk:

  1. ResizeImage.net
  2. CompressJPEG
  3. TinyPNG

Nézzük meg a végeredményt: 1920×1102 pixeles képet kaptunk, mindössze 100 kB-os méretben.

Ez azt jelenti, hogy egy rendkívül jó minőségű képünk van az eredeti képméret 0,8%-ért.

Íme a tömörített képünk. Kattints csak rá, és nézd meg, hogy tűéles. Nyugodtan le is mentheted, hogy ellenőrizd a méreteket. 😄

Kép optimalizálás után

Most, hogy nyilvánvalóvá vált, hogy a képek optimalizálása mennyire fontos mind SEO, mind felhasználói élmény szempontjából, ideje, nekiláss a weboldalad képeinek optimalizálásához.

Ne feledd, nem minden felhasználónak van lehetősége nagy sebességű internetkapcsolatot használni, és a nagy méretű képekkel felhizlalt weboldal negatívan befolyásolja a Google találati listán elfoglalt helyezésed.

Ügyelj a képek felbontására, és méretezd át a stock fotókat, vagy a fényképezőgéppel készült képeket a megfelelő méretre.

Tetszett a cikk? Oszd meg Facebookon:

Facebook