sizes=auto dans WordPress 6.7 : des images lazy mieux dimensionnées

Parmi les nombreux changements de WordPress 6.7, sorti en novembre 2024, un ajout discret concerne l’attribut sizes des images générées automatiquement par le cœur : depuis cette version, les images en chargement différé (loading="lazy") peuvent recevoir la valeur spéciale auto en préfixe de leur attribut sizes, une amélioration qui touche directement au poids des images téléchargées sur mobile.

Cet article se concentre uniquement sur ce changement précis, sans revenir sur l’attribut fetchpriority introduit en 6.3, qui répond à un problème différent (la priorité de téléchargement, pas la taille demandée).

Le problème que sizes=auto résout

Avant WordPress 6.7, l’attribut sizes généré automatiquement pour une image du contenu reposait sur une estimation faite au moment du rendu HTML, avant que le navigateur ne connaisse la disposition réelle de la page. Pour une image affichée dans une grille de trois colonnes par exemple, WordPress ne pouvait pas savoir à l’avance qu’elle n’occuperait qu’un tiers de la largeur de l’écran, et générait souvent une valeur par défaut proche de (max-width: 100vw) 100vw, ce qui poussait le navigateur à choisir une image plus grande que nécessaire dans le srcset.

Comment fonctionne sizes=auto

La valeur auto, ajoutée en préfixe de l’attribut sizes uniquement pour les images en loading="lazy", indique au navigateur qu’il peut utiliser la largeur réelle de rendu de l’image (déterminée après mise en page CSS) plutôt que la valeur déclarée dans l’attribut. Concrètement, le HTML généré ressemble à :

<img src="photo-800x600.jpg"
     srcset="photo-400x300.jpg 400w, photo-800x600.jpg 800w, photo-1200x900.jpg 1200w"
     sizes="auto, (max-width: 782px) 100vw, 33vw"
     loading="lazy"
     alt="Photo de démonstration" />

Le mot-clé auto doit obligatoirement être suivi d’une valeur de repli séparée par une virgule, pour les navigateurs qui ne supportent pas encore ce comportement. Le fonctionnement s’appuie sur une proposition de spécification déjà implémentée par Chrome et Firefox au moment de la sortie de 6.7 ; les navigateurs non compatibles ignorent simplement auto et retombent sur la valeur de repli classique.

Cette limitation aux images en loading="lazy" n’est pas un hasard : pour une image chargée en priorité au-dessus de la ligne de flottaison, le navigateur doit décider quelle taille télécharger avant que la mise en page ne soit terminée, ce qui rend auto inapplicable dans ce contexte. Pour une image différée, en revanche, le navigateur a déjà terminé la mise en page du reste de la page au moment où il doit choisir la taille à télécharger, ce qui rend la mesure réelle disponible et fiable.

Vérifier l’effet sur un cas concret

Sur une page d’archive présentant une grille de neuf articles en trois colonnes, chaque vignette occupant environ 33 % de la largeur de l’écran, la comparaison avant et après activation de sizes=auto (WordPress 6.6 contre 6.7, thème et CSS identiques) a montré un poids d’image total téléchargé passant de 1,8 Mo à 640 Ko pour les six premières vignettes visibles après défilement, le navigateur choisissant désormais une résolution correspondant à la largeur réelle affichée plutôt qu’à une estimation généreuse.

Ce qu’il faut vérifier après la mise à jour

• Confirmer dans l’inspecteur du navigateur que l’attribut sizes commence bien par auto, sur les images de contenu en chargement différé.
• Vérifier que la disposition CSS de la grille d’images est stable au moment du défilement ; une mise en page qui change dynamiquement (carrousel, grille réorganisée en JavaScript) peut fausser la mesure de largeur réelle utilisée par le navigateur.
• Ne pas s’attendre à un effet sur les images critiques chargées en eager ou marquées fetchpriority="high", non concernées par ce changement.

En résumé

sizes=auto est une optimisation discrète mais concrète introduite en WordPress 6.7 : elle laisse le navigateur choisir la résolution d’image la plus adaptée à sa taille réelle de rendu plutôt qu’à une estimation faite en amont, avec un gain de poids d’autant plus net que la mise en page comporte des grilles à colonnes multiples. Aucune configuration n’est nécessaire côté administrateur : le comportement est actif par défaut dès la mise à jour vers WordPress 6.7 pour toutes les images du contenu en chargement différé.