Lighthouse : "Utiliser une largeur et une hauteur explicites pour les éléments d'image"

Lighthouse, l'outil de Google dédié à l'analyse des pages web, offre des recommandations pour optimiser la performance, l'accessibilité et le SEO des sites. Depuis la version 6.4, une nouvelle recommandation a été introduite : "Définir des dimensions explicites pour les éléments d'image". Cette suggestion peut sembler contraire aux principes du design responsive, mais elle vise à améliorer les performances et l'expérience utilisateur.

Le Cumulative Layout Shift (CLS) est justement la métrique qui quantifie ce phénomène : c'est l'un des trois Core Web Vitals de Google, qui mesure les décalages inattendus de contenu pendant le chargement d'une page. Un score inférieur à 0,1 est considéré comme bon ; au-delà de 0,25, il est jugé mauvais.

Les images sans dimensions définies en sont l'une des causes les plus fréquentes. En l'absence de dimensions définies pour les images, des décalages de contenu peuvent survenir, provoquant une réorganisation inattendue des éléments lors du chargement de la page. Cela affecte non seulement la performance globale, mais aussi la lisibilité et la stabilité visuelle de la page.

Cependant, spécifier des dimensions fixes pour les images peut entraîner des problèmes esthétiques, comme des images déformées ou mal ajustées, surtout dans un contexte de design responsive. Il est donc crucial de trouver un équilibre permettant de définir des dimensions explicites tout en garantissant une adaptation correcte des images sur tous les types d’appareils.

Solution

1. Ajouter les attributs width et height: Pour chaque balise img, assurez-vous de spécifier les attributswidth et height.
2. Utiliser des outils pour déterminer les dimensions : Servez-vous d’outils comme les inspecteurs de navigateur ou des logiciels de traitement d’image pour déterminer les dimensions exactes : Pour l'attribut width, indiquez la taille maximale possible de l'image en fonction des appareils sur lesquels elle sera affichée. Cela évitera que l'image ne soit trop petite, ce qui pourrait nuire à l'expérience utilisateur en la rendant peu lisible ou déformée.
3. Utiliser du CSS pour la réactivité : Employez des classes CSS pour assurer la réactivité de l'image si nécessaire.

<img src="chemin/vers/image.jpg" width="300" height="200">


<style>
.responsive-image {
   height: auto;
   max-width: 100%;
}
</style>

En appliquant ces étapes, vous optimiserez à la fois la performance et l’affichage des images sur votre site web, assurant ainsi une expérience utilisateur fluide et cohérente.

Petit complément

Définir des dimensions explicites (pour éviter le décalage de contenu) et rendre une image réactive (pour servir la bonne résolution selon l'appareil) sont deux choses différentes. La méthode width/height + CSS ci-dessus règle le premier problème. Pour le second, on peut ajouter srcset et sizes, qui laissent le navigateur choisir le fichier le plus adapté à la taille d'écran :

<img
  src="image-800.jpg"
  srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 50vw"
  width="1200" height="800"
  class="responsive-image"
>

On peut aussi, si besoin, remplacer width/height par la propriété CSS aspect-ratio, qui fixe le ratio directement en CSS plutôt que dans le HTML, pratique pour les images en arrière-plan :

.responsive-image { 
  width: 100%; 
  aspect-ratio: 3 / 2; 
}