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
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.
