Quelles sont les trois tailles d'images produit WooCommerce ?

WooCommerce enregistre woocommerce_thumbnail pour le catalogue et la grille de la boutique, woocommerce_single pour la grande image de la fiche produit, et woocommerce_gallery_thumbnail pour la petite bande de miniatures sous l'image principale. Chaque photo produit que vous téléversez génère les trois, en plus des tailles WordPress standard comme thumbnail, medium, medium_large et large.

Où modifier les tailles d'images produit WooCommerce ?

Allez dans Apparence, puis Personnaliser, puis WooCommerce, puis Images produit. Vous y trouvez une largeur d'image principale, une largeur de miniature et un choix de recadrage de miniature en 1:1, personnalisé ou non recadré. Si les champs de largeur sont absents et que seul le recadrage s'affiche, c'est que votre thème actif a fixé des largeurs dans son code et que l'outil de personnalisation les masque volontairement.

Pourquoi mes images de catalogue WooCommerce sont-elles mal recadrées ?

La miniature du catalogue est recadrée en carré par défaut, en découpant depuis le centre de la photo. Toute prise de vue où le produit n'est pas centré ou remplit le cadre d'un bord à l'autre perd ses extrémités. Passez le recadrage des miniatures sur non recadré, ou reprenez les photos en ajoutant des marges régulières autour du produit pour qu'un recadrage carré centré le contienne encore entièrement.

Pourquoi ne puis-je pas changer la largeur de l'image principale dans mon thème ?

Le thème a transmis des largeurs fixes au moment de déclarer sa prise en charge de WooCommerce, ce qui indique à WooCommerce de retirer ces réglages de l'outil de personnalisation. C'est intentionnel, parce que le CSS du thème est construit autour de ces largeurs exactes en pixels. Vous pouvez les surcharger avec un filtre dans un thème enfant, mais la mise en page produit demandera alors sans doute des ajustements CSS.

Quelle taille doivent faire les images produit WooCommerce ?

Téléversez des images sources carrées faisant environ le double de votre plus grande largeur d'affichage, donc 1200 par 1200 pixels pour une image principale de 600 pixels, et gardez la même taille pour tous les produits. WordPress n'agrandit jamais une image : une source plus petite que la largeur configurée ne produit aucun fichier à cette taille, et le navigateur étire une version plus petite à la place.

Taille des images produit WooCommerce : les trois tailles et comment les changer vraiment

Q: Faut-il régénérer les miniatures après avoir changé les tailles d'images WooCommerce ?

Oui. Changer le réglage ne modifie que ce qui sera généré pour les prochains téléversements, donc chaque produit existant continue de servir ses anciens fichiers tant que vous ne les reconstruisez pas. WooCommerce lance une régénération en arrière-plan quand vous enregistrez dans l'outil de personnalisation, mais sur un gros catalogue c'est plus lent et moins fiable que de lancer la régénération vous-même avec WP-CLI.

WooCommerce génère trois tailles d’image pour chaque photo produit que vous téléversez, et seules deux d’entre elles sont modifiables depuis l’administration WordPress. woocommerce_thumbnail est l’image de la grille du catalogue, woocommerce_single est la grande image de la fiche produit, et woocommerce_gallery_thumbnail est la petite bande de miniatures en dessous. Vous les modifiez dans Apparence > Personnaliser > WooCommerce > Images produit — et si ce panneau vous affiche une liste déroulante de recadrage mais aucun champ de largeur, c’est que votre thème a verrouillé les largeurs dans son code, délibérément.

Les trois tailles

Nom de la taille	Où elle apparaît	Recadrage	Modifiable dans l’outil de personnalisation
`woocommerce_thumbnail`	Page boutique, grilles de catégories, produits similaires, ventes croisées	Recadrage strict en carré par défaut	Largeur et ratio
`woocommerce_single`	Image principale de la fiche produit	Non recadrée — le ratio d’origine est conservé	Largeur uniquement
`woocommerce_gallery_thumbnail`	Petite bande sous l’image produit principale	Carré recadré strictement	Non

