Corriger le décalage de mise en page causé par le redimensionnement automatique des images

Corriger le décalage de mise en page causé par le redimensionnement automatique des images

Il existe un modèle CSS courant qui détruira votre score Cumulative Layout Shift avec une seule ligne de code. Je l'ai vu sur des dizaines de sites, et cela provoque un décalage de mise en page 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 résoudra pas le problème.

Cet article se concentre sur le problème CSS width: auto. Pour le guide complet sur toutes les causes de décalage de mise en page liés aux images et aux médias (vidéos, iframes, direction artistique, responsive images, lazy loading, placeholders), consultez Comment les images et les médias causent des décalages de mise en page.

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 réactives :

<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 passe brusquement à sa taille réelle. C'est votre décalage de mise en page.

Pourquoi cela se produit

Depuis 2019, les navigateurs modernes associent 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'au chargement de l'image.

C'est pourquoi définir 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 aussi sournois car cela ne provoque un décalage de mise en page 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. Vous, en tant que développeur, ne le verrez probablement jamais.

Comment nous l'avons trouvé

Ces problèmes sont presque impossibles à détecter lors de 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 de vrais visiteurs sur de vrais appareils et vous rapporte les scores réels de CLS, y compris les décalages qui ne se produisent que lors de la première visite 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.

Le correctif

Supprimez width: auto. Gardez height: auto et max-width: 100%. C'est le modèle recommandé par web.dev pour les images réactives qui ne causent pas de décalages de mise en page :

<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 le chargement de l'image. Aucun décalage de mise en page.

Assurez-vous que vos balises <img> incluent les deux attributs width et height :

<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, consultez comment optimiser les images pour les Core Web Vitals et comment corriger les images hero lentes.