Taille d'image mise en avant WordPress : 1200×630 + la vôtre

Réponse courte : si vous ne connaissez pas encore la taille de votre thème, utilisez 1200 x 630 pixels (environ 1,91:1). C’est la taille d’aperçu de lien que Facebook recommande, et les extensions SEO utilisent en général l’image mise en avant comme image de partage.

Dans l’article lui-même, la taille qui compte est celle que votre thème affiche. WordPress enregistre chaque fichier envoyé en plusieurs tailles, et le thème choisit celle qui apparaît. Les thèmes classiques la définissent avec set_post_thumbnail_size() ou add_image_size(), les thèmes blocs dans le bloc Image mise en avant. Si le thème recadre en 16:9 ou en carré, une image en 1200 x 630 peut perdre une partie de ses bords gauche et droit. Trouvez la taille de votre thème (quatre méthodes plus bas), puis envoyez une image au moins aussi grande, ou environ deux fois plus large pour un rendu net sur les écrans haute densité.

Pour voir toutes les tailles que WordPress va créer à partir d’une image précise, déposez-la dans l’outil des tailles d’image WordPress.

Quelle taille utiliser selon l’endroit où l’image apparaît

Où l’image apparaît	Taille à envoyer	Remarques
Vos articles, taille du thème encore inconnue	1200 x 630, ou 2400 x 1260 pour un rendu plus net	Convient aussi aux aperçus de liens le temps de trouver la taille de votre thème
Vos articles, taille du thème connue	Environ deux fois la largeur de l’image mise en avant de votre thème, au même ratio	WordPress crée des copies plus petites d’un fichier envoyé, jamais de plus grandes
Aperçus de liens Facebook	Au moins 1200 x 630 (environ 1,91:1) ; 1200 x 628 a presque la même forme	D’après les recommandations de partage de Facebook
Google Discover	Au moins 1200 px de large, en 16:9 (par exemple 1200 x 675)	D’après les consignes Google Discover

Les tailles d’image WordPress en un coup d’œil

Chaque image envoyée reçoit une copie redimensionnée pour chaque taille enregistrée. Voici les tailles que le cœur de WordPress enregistre, avec les valeurs par défaut du Theme Handbook et de la référence des fonctions du cœur :

Nom de la taille	Dimensions par défaut	Modifiable dans Réglages > Médias ?	Remarques
thumbnail	150 x 150, recadrée	Oui	Possède une case « recadrer aux dimensions exactes »
medium	300 x 300 max	Oui	Redimensionnée proportionnellement
medium_large	768 de large, sans limite de hauteur	Non	Utilisée surtout dans srcset
large	1024 x 1024 max	Oui	Redimensionnée proportionnellement
1536x1536	1536 x 1536 max	Non	Ajoutée dans WordPress 5.3 pour les écrans haute densité
2048x2048	2048 x 2048 max	Non	Ajoutée dans WordPress 5.3 pour les écrans haute densité
post-thumbnail	Définie par le thème	Non	N’existe que si le thème appelle set_post_thumbnail_size()
full	Votre fichier original	Non	Les très grandes images sont d’abord réduites (voir plus bas)

« Max » signifie que WordPress fait tenir l’image dans ce cadre en gardant ses proportions. Une photo de 2000 x 1000 devient 1024 x 512 pour large, et non 1024 x 1024.

Les thèmes et extensions ajoutent souvent d’autres tailles avec add_image_size(). WooCommerce, par exemple, ajoute ses propres tailles de produit, que notre guide sur la taille des images produit WooCommerce explique.

Une autre règle concerne les gros fichiers. Depuis WordPress 5.3, si une image dépasse 2560 pixels en largeur ou en hauteur, WordPress la réduit et utilise la copie réduite comme plus grande taille disponible. Ce seuil vient du filtre big_image_size_threshold, dont la valeur par défaut est 2560. Si vous voyez -scaled dans les noms de fichiers et voulez savoir s’il faut désactiver ce comportement, lisez comment désactiver les images scaled dans WordPress.

D’où vient vraiment la taille de l’image mise en avant

Une image mise en avant est n’importe quelle image définie dans le panneau Image mise en avant de l’éditeur. Ce que voient les visiteurs dépend de la façon dont le thème l’affiche.

Thèmes classiques

Un thème classique active les images mises en avant et enregistre la taille dans son functions.php :

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 1200, 675, true );

set_post_thumbnail_size() enregistre une taille nommée post-thumbnail. Le troisième argument contrôle le recadrage. Avec false (par défaut), WordPress redimensionne l’image pour qu’elle tienne dans 1200 x 675. Avec true, il la coupe à exactement 1200 x 675 depuis le centre, donc tout ce qui sort d’un cadre 16:9 est perdu. Vous pouvez aussi passer un tableau comme array( 'center', 'top' ) pour choisir la partie conservée.

