# sizes=auto dans WordPress 6.7 : des images lazy mieux dimensionnées > Depuis WordPress 6.7, l'attribut sizes des images en chargement différé peut recevoir la valeur auto, avec un effet réel sur le poids téléchargé. Explication et vérification sur un cas concret. - Auteur : Clément Hadrot - Publié le : 2024-11-25 - Mis à jour le : 2024-11-25 - Catégorie : Performance - URL : https://wpmoderne.dev.wordpress-developpement.fr/performance/sizes-auto-wordpress-6-7-images-lazy-dimensionnees/ ## L’essentiel - sizes=auto s'appuie sur une proposition de spécification déjà supportée par Chrome et Firefox - Il ne s'applique qu'aux images en loading=lazy, jamais aux images critiques au-dessus de la ligne de flottaison - Le gain dépend directement de la précision de la disposition CSS de la grille d'images 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 > L'essentiel à retenir : sizes=auto s'appuie sur une proposition de spécification déjà supportée par Chrome et Firefox ; Il ne s'applique qu'aux images en loading=lazy, jamais aux images critiques au-dessus de la ligne de flottaison ; Le gain dépend directement de la précision de la disposition CSS de la grille d'images 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 à : ``` 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é.