Ces tailles viennent s’ajouter aux tailles WordPress standard. Une seule photo produit produira typiquement thumbnail, medium, medium_large, large, les trois tailles WooCommerce, et éventuellement des tailles supplémentaires enregistrées par votre thème via add_image_size. Ça fait beaucoup de fichiers par téléversement, et c’est pour ça qu’un import de 300 produits prend autant de temps.

La miniature de galerie est celle qui surprend : elle n’a aucun réglage d’administration. Sur une installation par défaut c’est un petit carré, historiquement de 100px, et c’est la taille la plus susceptible de manquer de netteté sur un écran retina, parce que le fichier physique est réellement minuscule.

Où se trouvent vraiment les réglages

Apparence > Personnaliser > WooCommerce > Images produit vous donne trois réglages :

Largeur de l’image principale — la largeur de woocommerce_single. La hauteur est automatique, le ratio d’origine est donc conservé.
Largeur de la miniature — la largeur de woocommerce_thumbnail.
Recadrage de la miniature — 1:1 (carré, la valeur par défaut), Personnalisé (vous saisissez un ratio comme 4:3), ou Non recadré.

Notez ce qui manque : il n’y a pas de champ de hauteur pour la miniature du catalogue, parce que la hauteur découle du ratio de recadrage. Et il n’y a strictement rien pour la miniature de galerie.

Avant de changer quoi que ce soit, il est utile de voir exactement quelles déclinaisons un fichier donné va produire — déposez une vraie photo produit dans l’outil des tailles d’images WordPress et vous obtenez la liste complète, y compris si votre source est assez grande pour remplir chaque taille sans agrandissement.

Pourquoi vos images de catalogue rendent mal

La miniature du catalogue est recadrée strictement en carré. Recadrage strict signifie que WooCommerce prend un carré au centre de votre photo et jette le reste — il n’ajoute pas de bandes noires et n’écrase pas l’image. Une photo produit de 2000x1200 devient une tranche de 1200x1200 prise au milieu, puis réduite.

C’est très bien pour une bouteille photographiée pile au centre avec de la marge autour. C’est un désastre pour :

Les produits longs (skis, câbles, tringles à rideaux) — vous ne voyez que le tiers central, rien d’autre
Les compositions décentrées — le produit dérive vers le bord du cadre et se fait trancher
Les photos où l’objet remplit le cadre d’un bord à l’autre — le haut et le bas sont coupés
Les photos d’ambiance avec le produit dans un coin

Le conseil classique est « passez le recadrage sur Non recadré ». Ça marche, mais soyons honnêtes sur le prix à payer : non recadré signifie que chaque miniature garde son propre ratio, donc une grille de photos d’orientations mélangées devient visuellement irrégulière, et les rangées ne s’alignent plus, sauf si le CSS de votre thème gère les hauteurs variables. La plupart des thèmes partent du principe que ce sont des carrés.

La meilleure solution, si vous en avez les moyens, se joue à la source : standardisez des photos produit carrées, avec l’objet centré et des marges régulières. À ce moment-là un recadrage carré strict ne change rien et tout ce qui suit devient prévisible. Changer le réglage de recadrage est le contournement ; des images sources cohérentes sont la vraie solution.

Quand le thème verrouille les largeurs

Si votre panneau Images produit ne propose que le recadrage, c’est que votre thème a déclaré des largeurs fixes au moment d’enregistrer sa prise en charge de WooCommerce :

add_theme_support( 'woocommerce', array(
    'single_image_width'    => 800,
    'thumbnail_image_width' => 400,
) );

Quand un thème transmet ces valeurs, WooCommerce retire les réglages de largeur de l’outil de personnalisation et ne laisse que le ratio. Ce n’est pas un bug et ce n’est pas de l’hostilité de la part du thème : le CSS de sa mise en page produit est construit autour de ces largeurs exactes en pixels, et vous laisser les changer casserait la grille.

