Comment changer la taille de l’image à la une dans WordPress : un guide technique complet

Les images mises en avant — également appelées miniatures de publication — constituent l’ancre visuelle principale de tout site WordPress. Elles apparaissent dans les listes de publications, les pages d’archives, les aperçus sur les réseaux sociaux et les flux RSS, ce qui fait de leurs dimensions un facteur direct dans la cohérence de la mise en page et la qualité perçue du design. Modifier la taille de l’image mise en avant dans WordPress signifie soit redéfinir les dimensions en pixels que WordPress enregistre au moment du téléversement, soit mettre à jour la façon dont votre thème demande ces dimensions au moment du rendu, soit les deux — et ne pas traiter les deux aspects est la raison la plus courante pour laquelle les images redimensionnées s’affichent incorrectement sur le front-end.

Ce guide couvre toutes les méthodes disponibles, des paramètres du tableau de bord sans code à la personnalisation directe en PHP, avec un contexte technique précis pour chaque approche.

Comprendre comment WordPress gère les tailles d’images

Avant de toucher à un quelconque paramètre, vous devez comprendre le pipeline. Lorsque vous téléversez une image, WordPress ne stocke pas un seul fichier — il génère plusieurs fichiers dérivés basés sur des définitions de tailles enregistrées. Ces définitions résident dans la base de données et sont enregistrées soit par le cœur de WordPress, soit par votre thème actif, soit par des plugins installés.

Les trois tailles que WordPress enregistre par défaut sont :

• Miniature — généralement 150x150 px, recadrée en dur par défaut
• Moyenne — jusqu’à 300x300 px, mise à l’échelle proportionnellement
• Grande — jusqu’à 1024x1024 px, mise à l’échelle proportionnellement

Votre thème enregistre des tailles supplémentaires en utilisant add_image_size(). Lorsqu’un modèle appelle the_post_thumbnail('large'), WordPress recherche le fichier qui a été généré pour cette taille enregistrée au moment du téléversement. C’est le point architectural critique : modifier une définition de taille ne redimensionne pas rétroactivement les images déjà téléversées. Vous devez régénérer les miniatures après tout changement de taille.

Méthode 1 : Ajuster la taille de l’image mise en avant via les paramètres médias de WordPress

C’est le point de départ correct pour les sites où le thème utilise l’une des trois tailles principales pour l’affichage de son image mise en avant.

Étape 1 : Mettre à jour les paramètres médias

Accédez à Réglages > Médias dans votre tableau de bord WordPress. Vous verrez trois groupes de tailles. Identifiez quelle taille votre thème utilise pour les images mises en avant — consultez la documentation de votre thème ou inspectez le HTML rendu pour confirmer la classe CSS (par exemple, wp-image-* à côté de size-large).

Ajustez les champs de largeur et de hauteur pour la taille concernée. Définir l’une ou l’autre dimension à 0 indique à WordPress de mettre à l’échelle proportionnellement selon l’autre axe plutôt que de recadrer.

Cliquez sur Enregistrer les modifications.

Étape 2 : Régénérer les miniatures existantes

Les nouveaux téléversements utiliseront immédiatement les dimensions mises à jour. Pour les images déjà présentes dans votre médiathèque, vous devez régénérer les dérivés. L’outil le plus fiable pour cela est le plugin Regenerate Thumbnails d’Alex Mills.

Après l’avoir installé et activé, allez dans Outils > Regen. Thumbnails et cliquez sur Regenerate All Thumbnails. Sur les grandes médiathèques, il s’agit d’une opération gourmande en ressources — exécutez-la pendant les heures de faible trafic, et si vous êtes sur un plan VPS Hosting, envisagez d’augmenter temporairement max_execution_time et memory_limit de PHP dans php.ini pour éviter les délais d’expiration.

Écueil courant : Si votre thème enregistre sa propre taille personnalisée avec le même libellé qu’une taille principale, le panneau des paramètres médias n’aura aucun effet. L’appel add_image_size() du thème a la priorité.

