Cum se optimizează încărcarea imaginilor pe o pagină web?

1. Compresie: Utilizați instrumente pentru a optimiza dimensiunea imaginilor fără a pierde calitatea (de exemplu, TinyPNG, Compressor.io).
2. Formate: Alegeți formate moderne precum WebP sau AVIF, care oferă o compresie mai bună comparativ cu JPEG și PNG. Pentru browserele mai vechi, utilizați <picture> sau atributul srcset pentru fallback.
3. Lazy Loading: Amânați încărcarea imaginilor din afara zonei vizibile până când sunt necesare. Folosiți loading="lazy" nativ sau biblioteci JavaScript.
4. Imagini responsive: Furnizați versiuni diferite ale imaginilor pentru diferite dimensiuni de ecran și rezoluții, utilizând elementul <picture> sau atributele srcset/sizes.
5. CDN (Content Delivery Network): Plasați imaginile pe un CDN pentru o livrare mai rapidă a conținutului către utilizatori din locația cea mai apropiată.
6. Caching: Configurați anteturi de cache adecvate pe server pentru ca browserul să poată păstra imaginile și să le încarce din cache-ul local la vizite ulterioare.
7. Placeholder/Blurhash: Afișați un "placeholder" de calitate scăzută sau un Blurhash generat în timp ce imaginea de dimensiune completă se încarcă.

Exemplu de utilizare a loading="lazy":

<img src="image.jpg" alt="Descrierea imaginii" loading="lazy">

Exemplu de utilizare a <picture> pentru diferite formate:

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="Descrierea imaginii">
</picture>