Beaucoup de thèmes enregistrent des tailles nommées supplémentaires pour différents modèles :

add_image_size( 'hero-wide', 1600, 900, true );
add_image_size( 'card', 600, 400, true );

Le modèle en choisit ensuite une par son nom :

if ( has_post_thumbnail() ) {
	the_post_thumbnail( 'hero-wide' );
}

Appelée sans nom, the_post_thumbnail() utilise post-thumbnail. La vraie taille d’image mise en avant d’un thème classique est donc celle nommée dans le modèle, et une archive de blog peut en utiliser une autre que la vue d’un article seul.

Thèmes blocs

Les thèmes blocs, y compris les thèmes gratuits de ce site, affichent l’image mise en avant avec le bloc Image mise en avant. La référence des blocs du cœur liste ses réglages, dont sizeSlug (quelle taille enregistrée charger), aspectRatio, width, height et scale.

Cela change l’endroit où regarder. Ouvrez Apparence > Éditeur, modifiez le modèle Articles seuls et sélectionnez le bloc Image mise en avant. La barre latérale indique quelle taille d’image il charge et si un ratio est défini. Le ratio est appliqué dans le navigateur avec du CSS : le fichier reste le même, seul le cadre visible change. Si le bloc demande un cadre 16:9 et que votre image est carrée, une partie est masquée. Les modèles d’archive et d’accueil peuvent utiliser d’autres réglages que le modèle d’article seul, vérifiez donc chacun.

Comment trouver la taille d’image mise en avant de votre thème

Essayez ces méthodes dans l’ordre. La première qui vous donne une réponse suffit.

1. Consultez la documentation du thème. Les bons thèmes indiquent la taille d’image mise en avant recommandée. Si elle y figure, utilisez-la.

2. Listez les tailles enregistrées avec WP-CLI. Si vous avez accès à la ligne de commande, wp media image-size affiche chaque taille enregistrée avec sa largeur, sa hauteur, son réglage de recadrage et son ratio :

   wp media image-size

3. Cherchez dans les fichiers du thème. Dans un thème classique, cherchez set_post_thumbnail_size et add_image_size dans functions.php (et les fichiers qu’il inclut), puis regardez dans single.php ou les parties de modèle quel nom est passé à the_post_thumbnail(). Dans un thème blocs, vérifiez le bloc Image mise en avant dans l’éditeur de site, comme décrit plus haut.

4. Inspectez un article en ligne. Faites un clic droit sur l’image mise en avant, choisissez Inspecter et lisez le nom de fichier dans src. WordPress ajoute les dimensions aux copies redimensionnées, donc my-photo-1200x675.jpg vous indique que le thème a chargé une copie de 1200 x 675. Regardez aussi srcset, car le navigateur peut choisir une copie plus petite sur les écrans étroits. Pas de dimensions dans le nom signifie que le fichier original a été utilisé.

Une fois la cible connue, passez une image test dans l’outil des tailles d’image pour voir à quoi ressemblera chaque taille dérivée avant d’envoyer un lot.

Choisir la taille du fichier à envoyer

Une fois la taille du thème connue, quatre choix décident si le résultat sera réussi.

• Largeur. Envoyez au moins la largeur affichée par le thème. Pour un rendu net sur les écrans haute densité des téléphones et portables, visez environ le double. Pour un emplacement de 1200px de large, cela fait 2400px. WordPress crée des copies plus petites de votre fichier et jamais de plus grandes, donc un original trop petit est la cause la plus fréquente d’une image floue après l’envoi.
• Ratio. Respectez le ratio du recadrage du thème. S’il recadre en 16:9, donnez-lui du 16:9 et gardez le sujet près du centre pour qu’un recadrage strict ne coupe ni têtes ni textes.
• Poids du fichier. Une photo de 2400px enregistrée en JPEG avec une qualité raisonnable pèse en général quelques centaines de kilo-octets. Envoyer un fichier d’appareil photo de 6000px ne fait qu’ajouter du travail : WordPress réduit de toute façon tout ce qui dépasse 2560px, et les pixels en trop n’atteignent jamais les visiteurs.
• Format de fichier. WordPress accepte les envois en WebP depuis la version 5.8 et en AVIF depuis la 6.5, à condition que la bibliothèque d’images de votre serveur les prenne en charge. Les deux donnent en général un fichier plus léger que le JPEG à qualité comparable.

L’image de partage social est un sujet à part

Quand quelqu’un partage votre article sur Facebook, LinkedIn ou d’autres réseaux, l’aperçu vient de la balise og:image, que les extensions SEO remplissent en général avec l’image mise en avant. La documentation de partage de Facebook recommande des images d’au moins 1200 x 630 pixels, aussi proches que possible d’un ratio 1,91:1.

Vous verrez aussi 1200 x 628 recommandé. Ce format fait presque exactement 1,91:1, alors que 1200 x 630 donne environ 1,90:1. Les deux ne diffèrent que de 2 pixels en hauteur, donc l’un ou l’autre convient.