Méthode 2 : Utiliser le Personnaliseur WordPress ou le panneau d’options du thème

De nombreux thèmes commerciaux exposent des contrôles de taille d’image sans nécessiter de modifications de code.

Étape 1 : Vérifier le Personnaliseur

Allez dans Apparence > Personnaliser. Cherchez dans les sections intitulées Options du thème, Paramètres du blog, Mise en page ou Paramètres des publications. Certains thèmes exposent ici une section dédiée à l’Image mise en avant.

Si des contrôles existent, ajustez la largeur et la hauteur, puis cliquez sur Publier. Le thème mettra à jour sa définition de taille enregistrée et, dans certaines implémentations, régénérera automatiquement les images concernées.

Étape 2 : Vérifier un panneau d’options de thème dédié

Les thèmes premium construits sur des frameworks comme Redux ou Kirki disposent souvent d’un élément de menu Options du thème ou Panneau du thème autonome dans la barre latérale du tableau de bord. Recherchez des sous-sections nommées Paramètres d’image, Miniatures de publication ou Mise en page des archives.

Ajustez les valeurs, enregistrez, puis régénérez les miniatures manuellement en utilisant la méthode du plugin décrite ci-dessus, car la plupart des panneaux de thème ne déclenchent pas la régénération automatiquement.

Méthode 3 : Définir des tailles d’images personnalisées dans functions.php

C’est la méthode techniquement correcte pour les développeurs et toute personne ayant besoin d’un contrôle précis sur les dimensions, le comportement de recadrage et la dénomination des tailles. C’est également la seule méthode qui vous permet d’enregistrer des tailles qui n’entrent pas en conflit avec les valeurs par défaut du cœur.

Étape 1 : Enregistrer la taille personnalisée

Modifiez le fichier functions.php de votre thème enfant. Ne modifiez jamais directement les fichiers d’un thème parent — les mises à jour écraseront vos modifications. Si vous n’avez pas de thème enfant, créez-en un avant de continuer.

Ajoutez ce qui suit à l’intérieur d’une fonction accrochée :

function mytheme_custom_image_sizes() {
    add_theme_support( 'post-thumbnails' );
    add_image_size( 'featured-hero', 1200, 600, true );
    add_image_size( 'featured-card', 400, 300, true );
}
add_action( 'after_setup_theme', 'mytheme_custom_image_sizes' );

Détail des paramètres pour add_image_size() :

• Argument 1 — le handle de taille (chaîne de caractères), utilisé lors de l’appel de l’image dans les modèles
• Argument 2 — largeur en pixels
• Argument 3 — hauteur en pixels
• Argument 4 — mode de recadrage : true pour un recadrage dur aux dimensions exactes ; false pour une mise à l’échelle proportionnelle ; un tableau comme array( 'left', 'top' ) pour un recadrage positionnel

Cas particulier : Passer true comme argument de recadrage utilise par défaut un recadrage centré. Si vos images mises en avant ont des sujets systématiquement décentrés (par exemple, la photographie de portrait), utilisez un tableau positionnel — array( 'center', 'top' ) — pour éviter que les têtes ne soient coupées.

Étape 2 : Appeler la taille personnalisée dans les fichiers de modèle

Localisez le fichier de modèle responsable du rendu de l’image mise en avant. Les candidats courants sont single.php, archive.php, content.php ou template-parts/content-single.php. Recherchez the_post_thumbnail pour trouver l’appel exact.

Remplacez l’argument de taille existant :

// Before
the_post_thumbnail( 'large' );

// After
the_post_thumbnail( 'featured-hero' );

Pour plus de contrôle sur le balisage de sortie, utilisez get_the_post_thumbnail() avec des attributs personnalisés :

echo get_the_post_thumbnail(
    get_the_ID(),
    'featured-hero',
    array(
        'class' => 'hero-image lazyload',
        'alt'   => get_the_title(),
        'loading' => 'lazy',
    )
);

