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.

Auteur Opquast - Consulter la licence

Découvrez la certification Opquast

• Une formation et une certification 100% en ligne
• 14 heures en ligne en autonomie, disponible 24h/24, 7j/7
• guide de 200 pages, des quiz, un glossaire, des examens blancs, des articles des videos
• Pour tous les professionnels du Web : marketing, commerciaux, UX, chefs de projet, designers, développeurs, ingénieurs informatiques.
• Une approche multidisciplinaire : SEO, accessibilité, sécurité, écoconception… pour tous les professionnels, débutants comme confirmés.

Module de sensibilisation
Inscription gratuite