Ako optimalizovať načítanie obrázkov na webovej stránke?

1. Komprimácia: Použite nástroje na optimalizáciu veľkosti obrázkov bez straty kvality (napríklad TinyPNG, Compressor.io).
2. Formáty: Vyberte moderné formáty ako WebP alebo AVIF, ktoré ponúkajú lepšiu kompresiu v porovnaní s JPEG a PNG. Pre staršie prehliadače použite <picture> alebo atribút srcset ako fallback.
3. Lazy Loading: Odložte načítanie obrázkov mimo viditeľnej oblasti, kým nebudú potrebné. Použite natívne loading="lazy" alebo JavaScriptové knižnice.
4. Responzívne obrázky: Poskytnite rôzne verzie obrázkov pre rôzne veľkosti obrazovky a rozlíšenia pomocou <picture> alebo atribútov srcset/sizes.
5. CDN (Content Delivery Network): Umiestnite obrázky na CDN pre rýchlejšiu dodávku obsahu používateľom z najbližšej lokality.
6. Cache: Nakonfigurujte správne hlavičky cache na serveri, aby prehliadač mohol ukladať obrázky a načítavať ich z lokálnej cache pri opakovaných návštevách.
7. Placeholder/Blurhash: Zobrazte nízkokvalitný "placeholder" alebo generovaný Blurhash, zatiaľ čo sa načítava plnohodnotný obrázok.

Príklad použitia loading="lazy":

<img src="image.jpg" alt="Popis obrázka" loading="lazy">

Príklad použitia <picture> pre rôzne formáty:

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="Popis obrázka">
</picture>