web-dev-qa-db-fra.com

GTmetrix se plaint d'images non optimisées dans un design réactif

Le site Web GTmetrix me donne un faible score sur "Optimiser les images" pour la raison suivante:

Sur ma page principale, j'ai 4 colonnes avec des images. Chaque colonne prend 25% de la résolution de l’écran, donc sur mon moniteur 1920x1080px, chaque image a une largeur de 463px. Cependant, lorsque l'utilisateur consulte la page principale d'un appareil dont la résolution est comprise entre 600 et 1200 pixels, je ne montre que 2 colonnes au lieu de 4, ce qui élargit la largeur des images par rapport à 4 colonnes (lorsque la résolution est proche de 1200 pixels). Lorsque j'affiche 2 images sur une largeur de navigateur de 1199px, chaque image a une largeur de 576px. Maintenant, voici le problème.

Si je devais utiliser une taille d'image naturelle de 576 pixels, GTmetrix dirait "Optimiser les images suivantes pour réduire leur taille de X", car j'utiliserais une image naturelle de 576 pixels de largeur, mais lorsque j'ai 4 colonnes, la taille maximale dont j'avais besoin est 463px.

Si je devais avoir une image naturelle en 463 pixels, les images affichées lors de l’utilisation de 2 colonnes seraient étirées à 576 pixels, ce qui réduirait la qualité.

Maintenant, je ne sais pas comment satisfaire les deux côtés.

htmlcssimagesresponsive-webdesign
1
Bobimaru

Le meilleur moyen d'optimiser les performances de la page tout en fournissant des images haute résolution aux clients en haute résolution consiste à utiliser l'attribut HTML img srcset HTML, comme suit:

<img
 srcset="
  /img/image4x.jpg 4x,
  /img/image3x.jpg 3x,
  /img/image2x.jpg 2x,
  /img/image1x.jpg 1x"
 src="/img/image1x.jpg"
>

Dans cet exemple, les multiplicateurs les plus importants renvoient à des images 2x, 3x et 4x de la taille par défaut. Les navigateurs modernes sont suffisamment intelligents pour choisir automatiquement l'image la plus grande s'ils s'exécutent sur un écran haute résolution.

Vous pouvez même utiliser l'attribut sizes pour indiquer au navigateur quelle image est la meilleure pour différentes tailles d'écran.

Plus d'informations:

  1. https://html.com/attributes/img-srcset/
  2. https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
2
Maximillian Laumeister