Quelle taille d'image produit WooCommerce pour une boutique de mode ?

La réponse de WooCommerce est simple : envoyez des images d'au moins 800 × 800 pixels. Selon son guide des images produit, cette taille s'affiche bien en image de fiche, en image de catalogue et en miniature. Le guide sur les images floues la donne aussi comme minimum pour la plupart des thèmes.

Voyez 800 comme un plancher, pas comme un objectif. Si votre thème affiche l'image principale à 800 px de large sur ordinateur, un écran haute densité de téléphone ou de portable en demande environ le double pour rester net. WooCommerce conseille d'ailleurs de régler les miniatures au double de la taille affichée, par exemple 160 × 160 pour un emplacement de 80 × 80, en rappelant que des images plus lourdes ralentissent la page.

Règle pratique pour une boutique de vêtements : exportez l'original entre 1600 et 2000 px sur le grand côté, en JPEG ou WebP, compressé à quelques centaines de kilo-octets. Cela suffit pour le zoom et les écrans nets sans ralentir la boutique. N'agrandissez jamais une petite photo pour atteindre un chiffre : comme le dit WooCommerce, une taille plus grande n'ajoute aucun détail à un original trop petit.

Les réglages se trouvent dans l'outil de personnalisation : Apparence › Personnaliser › WooCommerce › Images produit. Selon le thème, vous y voyez la largeur de l'image principale, la largeur des miniatures et le recadrage des miniatures. Modifiez, regardez l'aperçu, puis cliquez sur Publier : tant que ce n'est pas publié, vos clients ne voient rien changer.

S'il manque des champs, c'est que votre thème fixe lui-même les tailles. Depuis WooCommerce 3.3, un thème peut déclarer ses largeurs d'image et, selon la documentation développeur, le marchand ne peut alors plus les changer : les champs de largeur disparaissent et seul le recadrage reste. Les réglages du thème ou sa documentation décident alors de la taille ; mieux vaut adapter vos photos au thème que lutter contre lui.

Les thèmes à blocs et le bloc Galerie produit peuvent encore afficher les images autrement, et tout thème peut redimensionner une image en CSS. Après chaque changement, regardez donc la vraie page boutique et une fiche produit sur téléphone et sur ordinateur, pas seulement les chiffres.

Le recadrage des miniatures propose trois options. 1:1 rend chaque image de catalogue carrée. Personnalisé vous laisse saisir un ratio, par exemple 3:4 pour du portrait. Non recadré affiche chaque image telle quelle, ce qui rend la grille irrégulière si vos photos n'ont pas toutes la même forme.

En mode, le recadrage décide si la tête et les chaussures restent dans le cadre. WooCommerce recadre depuis le centre : une photo de mannequin en 3:4 coupée en carré perd le haut de la tête et les pieds. Choisissez un système : soit chaque image principale est prise ou exportée exactement au ratio réglé, soit vous gardez le 1:1 en laissant de la place au-dessus de la tête et sous les chaussures.

Quel que soit votre choix, gardez la même taille image produit WooCommerce et le même ratio pour la première image de chaque produit. Un produit carré au milieu de trois produits en portrait, c'est ce qui donne l'impression d'une page catégorie cassée. Pour la même décision sur Shopify, lisez taille image produit Shopify.

Le flou a en général trois causes, selon le guide WooCommerce sur les images floues : le fichier envoyé est trop petit, les réglages de taille sont inférieurs à ce qu'affiche le thème, ou les miniatures n'ont pas été régénérées après un changement. La solution suit le même ordre : un original plus grand, une largeur d'image principale au moins égale à celle du thème, puis la régénération.

Trop grande peut vouloir dire deux choses. Si l'image remplit l'écran ou repousse le texte, c'est le CSS du thème qui fixe la taille affichée : un réglage du thème, pas de WooCommerce. Si la page est lente, ce sont les fichiers qui pèsent trop : une photo de 6 Mo sortie du téléphone dépasse de loin ce dont une fiche produit a besoin. Redimensionnez et compressez avant l'envoi.

Gardez aussi des fonds et une lumière cohérents pour que la grille ressemble à une seule boutique, même avec les bonnes tailles. Notre guide du fond pour photo produit traite cette partie.

Le plus dur, ce n'est pas de régler la taille image produit WooCommerce, c'est de faire entrer chaque produit dans le même cadre. Photos à plat, sur cintre, photos de fournisseurs : toutes ont une forme différente. Avec la photo produit IA avec mannequin, vous envoyez une photo prise au téléphone et choisissez le ratio avant de générer : 3:4, 2:3, 1:1, 4:5 ou 9:16. Le résultat est coupé exactement à ce ratio, donc une boutique en 1:1 reçoit des carrés et un recadrage personnalisé en 3:4 reçoit du 3:4.

Garmo fait porter le vêtement à l'un de ses 42 mannequins prêts (22 femmes et 20 hommes), en studio, en rue ou en décor éditorial, et une série de trois est prête en une minute environ. Pour une tenue complète photographiée ensemble, utilisez habiller un mannequin IA ; pour des vêtements pris du dessus, la photo à plat sur mannequin IA part de n'importe quelle vue de haut.

Vérifiez la taille en pixels de chaque téléchargement avant l'envoi, gardez dans la galerie votre propre photo du vrai produit à côté de la photo portée, et comparez couleurs et détails avec le vêtement. Toute la méthode au téléphone est dans comment faire des photos produit avec un téléphone.