# Images responsives dans un thème : add_image_size, srcset et attribut sizes

> Déclarer des tailles d'images cohérentes avec la grille du thème et filtrer wp_calculate_image_sizes pour un attribut sizes enfin juste.

- Auteur : Clément Hadrot
- Publié le : 2020-03-19
- Mis à jour le : 2020-03-19
- Catégorie : Thèmes
- URL : https://wpmoderne.dev.wordpress-developpement.fr/themes/images-responsives-theme/

## L’essentiel

- Des tailles nommées selon leur usage réel
- srcset généré automatiquement par WordPress
- sizes corrigé pour coller à la grille CSS

Un client se plaignait que les photos de son restaurant mettaient une éternité à s'afficher sur mobile, alors que le thème utilisait bien des images responsives. En inspectant le HTML généré, le problème est apparu tout de suite : l'attribut `sizes` annonçait une largeur de `100vw` sur une image qui, dans la grille du thème, ne dépassait jamais 400 pixels de large en réalité. Le navigateur téléchargeait donc systématiquement la variante la plus lourde du `srcset`.

Cet article détaille comment déclarer proprement des tailles d'image adaptées à un thème, laisser WordPress générer le `srcset`, puis corriger l'attribut `sizes` pour qu'il corresponde à la largeur réelle affichée par la grille CSS — pas à une estimation générique.

## Déclarer des tailles qui correspondent à des usages, pas à des pixels au hasard

La première erreur, très fréquente, consiste à ajouter des tailles d'image sans lien avec la mise en page réelle du thème. Mieux vaut nommer chaque taille d'après son usage :

```
function agence_setup_image_sizes() {
	add_image_size( 'card-thumbnail', 480, 320, true );
	add_image_size( 'hero-banner', 1600, 700, true );
	add_image_size( 'gallery-square', 600, 600, true );
}
add_action( 'after_setup_theme', 'agence_setup_image_sizes' );
```

Le dernier paramètre à `true` force un recadrage exact aux dimensions demandées, ce qui évite des ratios incohérents dans une grille de cartes où chaque vignette doit occuper le même espace. Pour des images qui doivent garder leur ratio d'origine, on laisse ce paramètre à `false` ou on ne précise que la largeur, en mettant la hauteur à `0`.

## Laisser WordPress construire le srcset automatiquement

> L'essentiel à retenir : Des tailles nommées selon leur usage réel ; srcset généré automatiquement par WordPress ; sizes corrigé pour coller à la grille CSS

Depuis WordPress 4.4, chaque appel à `the_post_thumbnail()` ou `wp_get_attachment_image()` génère automatiquement un attribut `srcset` à partir de toutes les tailles enregistrées pour ce fichier, sans code additionnel. Pas besoin de plugin : la fonction `wp_calculate_image_srcset()` s'en charge en arrière-plan, à condition que les tailles intermédiaires existent réellement pour l'image concernée.

Le piège classique arrive sur les images déjà présentes en médiathèque avant l'ajout d'une nouvelle taille : elles n'ont pas les fichiers correspondants tant qu'elles n'ont pas été régénérées. Pour un article ponctuel comme celui-ci, on peut se contenter de le savoir et de le signaler au client ; la régénération en masse est un sujet à part entière.

## Corriger l'attribut sizes pour qu'il dise la vérité

Par défaut, WordPress suppose que l'image occupe toute la largeur de la fenêtre et génère un `sizes` du type `(max-width: 480px) 100vw, 480px`. C'est une approximation correcte pour un article de blog en pleine largeur, mais fausse dès que l'image vit dans une grille à plusieurs colonnes. Le filtre `wp_calculate_image_sizes` permet de corriger cette valeur pour chaque contexte :

```
function agence_fix_card_sizes( $sizes, $size, $image_src, $image_meta, $attachment_id ) {
	if ( has_term( 'card-thumbnail', 'agence_usage', $attachment_id ) ) {
		return '(max-width: 600px) 45vw, (max-width: 1024px) 30vw, 380px';
	}
	return $sizes;
}
add_filter( 'wp_calculate_image_sizes', 'agence_fix_card_sizes', 10, 5 );
```

Dans la pratique, plutôt que de s'appuyer sur une taxonomie, on filtre souvent directement au niveau du gabarit qui appelle `wp_get_attachment_image()`, en passant un attribut `sizes` explicite en quatrième argument. C'est la méthode la plus fiable quand on connaît le contexte d'appel au moment où on écrit le template.

### Un exemple concret dans une boucle de cartes

- Sur mobile, trois cartes empilées : chaque image occupe environ 90 % de la largeur d'écran.
- À partir de 768 pixels, deux colonnes : l'image occupe environ 45 % de la largeur.
- À partir de 1024 pixels, trois colonnes fixes : l'image ne dépasse jamais 380 pixels.

Traduit en `sizes`, cela donne exactement la chaîne de l'exemple ci-dessus. Le navigateur choisit alors la variante du `srcset` la plus proche de cette largeur réelle, au lieu de télécharger systématiquement l'image la plus grande disponible.

## Vérifier le résultat sans deviner

Impossible de juger un `sizes` à l'œil : il faut ouvrir les outils de développement du navigateur, sélectionner l'image dans l'onglet Réseau et comparer la largeur affichée dans l'inspecteur avec le fichier réellement téléchargé. Sur le projet du restaurant, cette correction a fait passer le poids moyen des images de la page d'accueil de 380 Ko à 140 Ko sur mobile, sans toucher à un seul pixel de qualité visuelle.

> Un srcset correctement dimensionné ne sert à rien si le sizes ment sur la largeur réelle affichée : c'est ce couple qu'il faut valider ensemble, jamais l'un sans l'autre.

## En résumé

Déclarer des tailles nommées selon leur usage réel, laisser le cœur de WordPress générer le `srcset`, puis corriger l'attribut `sizes` avec le filtre `wp_calculate_image_sizes` : ces trois étapes suffisent, dans la grande majorité des thèmes, à obtenir des images vraiment responsives sans plugin ni service externe. La régénération des miniatures existantes et la question du format WebP restent des sujets à traiter séparément, une fois cette base posée.