Étape 3 : Rendre la taille personnalisée sélectionnable dans le téléverseur de médias (optionnel)

Par défaut, les tailles personnalisées enregistrées avec add_image_size() n’apparaissent pas dans le menu déroulant de taille du téléverseur de médias WordPress. Pour les exposer à des fins éditoriales, ajoutez ce filtre :

function mytheme_add_image_sizes_to_selector( $sizes ) {
    return array_merge( $sizes, array(
        'featured-hero' => __( 'Featured Hero (1200x600)', 'mytheme' ),
        'featured-card' => __( 'Featured Card (400x300)', 'mytheme' ),
    ) );
}
add_filter( 'image_size_names_choose', 'mytheme_add_image_sizes_to_selector' );

Étape 4 : Régénérer les miniatures

Exécutez le plugin Regenerate Thumbnails comme décrit dans la Méthode 1. Toutes les images précédemment téléversées auront de nouveaux fichiers dérivés générés aux nouvelles dimensions.

Méthode 4 : Ajuster la taille de l’image mise en avant dans un constructeur de pages

Les constructeurs de pages comme Elementor, Divi et Bricks Builder abstraient la couche de modèle, de sorte que les modifications des fichiers de modèle peuvent ne pas s’appliquer. Chaque constructeur dispose de ses propres contrôles de taille d’image.

Elementor

1. Ouvrez la page ou la publication dans Elementor.
2. Sélectionnez le widget Image mise en avant ou un widget Publications affichant la miniature.
3. Dans le panneau de gauche, localisez Taille de l’image sous l’onglet Contenu.
4. Choisissez une taille enregistrée dans le menu déroulant ou sélectionnez Personnalisé pour saisir des dimensions en pixels.
5. Cliquez sur Mettre à jour.

Note technique : Lorsque vous sélectionnez « Personnalisé » dans Elementor, cela n’enregistre pas une nouvelle taille d’image WordPress — il utilise JavaScript pour redimensionner l’image côté client ou demande l’image en taille complète et la met à l’échelle via CSS. Cela augmente le poids de la page. Préférez toujours une taille WordPress enregistrée plutôt qu’une dimension Elementor personnalisée pour les pages où la performance est critique.

Divi

Dans le Module Blog ou le module Image mise en avant de la publication de Divi, l’option Taille de l’image sous Avancé contrôle quelle taille WordPress enregistrée est demandée. Divi dispose également de ses propres paramètres de taille d’image sous Divi > Options du thème > Général > Tailles des miniatures, qui enregistrent des dérivés supplémentaires.

Méthode 5 : Utiliser un plugin pour des tailles d’images personnalisées sans code

Si la modification de PHP n’est pas une option, ces plugins reproduisent la fonctionnalité add_image_size() via une interface utilisateur :

Simple Image Sizes est le remplacement le plus direct de add_image_size(). Après l’avoir installé, accédez à Réglages > Médias — le plugin ajoute une section de tailles personnalisées sous les valeurs par défaut du cœur. Définissez votre taille, enregistrez, et utilisez la régénération intégrée du plugin pour l’appliquer.

Comparaison : Toutes les méthodes en un coup d’œil

Considérations de performance et d’optimisation des images

Enregistrer trop de tailles d’images est un problème côté serveur souvent négligé. Chaque taille enregistrée génère un nouveau fichier au téléversement. Un site avec 15 tailles enregistrées et 2 000 images dans la médiathèque possède potentiellement 30 000 fichiers images sur le disque. Sur un hébergement mutualisé, cela remplit les quotas ; sur n’importe quel serveur, cela gonfle les tailles de sauvegarde.

Auditez vos tailles enregistrées périodiquement. Utilisez cet extrait dans un plugin temporaire ou functions.php pour lister toutes les tailles enregistrées :

