« La page se décale au chargement, l’image pousse le texte vers le bas. » Ce symptôme classique, mesuré par l’indicateur Cumulative Layout Shift (CLS) des Core Web Vitals, provient presque toujours de la même cause : le navigateur ne connaît pas les dimensions de l’image avant qu’elle ne finisse de se charger, et doit donc réajuster la mise en page une fois l’information disponible.
Pendant des années, la solution consistait à calculer un ratio en JavaScript ou à simuler l’espace réservé avec un padding-top exprimé en pourcentage, une astuce peu lisible. La propriété CSS aspect-ratio, aujourd’hui prise en charge par les principaux navigateurs, permet de réserver cet espace en une seule ligne native, sans script.
Le problème concret
Sur une page d’articles WordPress avec des images à la une de tailles variables, le code HTML généré ressemble typiquement à ceci, sans dimension fixe précisée :
<img src="/images/article-42.jpg" alt="Illustration de l'article" />Sans largeur ni hauteur connues à l’avance, le navigateur affiche d’abord un espace de hauteur nulle, puis redimensionne brutalement la page une fois l’image téléchargée et ses dimensions réelles connues. Ce réajustement est précisément ce que mesure le CLS, et chaque décalage brusque pénalise ce score.
La solution avec aspect-ratio
La propriété aspect-ratio permet de définir un ratio largeur/hauteur directement en CSS, indépendamment des dimensions réelles du fichier image :
img.image-a-la-une {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}Avec cette règle, le navigateur réserve immédiatement l’espace correspondant au ratio 16/9 dès qu’il connaît la largeur disponible, sans attendre le téléchargement de l’image. La propriété object-fit: cover garantit que l’image remplit cet espace sans déformation, quitte à recadrer légèrement les bords.
Comparaison avec les anciennes méthodes
| Méthode | Principe | Limite |
|---|---|---|
| padding-top en pourcentage | Réserve un espace via un calcul indirect sur un conteneur positionné | Code peu lisible, nécessite un conteneur supplémentaire |
| Script JavaScript de mesure | Calcule le ratio après lecture des dimensions naturelles de l’image | Dépend du JavaScript, s’exécute après le premier rendu |
| aspect-ratio natif | Réserve l’espace directement en CSS, avant tout chargement | Nécessite de connaître ou choisir un ratio cohérent |
Combiner aspect-ratio avec width et height HTML
Depuis que les navigateurs calculent eux-mêmes un ratio par défaut à partir des attributs width et height posés directement dans la balise <img>, une question revient souvent : faut-il encore utiliser aspect-ratio en CSS si ces attributs sont déjà renseignés ? La réponse dépend du contexte : les attributs HTML fixent un ratio unique, quelle que soit la largeur réelle d’affichage, alors que la propriété CSS permet d’imposer un ratio différent selon la mise en page responsive, par exemple un format plus carré sur mobile et plus large sur ordinateur.
@media (max-width: 600px) {
img.image-a-la-une {
aspect-ratio: 1 / 1;
}
}Combiner les deux approches — attributs HTML pour un ratio de repli universel, propriété CSS pour l’ajustement responsive — reste la méthode la plus robuste sur un thème qui gère plusieurs formats d’affichage.
Adapter le ratio selon le contexte
aspect-ratio: 16 / 9pour les images à la une en pleine largeuraspect-ratio: 1 / 1pour des vignettes carrées d’archive ou de grilleaspect-ratio: 4 / 3pour des illustrations plus classiques de contenu éditorial
Le choix du ratio doit rester cohérent avec le recadrage réellement appliqué aux images en amont, sous peine de perdre des éléments importants du cadrage avec object-fit: cover.
Une habitude prise sur nos projets récents : définir aspect-ratio directement dans la feuille de styles du thème, pour chaque emplacement d’image récurrent, plutôt que de le recalculer image par image.
En résumé
La propriété aspect-ratio remplace en une seule ligne des méthodes plus lourdes qui nécessitaient soit un calcul JavaScript exécuté après le premier rendu, soit un conteneur supplémentaire en CSS. Sur un thème WordPress qui affiche de nombreuses images à la une, cette propriété réduit directement le score de Cumulative Layout Shift, sans dépendance à un script externe.