Vous pouvez les surcharger depuis le functions.php d’un thème enfant, avec le filtre propre à chaque taille :

add_filter( 'woocommerce_get_image_size_single', function ( $size ) {
    $size['width']  = 1000;
    $size['height'] = '';
    $size['crop']   = 0;
    return $size;
} );

add_filter( 'woocommerce_get_image_size_gallery_thumbnail', function ( $size ) {
    $size['width']  = 150;
    $size['height'] = 150;
    $size['crop']   = 1;
    return $size;
} );

Le même schéma fonctionne pour woocommerce_get_image_size_thumbnail. C’est aussi le seul moyen de changer la miniature de galerie, puisqu’elle n’a aucune interface.

Le coût réel, dit franchement : surcharger une largeur verrouillée signifie que le fichier généré par WooCommerce ne correspond plus à ce que le CSS du thème attend. En général l’image se met simplement à l’échelle dans le navigateur et rend très bien, puisqu’elle est désormais plus grande que sa zone. Parfois le thème a un conteneur à hauteur fixe et vous récoltez des bandes noires ou un débordement. Testez sur un produit avant d’en régénérer 2 000.

Changer les tailles implique de régénérer

Chaque réglage de taille n’affecte que les nouveaux téléversements. Les produits existants continuent de servir les fichiers générés au moment de leur téléversement, donc rien ne change visuellement tant que vous ne les reconstruisez pas.

WooCommerce lance une régénération en arrière-plan quand vous enregistrez dans l’outil de personnalisation. Sur un petit catalogue, ça suffit. Sur un gros, tout dépend du déclenchement fiable de WP-Cron, ce qui n’arrive souvent pas sur une boutique à faible trafic, et vous vous retrouvez avec une médiathèque à moitié régénérée. Lancez-la vous-même à la place :

wp media regenerate --yes

Pour ne reconstruire que les images produit :

wp media regenerate --yes --post_type=product

Si vous voulez écarter la tâche en arrière-plan pendant que vous faites ça à la main :

add_filter( 'woocommerce_background_image_regeneration', '__return_false' );

Deux choses que la régénération ne fera pas. Elle ne supprime pas les anciens fichiers : votre dossier d’uploads conserve toutes les déclinaisons orphelines des réglages précédents, et il grossira. Et elle ne peut pas créer une taille plus grande que votre source, parce que WordPress n’agrandit pas. Si vous réglez la largeur de l’image principale sur 1200 mais que vos photos produit font 800px de large, aucun fichier de 1200px n’est créé ; le navigateur reçoit un fichier de 800px et l’étire, et srcset n’a rien de mieux à proposer.

La taille à téléverser réellement

Visez des images sources carrées faisant environ le double de votre plus grande largeur configurée — 1200x1200 pour une image principale de 600px, 1600x1600 si votre thème utilise 800px. Cela couvre les écrans retina 2x et donne à WordPress assez de pixels pour construire chaque déclinaison sans agrandissement. Gardez les mêmes dimensions pour tous les produits afin que la grille reste régulière.

Toujours bloqué ?

Si les tailles sont correctement configurées, que vous avez régénéré, et qu’un produit rend toujours mal, ouvrez l’image dans un nouvel onglet et lisez le nom de fichier. Un suffixe de dimensions qui ne correspond à aucune taille configurée signifie que quelque chose d’autre l’a enregistrée. Aucun suffixe du tout signifie que WooCommerce est retombé sur le fichier pleine taille, ce qui veut presque toujours dire que la source était trop petite pour la taille demandée. Passez ce fichier source dans l’outil des tailles d’images et comparez ce que WordPress devrait générer avec ce que le navigateur a réellement chargé — quand les deux divergent, c’est généralement une extension d’optimisation ou un redimensionneur d’images de CDN qui s’est glissé entre les deux.