Négy tipp a képek gyors betöltésére egy weboldalon

A képek tömörítése

  • Nem mindegy, mekkora a kép mérete, ezért mindenképp érdemes tömöríteni a képeket. Szinte nem is fogsz látni különbséget az eredeti és a tömörített kép között, azonban a tömörített kép mérete a töredéke lesz az eredetinek. Nagyon sok online elérhető képtömörítő létezik, teszteld le: https://tinyjpg.com/
  • A képtömörítéseket be lehet építeni a weboldalba, így neked nem lesz szükséged arra ,hogy a képeket feltöltés előtt mindig tömörítsd, a webfejlesztőd meg tudja oldani, hogy a feltöltött képek automatikusan tömörítve legyenek és ez a változat jelenjen meg a weboldalon.

A kép formátuma.

  • Mindenképp érdemes JPEG formátumú képeket használni, azonban érdemes fontolóra venni az olyan képformátumok is, mint a JPEG 2000, a JPEG XR és a WebP. Ezek gyakran jobb tömörítést nyújtanak, mint a PNG és a JPEG, azaz kevesebb adatforgalom mellett gyorsabb betöltődést biztosítanak.

A képek mérete, töréspontok

  • Az oldal mindig az adott eszköz kijelző méreteihez igazodva jelenjen meg, a képek pedig ennek megfelelően töltődjenek be. Semmi értelme ugyanazt a nagy méretű képet jeleníteni meg tablet vagy mobil eszközökön, hanem az eredeté kép kisebb és meg kisebb változatát a háttérben el kell készíteni, úgynevezett töréspontokat kell megadni és a kijelző méretéhez igazított képméretet kell mindig megjeleníteni. Például egy Full-HD képernyőn megjelenő 1920x1080-as teljes képernyős képet egy 360x640-es kijelzőjű mobiltelefonon értelmetlen megjeleníteni, helyette inkább egy mobilméretre vágott képnek kell megjelennie, amelynek a mérete a töredéke lesz csak a Full-HD képernyőn megjelenő képnek, azonban a látogató mégsem fog látni különbséget a kettő között. Ezeket a műveleteket egy webfejlesztő a háttérben teljesen automatizálni tudja.

"Lusta" képbetöltés

  • Egy weboldal felkeresésekor csak azokat a képeket töltse be a rendszer, amelyek láthatóak és amelyekre szükség van, a többit csak akkor, ha tovább görget a látogató, így sokkal gyorsabban töltődik be egy oldal. Ezt az úgynevezett "lazy load" funkciót is teljesen automatizálni lehet minden weboldal esetében.

Foglaljuk össze: Ha odafigyelünk a képek tömörítésére és a formátumukra, akkor máris az eredeti kép mérete a töredékére csökkenhet. Ez szintén csökkenthet, ha töréspontokat állítunk be és megadjuk, hogy a tömörített képnek például a kicsinyített mását jelenítse meg az oldal a kisebb kijelzőkön és ha a "lazy load"-ot is használjuk, akkor az is lehet, hogy be sem kell töltse egyből a képet, csak akkor, ha odagörget a látogató.

Barabás Csaba

Professzionális weboldalak, webáruházak, vállalatirányítási rendszerek egyedi fejlesztése és karbantartása.

Jelentkezz most ingyenes tanácsadásra