add_action( 'wp_loaded', function() {
    if ( current_user_can( 'manage_options' ) && isset( $_GET['show_image_sizes'] ) ) {
        echo '<pre>';
        print_r( wp_get_registered_image_subsizes() );
        echo '</pre>';
        exit;
    }
} );

Visitez https://yoursite.com/?show_image_sizes=1 en étant connecté en tant qu’administrateur pour voir la liste complète.

Pratiques de performance supplémentaires :

• Utilisez le format WebP. WordPress 5.8+ convertit les images téléversées en WebP si la bibliothèque GD ou Imagick de votre serveur le prend en charge. Vérifiez la prise en charge sous Outils > Santé du site.
• Implémentez le chargement différé. WordPress ajoute loading="lazy" aux images sous la ligne de flottaison par défaut depuis la version 5.5. Assurez-vous que vos appels the_post_thumbnail() personnalisés préservent cet attribut.
• Compressez avant de téléverser. Des outils comme ShortPixel ou Imagify s’intègrent directement dans le pipeline médias de WordPress et compressent automatiquement les dérivés. TinyPNG fonctionne bien pour la compression manuelle avant téléversement.
• Utilisez un CDN. Si votre site sert une audience mondiale, déléguer la livraison des images à un CDN réduit la latence indépendamment du nombre de tailles enregistrées.

Pour les sites avec des charges d’images importantes — portfolios de photographie, sites d’actualités, boutiques WooCommerce — un VPS avec cPanel vous donne le contrôle au niveau du serveur pour ajuster les limites mémoire PHP, configurer Imagick directement et gérer les quotas de disque que les environnements mutualisés ne peuvent pas offrir.

Images responsives et l’attribut srcset

WordPress génère automatiquement les attributs srcset et sizes pour les images dans le contenu, en puisant dans toutes les tailles d’images enregistrées. Cela signifie que chaque taille que vous enregistrez contribue à la capacité du navigateur à sélectionner la résolution la plus appropriée pour la fenêtre d’affichage et le ratio de pixels de l’appareil de l’utilisateur.

Lorsque vous appelez the_post_thumbnail(), WordPress génère un balisage similaire à :

<img src="hero-1200x600.jpg"
     srcset="hero-400x300.jpg 400w, hero-800x400.jpg 800w, hero-1200x600.jpg 1200w"
     sizes="(max-width: 600px) 400px, (max-width: 900px) 800px, 1200px"
     alt="Post Title"
     loading="lazy">

L’attribut sizes indique au navigateur la largeur de rendu de l’image à différentes largeurs de fenêtre d’affichage. WordPress génère une valeur sizes par défaut, mais elle est souvent inexacte pour les mises en page complexes. Remplacez-la en utilisant le filtre wp_calculate_image_sizes ou en passant un attribut sizes personnalisé dans le tableau $attr de get_the_post_thumbnail().

SSL, domaine et contexte d’hébergement

Si vous migrez un site WordPress vers un nouveau domaine ou passez de HTTP à HTTPS après avoir obtenu un Certificat SSL, les URL d’images stockées dans les métadonnées de publication (références _thumbnail_id) sont relatives à l’ID de la pièce jointe et ne sont pas affectées par les changements de domaine. Cependant, les URL d’images codées en dur dans le contenu des publications ou les options du thème devront être mises à jour via une opération de recherche-remplacement avec WP-CLI :

wp search-replace 'http://olddomain.com' 'https://newdomain.com' --skip-columns=guid

Si vous configurez une nouvelle installation WordPress depuis zéro, enregistrer votre domaine via l’Enregistrement de domaine et l’associer à un environnement d’hébergement correctement configuré garantit que vos chemins de téléversement de médias et vos règles de réécriture .htaccess sont corrects dès le départ, évitant ainsi les schémas d’URL d’images brisés qui sont fastidieux à déboguer rétroactivement.

Liste de contrôle pour la décision technique

Utilisez cette matrice pour sélectionner la bonne approche selon votre situation :

