Comment optimiser le chargement des images sur une page web?

1. Compression : Utilisez des outils pour optimiser la taille des images sans perte de qualité (par exemple, TinyPNG, Compressor.io).
2. Formats : Choisissez des formats modernes comme WebP ou AVIF, qui offrent une meilleure compression par rapport à JPEG et PNG. Pour les anciens navigateurs, utilisez <picture> ou l'attribut srcset pour le fallback.
3. Chargement différé : Différez le chargement des images hors de la vue jusqu'à ce qu'elles soient nécessaires. Utilisez loading="lazy" natif ou des bibliothèques JavaScript.
4. Images responsives : Fournissez différentes versions d'images pour différentes tailles d'écran et résolutions, en utilisant l'élément <picture> ou les attributs srcset/sizes.
5. CDN (Content Delivery Network) : Hébergez les images sur un CDN pour une livraison plus rapide du contenu aux utilisateurs depuis leur emplacement le plus proche.
6. Caching : Configurez des en-têtes de cache appropriés sur le serveur pour que le navigateur puisse stocker les images et les charger depuis le cache local lors de visites ultérieures.
7. Placeholder/Blurhash : Affichez un "placeholder" de faible qualité ou un Blurhash généré pendant le chargement de l'image en taille réelle.

Exemple d'utilisation de loading="lazy" :

<img src="image.jpg" alt="Description de l'image" loading="lazy">

Exemple d'utilisation de <picture> pour différents formats :

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="Description de l'image">
</picture>