Partager

Approfondir

Qualité Web le livre

Livre Qualité Web

Acheter

114 - Les vignettes et aperçus ne sont pas des images de taille supérieure redimensionnées côté client.

Objectif
  • Diminuer la quantité de données à télécharger.
  • Améliorer la vitesse d’affichage de la page.
  • Diminuer l'impact énergétique lié à la consultation du site.
Mise en œuvre

Utiliser, pour les vignettes de prévisualisation d'images, des versions spécifiques de celles-ci et non les images originales redimensionnées via leurs attributs HTML ou leurs propriétés CSS.

Contrôle

Pour toutes les images HTML présentes dans le code source ou générées via javascript :

  • Vérifier qu'elles ne sont pas dotées de propriétés CSS height ou width qui modifient la taille apparente des images par rapport à leurs dimensions réelles. Pour cela, utiliser désactiver tous les styles CSS à l'aide d'un outil de développement web pour repérer les images dont les dimensions changent après désactivation des styles CSS.
  • Contrôler également que les dimensions indiquées dans les attributs width et height du code HTML généré correspondent aux dimensions réelles de l'image à l'aide d'un outils de développement.

Par exemple, on invalidera donc :

  • Une image du type <img height="300" width="600" class="thumb"/> si la classe .thumb impose les propriétés CSS height: 100px et width: auto.
  • Une image du type <img height="100" width="200"/> si les dimensions réelles de l'image sont 300 px de haut et 600 px de large.

Découvrez la certification Opquast

Rejoignez la communauté des certifiés Opquast. Plus de 5000 professionnels formés à la qualité Web. Au programme une formation en ligne de 14h, un examen de 1h30, un badge et un score à mettre sur votre cv et votre profil linkedin.

Commander en ligne