Comment faire en sorte que l'image se charge en taille réduite sur les appareils mobiles?

Pour charger des images en taille réduite sur les appareils mobiles, utilisez des images adaptatives avec HTML et CSS :

1. Utilisez l'élément <img> avec les attributs srcset et sizes, pour que le navigateur choisisse la taille d'image appropriée en fonction de la taille de l'écran :

<img src="image-large.jpg"
     srcset="image-small.jpg 480w, image-medium.jpg 800w, image-large.jpg 1200w"
     sizes="(max-width: 600px) 480px, (max-width: 900px) 800px, 1200px"
     alt="Description de l'image">

2. Utilisez CSS pour limiter la largeur maximale de l'image :

img {
  max-width: 100%;
  height: auto;
}

3. Vous pouvez également utiliser des formats modernes d'images (WebP, AVIF) pour réduire la taille des fichiers.

Ainsi, le navigateur sur un appareil mobile téléchargera le fichier de taille optimale, ce qui améliorera la performance et réduira le trafic.