Échec de la connexion. Veuillez réessayer.

Aller au contenu
SEO Tools
Aide et documentation
Vitesse Impact moyen Facile 5 à 15 minutes

Dimensions de l'image (largeur/hauteur)

Sans dimensions d'image, la mise en page saute (CLS).

Ce que c’est

Lorsqu'un <img> n'a ni largeur ni hauteur spécifiées, le navigateur ne sait pas combien d'espace l'image prendra jusqu'à son chargement — et une fois qu'elle arrive, le contenu « saute ». Ceci est mesuré par la métrique CLS (Cumulative Layout Shift).

Pourquoi c’est important

Le saut de mise en page est frustrant (l'utilisateur clique sur quelque chose d'autre que prévu) et Google le pénalise via CLS dans Core Web Vitals.

Comment faire

  1. 1Spécifiez la largeur et la hauteur de tous les éléments <img> (le navigateur calcule le rapport hauteur/largeur à partir d'eux).
  2. 2Vous pouvez également réserver de l'espace via le format d'image en CSS.
  3. 3Il en va de même pour les intégrations et les publicités : réservez-leur de l'espace.

Exemple

Incorrect
<img src="photo.webp" alt="...">
Correct
<img src="photo.webp" alt="..." width="800" height="600">

Conclusion

L'ajout de dimensions d'image est une tâche de cinq minutes avec un impact direct sur CLS, l'un des Core Web Vitals. Combinez-le avec un chargement paresseux et des formats modernes. Réservez également de l'espace pour les intégrations et les publicités, afin que rien ne saute.

Sujets liés