Quelle taille doit faire une image mise en avant WordPress ?

Le nombre que la plupart des gens cherchent est 1200 x 630 pixels. C’est le ratio que Facebook, LinkedIn et X utilisent pour les aperçus de liens (1.91:1), et c’est ce que doit faire une image Open Graph. Si vous définissez une image mise en avant surtout pour que les liens partagés s’affichent correctement, utilisez 1200 x 630 et arrêtez-vous là.

Mais ce nombre n’est pas ce que votre thème affiche réellement sur l’article. WordPress montre rarement votre image mise en avant à sa taille d’origine. Le thème demande une taille d’image enregistrée précise, et WordPress sert le recadrage pré-généré qui correspond. C’est pourquoi une image qui rend parfaitement sur Facebook peut paraître floue, étirée ou mal recadrée à l’intérieur de votre template d’article. La « bonne » taille dépend du thème, pas d’une règle universelle.

Pourquoi le thème l’emporte sur le nombre

Quand vous téléversez une image, WordPress ne stocke pas un seul fichier. Il exécute wp_generate_attachment_metadata() et crée une déclinaison pour chaque taille d’image enregistrée : les trois tailles par défaut (thumbnail, medium, large), la taille medium_large de l’éditeur de blocs (768px de large), plus toute taille que le thème ou un plugin a enregistrée avec add_image_size().

Un thème qui veut une bannière large en 16:9 fera quelque chose comme ceci dans functions.php :

add_theme_support( 'post-thumbnails' );
add_image_size( 'hero-featured', 1200, 675, true );

Le quatrième argument, true, signifie recadrage strict (hard crop). WordPress va recadrer votre image à exactement 1200 x 675, en supprimant tout ce qui ne rentre pas dans le cadre 16:9. Si votre sujet est près du haut ou du bas de l’image, il sera coupé. Réglé sur false (ou omis), l’image est mise à l’échelle proportionnellement et les dimensions finales peuvent différer de ce que vous avez demandé.

Ensuite le template décide quelle taille récupérer :

the_post_thumbnail( 'hero-featured' );

Le nom passé à the_post_thumbnail() détermine le recadrage qui s’affiche. La véritable taille de l’image mise en avant sur votre site est donc définie à deux endroits que vous n’avez pas écrits : l’appel add_image_size() et l’appel the_post_thumbnail() dans le thème. Téléverser un fichier plus grand ne change ni l’un ni l’autre.

Il y a encore une couche. WordPress sert un srcset, donc sur les écrans plus petits le navigateur peut charger la déclinaison medium ou large au lieu du recadrage complet. La dimension que vous voyez dans les DevTools n’est souvent pas celle que vous avez téléversée.

Comment corriger le problème, dans l’ordre

1. Découvrez ce que votre thème demande réellement. Avant de deviner, examinez chaque taille que WordPress génère à partir de votre image et laquelle est la bannière recadrée. Déposez votre image dans l’outil de tailles d’images WordPress — il affiche chaque déclinaison que WP créerait, aux dimensions exactes en pixels, pour que vous puissiez adapter votre source à la vraie cible plutôt qu’au mythique 1200x630.

2. Téléversez assez grand pour couvrir le plus grand recadrage. Si la bannière du thème fait 1200 x 675, téléversez au moins cette taille, et idéalement 2x pour le retina (2400 x 1350). WordPress réduit proprement ; il n’agrandit jamais. Une source trop petite est la cause la plus fréquente d’une image mise en avant floue.

3. Faites correspondre votre ratio à celui du recadrage du thème. Si le thème recadre strictement en 16:9, fournissez-lui du 16:9. Composez avec le sujet centré pour qu’un recadrage strict ne décapite personne.

4. Si la taille enregistrée est mauvaise, changez-la et régénérez. Modifiez les valeurs add_image_size() dans un thème enfant, puis reconstruisez les miniatures existantes — les nouvelles dimensions ne s’appliquent qu’aux futurs téléversements tant que vous ne l’avez pas fait :

wp media regenerate --yes

Pas de WP-CLI ? Le plugin Regenerate Thumbnails fait la même chose depuis le tableau de bord.

Ce qu’il ne faut pas faire

Ne vous contentez pas de téléverser une image 1200x630 en supposant que c’est géré. Si la taille enregistrée du thème est en 16:9, WordPress recadre strictement votre image 1.91:1 et vous perdez le haut et le bas. Le nombre Open Graph et le nombre d’affichage sont deux tâches différentes.

Ne désactivez pas les tailles d’images de WordPress pour « garder l’original ». On trouve des conseils qui recommandent de régler les tailles intermédiaires sur 0 ou de désactiver the_post_thumbnail. Le thème se rabat alors sur le fichier pleine taille réduit dans le navigateur — un JPEG de 4000px envoyé sur un téléphone. Cela plombe votre temps de chargement et vos Core Web Vitals. Les déclinaisons existent pour une raison.

Ne faites pas confiance à la « taille recommandée » d’un plugin plutôt qu’à la taille réellement enregistrée par votre thème. Les plugins SEO recommandent 1200x630 pour la balise OG, ce qui est correct pour cette balise. Cela ne dit rien sur ce que votre template d’article recadre.

Ne sautez pas wp media regenerate après avoir changé les tailles. Modifier add_image_size() n’affecte en rien les images déjà téléversées. C’est l’étape que les gens oublient, avant de conclure que le code n’a pas fonctionné.

Toujours bloqué ?

Si l’image est toujours mauvaise après avoir adapté les dimensions et régénéré, le problème vient généralement du mode de recadrage (true vs false) ou d’un srcset qui sert une déclinaison plus petite que prévu. Déposez le fichier dans l’outil de tailles d’images pour voir exactement quels recadrages votre configuration produit, puis comparez avec ce que le navigateur charge dans les DevTools. Faites correspondre ces deux éléments et les devinettes cessent.