Corriger le Layout Shift causé par le redimensionnement automatique des images

Corriger le Layout Shift causé par le redimensionnement automatique des images

Il existe un modèle CSS courant qui détruira votre score de Cumulative Layout Shift avec une seule ligne de code. Je l'ai vu sur des dizaines de sites, et cela provoque un layout shift même lorsque vous avez explicitement défini la largeur et la hauteur de vos images. Même la définition de la propriété CSS aspect-ratio ne le corrigera pas.

Dernière révision par Arjen Karel en mars 2026

Le problème

Voici le CSS qui cause le problème. Il est couramment utilisé pour les images responsive :

<style>
img {
    width: auto;
    height: auto;
    max-width: 100%;
}
</style>

La déclaration width: auto est le problème. Elle remplace la largeur que le navigateur calcule à partir de vos attributs HTML width et height, ce qui signifie que le navigateur ne peut plus réserver d'espace pour l'image avant qu'elle ne se charge. L'image s'affiche à 0x0 pixels jusqu'à ce que le fichier soit téléchargé et décodé, puis s'ajuste à sa taille réelle. C'est votre layout shift.

Pourquoi cela se produit

Depuis 2019, les navigateurs modernes mappent les attributs HTML width et height à une indication de présentation interne aspect-ratio. Cette indication n'a aucune spécificité CSS. N'importe quelle règle CSS de l'auteur l'emporte, même un simple img { width: auto; }. Lorsque le CSS définit width: auto, le navigateur perd les informations dont il a besoin pour calculer la hauteur réservée à partir du ratio d'aspect. Les deux dimensions deviennent inconnues jusqu'à ce que l'image se charge.

C'est pourquoi la définition de aspect-ratio en CSS ne résout pas non plus le problème. Avec width: auto, le navigateur résout la largeur à 0 pour une image non chargée. Un ratio d'aspect calculé à partir d'une largeur de 0 produit toujours une hauteur de 0. La réservation d'espace ne fonctionne que lorsque le navigateur a au moins une dimension connue avec laquelle travailler.

C'est également sournois car cela ne provoque un layout shift que pour les nouveaux visiteurs. Si vous avez déjà l'image dans le cache de votre navigateur, les dimensions intrinsèques sont disponibles immédiatement et aucun décalage ne se produit. En tant que développeur, vous ne le verrez probablement jamais.

Comment nous l'avons trouvé

Ces problèmes sont presque impossibles à détecter lors des tests en laboratoire car Lighthouse s'exécute sur une machine rapide avec un cache chaud. La façon de les détecter est avec le Real User Monitoring. Le RUM suit les Core Web Vitals pour les vrais visiteurs sur de vrais appareils et vous rapporte les scores CLS réels, y compris les décalages qui ne se produisent que lors des premières visites sur des connexions lentes.

Le Web Almanac 2025 rapporte que 62 % des pages mobiles ont encore au moins une image non dimensionnée. Beaucoup d'entre elles sont causées par ce modèle CSS exact : le développeur a défini la largeur et la hauteur en HTML, mais une règle CSS globale les remplace par auto.

La solution

Supprimez width: auto. Conservez height: auto et max-width: 100%. C'est le modèle recommandé par web.dev pour les images responsive qui ne provoquent pas de layout shifts :

<style>
img {
    height: auto;
    max-width: 100%;
}
</style>

Avec ce CSS, le navigateur utilise l'attribut HTML width pour déterminer la largeur de l'image (plafonnée à 100 % du conteneur par max-width), et height: auto calcule la hauteur correcte à partir du ratio d'aspect. L'espace est réservé avant que l'image ne se charge. Pas de layout shift.

Assurez-vous que vos balises <img> incluent à la fois les attributs de largeur et de hauteur :

<img src="hero.jpg" width="800" height="450" alt="Description">

Rendez-vous service : faites un clic droit sur n'importe quelle image de votre site, choisissez "Inspecter l'élément", et vérifiez les styles calculés pour width: auto. Si vous le voyez, vous savez maintenant quoi faire.

Astuce : Pour plus de techniques d'optimisation d'images, voir comment optimiser les images pour les Core Web Vitals et comment corriger les images hero lentes.