Si la taille d’affichage de votre thème est aussi proche de 1,91:1, un seul fichier en 1200 x 630 (ou 2400 x 1260) convient aux deux. Si le thème recadre en 16:9 ou en carré, éloignez le contenu important des bords gauche et droit, ou définissez une image sociale séparée dans votre extension SEO.

Google Discover a ses propres recommandations pour les images. Les consignes Google Discover recommandent des images d’au moins 1200 px de large, de plus de 300 000 pixels au total, au format 16:9, par exemple 1200 x 675. Les grandes images ont aussi besoin de la directive robots max-image-preview:large, que WordPress ajoute par défaut depuis la version 5.7, sauf si le site est réglé pour demander aux moteurs de recherche de ne pas l’indexer.

Comment changer la taille de l’image mise en avant

L’endroit où faire la modification dépend de la taille et de votre thème.

Tailles du cœur (thumbnail, medium, large). Allez dans Réglages > Médias et changez la largeur et la hauteur. La documentation de l’écran Réglages des médias décrit les champs, y compris la case de recadrage des miniatures.

Tailles du thème dans un thème classique. Ne modifiez pas le thème parent, car une mise à jour du thème écrasera votre changement. Ajoutez les nouvelles valeurs dans le functions.php d’un thème enfant. Enregistrer à nouveau une taille avec le même nom la remplace, et la configuration du thème enfant doit s’exécuter après celle du parent :

add_action( 'after_setup_theme', function () {
	set_post_thumbnail_size( 1600, 900, true );
	add_image_size( 'hero-wide', 1600, 900, true );
}, 11 );

La priorité 11 fait passer ce code après un thème parent accroché à la priorité par défaut de 10. Vérifiez le code du parent et ajustez si celui-ci utilise une priorité plus tardive.

Thèmes blocs. Changez la taille d’image et le ratio du bloc Image mise en avant dans le modèle de l’éditeur de site. Aucun code n’est nécessaire, et le changement s’applique à chaque article qui utilise ce modèle.

Une seule image, sans code. Pour choisir ce qu’un recadrage conserve sur une image précise, ouvrez-la depuis Médias > Bibliothèque et cliquez sur Modifier l’image. Recadrez-la au ratio de votre thème (l’outil de recadrage accepte un ratio comme 16:9) ou mettez-la à l’échelle, puis enregistrez. WordPress applique la modification à toutes les tailles de cette image et conserve le fichier original, ce qui permet de l’annuler plus tard avec Restaurer l’image originale.

Régénérer les miniatures existantes

Une taille modifiée ne s’applique qu’aux nouveaux envois. Les images déjà présentes dans votre médiathèque gardent leurs anciennes copies tant que vous ne les recréez pas. La commande wp media regenerate s’en charge :

wp media regenerate --yes

Options utiles tirées de la documentation WP-CLI :

• --image_size=hero-wide ne recrée que cette taille. Répétez l’option pour plusieurs tailles.
• --only-missing crée les tailles qui n’existent pas encore et laisse les fichiers existants intacts, ce qui est plus rapide après l’ajout d’une nouvelle taille.
• --skip-delete conserve les anciens fichiers de miniatures. Utilisez-la si d’autres sites, des newsletters ou des flux pointent directement vers ces fichiers.

Sans ligne de commande, l’extension Regenerate Thumbnails du répertoire d’extensions WordPress.org fait la même chose depuis le tableau de bord. Faites d’abord une sauvegarde sur une grosse médiathèque, car la régénération réécrit beaucoup de fichiers.

Erreurs fréquentes

• S’arrêter à 1200 x 630. C’est un bon point de départ qui convient aux aperçus de liens, mais si votre thème recadre en 16:9 ou en carré, une partie de l’image est coupée. Vérifiez la taille de votre thème avant d’envoyer un lot.
• Désactiver les tailles générées pour « garder l’original ». Si le thème n’a pas de copies plus petites, il peut finir par charger le fichier complet sur tous les écrans, ce qui ralentit la page sur mobile. Les copies redimensionnées existent justement pour éviter cela.
• Modifier le code des tailles d’image sans régénérer. Le code fonctionne, mais seulement pour les nouveaux envois. C’est pourquoi beaucoup de gens concluent qu’un changement de taille « n’a rien fait ».
• Changer la taille dans le thème parent. La prochaine mise à jour du thème la supprime. Utilisez un thème enfant ou l’éditeur de site.

Si l’image paraît encore incorrecte alors que la taille et le ratio correspondent et que vous avez régénéré, comparez le nom du fichier chargé par le navigateur avec les tailles que WordPress devrait créer selon l’outil des tailles d’image. S’ils diffèrent, c’est souvent une extension d’optimisation ou un redimensionneur d’images de CDN, placé entre WordPress et le visiteur, qui sert sa propre version.