• Vous devez modifier une taille principale (miniature/moyenne/grande) et ne modifiez pas le code — utilisez Réglages > Médias, puis régénérez les miniatures.
• Votre thème premium dispose d’un panneau d’options de thème — vérifiez-y d’abord avant de toucher à des fichiers.
• Vous avez besoin d’une taille avec des dimensions exactes en pixels et un recadrage dur — utilisez add_image_size() dans le fichier functions.php d’un thème enfant.
• Votre sujet nécessite un recadrage non centré — passez un tableau positionnel comme quatrième argument à add_image_size().
• Vous utilisez Elementor ou Divi — utilisez le contrôle natif de taille d’image du constructeur, mais préférez les tailles WordPress enregistrées à « Personnalisé » pour la performance.
• Vous ne pouvez pas modifier PHP et avez besoin d’une taille personnalisée — installez Simple Image Sizes, définissez la taille, régénérez.
• Vous avez une grande médiathèque — utilisez Regenerate Thumbnails Advanced, qui permet une régénération sélective par nom de taille pour éviter un traitement redondant.
• La performance est une priorité — auditez les tailles enregistrées, activez WebP, implémentez un CDN et assurez-vous que le chargement différé est actif.
• Vous êtes sur un hébergement mutualisé et rencontrez des erreurs de mémoire ou de délai d’expiration lors de la régénération — envisagez de migrer vers un plan VPS Hosting où les limites PHP sont configurables.

FAQ

Pourquoi mes images mises en avant affichent-elles toujours l’ancienne taille après avoir modifié les paramètres médias ?

WordPress génère des dérivés d’images au moment du téléversement. Modifier une définition de taille dans Réglages > Médias n’affecte que les nouveaux téléversements. Vous devez exécuter un outil de régénération des miniatures — tel que le plugin Regenerate Thumbnails — pour redimensionner les fichiers déjà présents dans votre médiathèque.

Quelle est la différence entre add_image_size() avec true versus false comme paramètre de recadrage ?

Passer true force WordPress à recadrer l’image aux dimensions exactes de largeur et de hauteur que vous spécifiez, centré par défaut. Passer false met l’image à l’échelle proportionnellement de sorte qu’aucune dimension ne dépasse vos valeurs spécifiées, ce qui signifie que les dimensions de sortie réelles peuvent être inférieures à celles spécifiées si le ratio d’aspect original diffère.

L’enregistrement de nombreuses tailles d’images personnalisées ralentira-t-il mon site ?

Pas au moment du rendu — WordPress sert des fichiers pré-générés. Le coût de performance survient au moment du téléversement, lorsqu’Imagick ou GD doit générer un dérivé par taille enregistrée. Les sites avec de nombreuses tailles et un volume de téléversement élevé peuvent connaître des réponses de téléversement lentes et une croissance significative de l’utilisation du disque.

Puis-je supprimer des tailles d’images dont je n’ai plus besoin ?

Oui. Utilisez remove_image_size( 'size-name' ) dans votre functions.php pour arrêter de générer une taille pour les nouveaux téléversements. Les fichiers existants pour cette taille restent sur le disque jusqu’à leur suppression manuelle. La commande WP-CLI wp media regenerate --only-missing peut aider au nettoyage en ne générant que les tailles manquantes sans recréer tous les dérivés.

La modification de la taille de l’image mise en avant affecte-t-elle la façon dont les images apparaissent lors du partage sur les réseaux sociaux ?

Pas directement. Les plateformes sociales comme Facebook et Twitter lisent les balises méta Open Graph (og:image) pour déterminer quelle image afficher. Ces balises sont généralement définies par un plugin SEO tel que Yoast SEO ou Rank Math, qui enregistre sa propre taille d’image (généralement 1200x630) spécifiquement pour le partage social. Modifier la taille de l’image mise en avant de votre thème ne modifie pas l’image Open Graph, sauf si votre plugin SEO est configuré pour utiliser le même handle de taille.