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
ouwidth
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
etheight
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 CSSheight: 100px
etwidth: 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
Opquast start: descubre la calidad web
Opquast start es el primer módulo de la certificación Opquast. Solo te llevará una hora y te permitirá descubrir la gestión de la calidad web y nuestra plataforma de formación. Regístrate a continuación, recibe un enlace de activación por correo electrónico y tu acceso está abierto durante 15 días. El acceso a Opquast start es gratuito y sin compromiso.