Hogyan optimalizáljuk a képek betöltését egy weboldalon?

1. Sűrítés: Használjon eszközöket a képek méretének optimalizálására minőségromlás nélkül (pl. TinyPNG, Compressor.io).
2. Formátumok: Válasszon modern formátumokat, mint a WebP vagy AVIF, amelyek jobb tömörítést nyújtanak, mint a JPEG vagy PNG. Régebbi böngészőkhöz használja a <picture> vagy a srcset attribútumot fallbackként.
3. Lazy Loading: Halassza el a képek betöltését a látható területen kívül, amíg szükség nem lesz rájuk. Használja a natív loading="lazy" vagy JavaScript könyvtárakat.
4. Reszponzív képek: Szolgáltasson különböző verziókat a képekből különböző képernyőméretekhez és felbontásokhoz, a <picture> elem vagy a srcset/sizes attribútumok segítségével.
5. CDN (Content Delivery Network): Töltse fel a képeket CDN-re a gyorsabb tartalomkézbesítés érdekében a felhasználók legközelebbi helyéről.
6. Gyorsítótár: Állítson be megfelelő cache fejléceket a szerveren, hogy a böngésző tárolhassa a képeket, és a következő látogatáskor a helyi cache-ből töltse be őket.
7. Placeholder/Blurhash: Mutasson alacsony minőségű "placeholder"-t vagy generált Blurhash-t, amíg a teljes méretű kép betöltődik.

Példa a loading="lazy" használatára:

<img src="image.jpg" alt="Kép leírása" loading="lazy">

Példa a <picture> használatára különböző formátumokhoz:

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="Kép leírása">
</picture>