{"id":23012,"date":"2026-08-30T17:02:39","date_gmt":"2026-08-30T15:02:39","guid":{"rendered":"https:\/\/www.curiaweb.ch\/?post_type=docs&#038;p=23012"},"modified":"2026-08-30T17:03:49","modified_gmt":"2026-08-30T15:03:49","password":"","slug":"images-de-produits-galerie-de-produits","status":"publish","type":"docs","link":"https:\/\/www.curiaweb.ch\/fr\/hilfe\/cms-online-shops\/produktbilder-produktgalerie\/","title":{"rendered":"Utiliser des images de produits et des galeries de produits dans WooCommerce"},"content":{"rendered":"<p class=\"wp-block-paragraph\">Les images de produits comptent parmi les informations les plus importantes d'une boutique en ligne. Les clients ne peuvent pas prendre un produit en main et l'examiner sous tous les angles. De bonnes images aident donc \u00e0 pr\u00e9senter le produit de mani\u00e8re aussi r\u00e9aliste et compr\u00e9hensible que possible.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">WooCommerce fait la distinction entre le <strong>Image du produit<\/strong> et le <strong>Galerie de produits<\/strong>. L'image du produit est l'image principale d'un produit. Vous pouvez ajouter des images suppl\u00e9mentaires via la galerie.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Si vous \u00eates en train de cr\u00e9er votre premier produit, vous trouverez l'int\u00e9gralit\u00e9 de la proc\u00e9dure dans l'article <a href=\"\/fr\/aide\/boutiques-en-ligne-cms\/woocommerce\/creer-un-produit\/\">Cr\u00e9er le premier produit dans WooCommerce<\/a>.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>En bref :<\/strong> L'image du produit est l'image principale de votre produit. La galerie de produits compl\u00e8te cette image principale avec d'autres vues, des plans de d\u00e9tail ou d'autres images utiles.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Image de produit et galerie de produits \u2013 quelle est la diff\u00e9rence ?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Das <strong>Image du produit<\/strong> est l'image principale d'un produit WooCommerce. Elle est utilis\u00e9e par WooCommerce \u00e0 divers endroits, par exemple sur la page produit et dans les aper\u00e7us de produits.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Le d\u00e9 <strong>Galerie de produits<\/strong> contient des images suppl\u00e9mentaires du m\u00eame produit.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Pour une tasse de caf\u00e9, la r\u00e9partition pourrait par exemple se pr\u00e9senter ainsi :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Image du produit\n\u2514\u2500\u2500 Tasse de profil de face\n\nGalerie de produits\n\u251c\u2500\u2500 Vue lat\u00e9rale\n\u251c\u2500\u2500 Vue de dessus\n\u251c\u2500\u2500 Gros plan sur le mat\u00e9riau\n\u2514\u2500\u2500 Tasse en cours d'utilisation\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">La galerie ne remplace donc pas l'image du produit. Elle la compl\u00e8te.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">D\u00e9finir l'image du produit<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Dans l'administration de WordPress, ouvrez le produit que vous souhaitez modifier.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Selon l'interface WordPress et WooCommerce que vous utilisez, vous trouverez dans l'\u00e9diteur de produits une section pour le <strong>Image du produit<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Cliquez l\u00e0 sur la fonction pour d\u00e9finir l'image du produit. Ensuite, la m\u00e9diath\u00e8que WordPress s'ouvrira.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Vous pouvez maintenant soit s\u00e9lectionner une image existante, soit t\u00e9l\u00e9charger un nouveau fichier image.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">S\u00e9lectionnez l'image souhait\u00e9e et confirmez la s\u00e9lection. L'image sera ensuite utilis\u00e9e comme image principale du produit.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Astuce<\/strong> Choisissez comme image principale une prise de vue sur laquelle le produit est imm\u00e9diatement et clairement reconnaissable. Une prise de vue en tr\u00e8s gros plan convient g\u00e9n\u00e9ralement mieux pour la galerie que pour l'image principale du produit.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">T\u00e9l\u00e9charger une nouvelle image de produit<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Si l'image souhait\u00e9e n'est pas encore pr\u00e9sente dans WordPress, tu peux la t\u00e9l\u00e9charger directement lors de la d\u00e9finition de l'image du produit.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Le fichier est ainsi import\u00e9 dans la m\u00e9diath\u00e8que WordPress et peut ensuite y \u00eatre g\u00e9r\u00e9.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Avant le t\u00e9l\u00e9chargement, assurez-vous que l'image est adapt\u00e9e \u00e0 une utilisation sur le Web. De tr\u00e8s grands fichiers d'image peuvent occuper un espace de stockage et entra\u00eener un transfert de donn\u00e9es inutilement \u00e9lev\u00e9s, et nuire au temps de chargement d'une page produit.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Le fichier image ne devrait donc pas simplement \u00eatre repris tel quel d'un appareil photo ou d'un original haute r\u00e9solution si cette r\u00e9solution n'est pas du tout n\u00e9cessaire pour le site web.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Quel format d'image dois-je utiliser ?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">WordPress prend en charge diff\u00e9rents formats d'image. Pour les photos de produits normales, le JPEG, le WebP ou \u2013 selon l'image et l'environnement utilis\u00e9 \u2013 d'autres formats Web modernes entrent souvent en ligne de compte. Le PNG est particuli\u00e8rement utile lorsque la transparence est requise, par exemple.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Le format le mieux adapt\u00e9 d\u00e9pend du contenu de l'image et de l'utilisation souhait\u00e9e.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Pour une photo de produit classique avec beaucoup de couleurs et de d\u00e9tails, un format photo avec une bonne compression est judicieux. Pour les graphiques, les logos ou les images avec un fond transparent, d'autres formats peuvent \u00eatre plus appropri\u00e9s.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>Important :<\/strong> Ce n'est pas seulement l'extension du fichier qui d\u00e9termine un bon temps de chargement. Les dimensions de l'image, la compression et la taille de fichier r\u00e9ellement transf\u00e9r\u00e9e sont \u00e9galement d\u00e9terminantes.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Quelle doit \u00eatre la taille d'une image de produit ?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Il n'y a pas de taille de pixel unique qui convienne \u00e0 toutes les boutiques WooCommerce.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">La taille d'image requise d\u00e9pend entre autres du th\u00e8me utilis\u00e9, de la structure de la page produit, de l'affichage du zoom souhait\u00e9 et de la taille de l'\u00e9cran.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">WooCommerce recommande une taille d'origine suffisante pour les images de produits et indique dans sa documentation actuelle au moins <strong>800 \u00d7 800 pixels<\/strong> comme point de d\u00e9part judicieux. Des images plus grandes peuvent \u00eatre n\u00e9cessaires ou judicieuses, en particulier pour les fonctions de zoom.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Cela ne signifie pas pour autant que chaque image doive \u00eatre t\u00e9l\u00e9charg\u00e9e le plus grand possible.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Une image de produit doit \u00eatre suffisamment grande pour que le produit puisse \u00eatre affich\u00e9 nettement, mais pas inutilement grande.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Exemple pratique :<\/strong> Si l'image de votre produit n'est affich\u00e9e qu'\u00e0 une largeur de quelques centaines de pixels sur le site web, un original de 6000 \u00d7 4000 pixels, par exemple, est dans de nombreux cas inutilement grand. L'image doit \u00eatre ramen\u00e9e \u00e0 une taille raisonnable avant ou pendant la pr\u00e9paration pour le web.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Utiliser des proportions d'image uniformes<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Pour un rendu sobre et professionnel, vous devez utiliser des proportions d'images aussi uniformes que possible pour des produits comparables.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Par exemple, si une image de produit est carr\u00e9e, la suivante extr\u00eamement haute et la troisi\u00e8me tr\u00e8s large, une vue d'ensemble des produits peut para\u00eetre d\u00e9sordonn\u00e9e.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Une structure uniforme pourrait par exemple \u00eatre :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Produit A \u2192 quadratique\nProduit B \u2192 quadratique\nProduit C \u2192 quadratique\nProduit D \u2192 quadratique\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Cela ne signifie pas que chaque image originale doit \u00eatre exactement identique. L'important est que les images de votre boutique soient coh\u00e9rentes et qu'aucun d\u00e9tail important du produit ne soit perdu en raison de cadrages diff\u00e9rents.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">La fa\u00e7on dont WooCommerce d\u00e9coupe ou affiche r\u00e9ellement les images d\u00e9pend \u00e9galement du th\u00e8me et des param\u00e8tres de la boutique utilis\u00e9s.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Ne pas couper les produits trop profond\u00e9ment<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Le produit principal doit \u00eatre repr\u00e9sent\u00e9 enti\u00e8rement sur l'image ou du moins de mani\u00e8re \u00e0 ce qu'un client comprenne imm\u00e9diatement ce qui est propos\u00e9.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Si WooCommerce ou ton th\u00e8me recadre automatiquement les images de aper\u00e7u, tu dois par cons\u00e9quent v\u00e9rifier si des parties importantes du produit sont coup\u00e9es.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">C'est particuli\u00e8rement pertinent pour les produits tr\u00e8s hauts ou tr\u00e8s larges.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Utiliser la galerie de produits<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Une seule image de produit ne suffit pas pour de nombreux produits.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u00c0 propos de <strong>Galerie de produits<\/strong> Pouvez-vous ajouter des prises de vue suppl\u00e9mentaires.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ouvrez pour cela la section de la galerie de produits dans l'\u00e9diteur de produits et s\u00e9lectionnez la fonction d'ajout d'images.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ici aussi, vous pouvez s\u00e9lectionner des images existantes de la m\u00e9diath\u00e8que WordPress ou en t\u00e9l\u00e9charger de nouvelles.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Vous pouvez s\u00e9lectionner plusieurs images pour la galerie.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Quelles images vont dans la galerie ?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">La galerie devait fournir des informations suppl\u00e9mentaires au client et ne pas simplement montrer cinq images presque identiques.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Selon le produit, par exemple, les \u00e9l\u00e9ments suivants peuvent \u00eatre pertinents :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>autres vues du produit<\/li>\n\n\n\n<li>Arri\u00e8re ou dessous<\/li>\n\n\n\n<li>Gros plans<\/li>\n\n\n\n<li>Connexions ou \u00e9l\u00e9ments de commande<\/li>\n\n\n\n<li>Structure du mat\u00e9riau<\/li>\n\n\n\n<li>Comparaison de tailles<\/li>\n\n\n\n<li>Produit en cours d'utilisation<\/li>\n\n\n\n<li>Emballage ou contenu de la livraison, si cela est pertinent pour l'achat<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Pour un sac \u00e0 dos, par exemple, on pourrait montrer le devant, le dos, l'int\u00e9rieur, le syst\u00e8me de portage et les diff\u00e9rents compartiments.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Sur un appareil \u00e9lectronique, les connexions et les \u00e9l\u00e9ments de commande peuvent \u00eatre importants.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">La question d\u00e9cisive est la suivante : <strong>Quelle vue aide un client \u00e0 prendre sa d\u00e9cision d'achat ?<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Modifier l'ordre des images de la galerie<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Les images de la galerie de produits peuvent \u00eatre r\u00e9organis\u00e9es par glisser-d\u00e9poser dans l'\u00e9diteur de produits WooCommerce.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Faites glisser une image vers la position souhait\u00e9e, puis enregistrez ou mettez \u00e0 jour le produit.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Classez les images de mani\u00e8re aussi logique que possible.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Par exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Image principale\n\u2193\nDeuxi\u00e8me vue d'ensemble\n\u2193\nVue lat\u00e9rale\n\u2193\nGros plan\n\u2193\nProduit en utilisation\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Cela permet au client d'obtenir un ordre coh\u00e9rent en parcourant les images.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Supprimer l'image de la galerie de produits<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Lorsqu'une image n'est plus n\u00e9cessaire, vous pouvez la supprimer de la galerie de produits.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">La suppression d'une image de la galerie ne signifie pas automatiquement que le fichier image est \u00e9galement supprim\u00e9 de la m\u00e9diath\u00e8que WordPress.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Le fichier peut toujours \u00eatre pr\u00e9sent dans WordPress et \u00eatre utilis\u00e9 \u00e0 d'autres endroits du site Web.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Important :<\/strong> Ne supprimez pas pr\u00e9cipitamment un fichier image directement de la m\u00e9diath\u00e8que. Le fait que vous n'en ayez plus besoin pour ce produit ne signifie pas qu'il n'est pas utilis\u00e9 ailleurs sur votre site web.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Remplacer l'image du produit<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Si tu souhaites modifier l'image principale d'un produit, tu supprimes ou remplaces l'attribution pr\u00e9c\u00e9dente et tu en s\u00e9lectionnes une autre dans la m\u00e9diath\u00e8que ou tu en t\u00e9l\u00e9charges une nouvelle.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Enregistrez ou mettez ensuite \u00e0 jour le produit.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">V\u00e9rifiez ensuite \u00e0 la fois la page produit et une vue d'ensemble des produits. Vous saurez ainsi si la nouvelle image est correctement rogn\u00e9e et affich\u00e9e dans les deux cas.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Que devient l'ancienne image du produit ?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Lorsque vous attribuez une nouvelle image principale \u00e0 un produit, le fichier image pr\u00e9c\u00e9demment utilis\u00e9 n'est pas automatiquement supprim\u00e9 de la m\u00e9diath\u00e8que WordPress.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">C'est judicieux, car le m\u00eame fichier multim\u00e9dia est peut-\u00eatre utilis\u00e9 ailleurs.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Si vous souhaitez supprimer ult\u00e9rieurement de vieilles images de la m\u00e9diath\u00e8que, vous devez donc v\u00e9rifier au pr\u00e9alable si elles ne sont effectivement plus n\u00e9cessaires.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Ajouter le texte alternatif pour les images de produits<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">WordPress propose dans la m\u00e9diath\u00e8que pour les images un champ pour le <strong>Texte alternatif<\/strong> ou texte alternatif.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Le texte alternatif d\u00e9crit le contenu ou la fonction d'une image dans des situations o\u00f9 l'image ne peut pas \u00eatre per\u00e7ue visuellement. Il est particuli\u00e8rement important pour l'accessibilit\u00e9.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Un texte alternatif pertinent d\u00e9crit le produit r\u00e9ellement visible de mani\u00e8re aussi concise et compr\u00e9hensible que possible.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Sac \u00e0 dos de randonn\u00e9e noir avec compartiment principal ouvert\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Moins utile serait :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>bild123.jpg\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">ou une juxtaposition artificielle de mots-cl\u00e9s.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>R\u00e8gle de base :<\/strong> D\u00e9crivez ce qui est pertinent de voir sur l'image. R\u00e9digez le texte alternatif pour les personnes et non sous forme de liste du plus grand nombre de mots-cl\u00e9s possible.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Est-ce que chaque image de galerie doit avoir le m\u00eame texte ALT ?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Non. Si des images diff\u00e9rentes montrent des vues diff\u00e9rentes et qu'un texte alternatif est judicieux pour ces images, le texte doit \u00e9galement d\u00e9crire la vue respective.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Par exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Image principale :\nSac \u00e0 dos de randonn\u00e9e noir de face\n\nImage de galerie :\nSac \u00e0 dos de randonn\u00e9e noir avec le compartiment principal ouvert\n\nImage de galerie :\nArri\u00e8re du sac \u00e0 dos de randonn\u00e9e noir avec syst\u00e8me de portage\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">C'est ainsi que chaque texte alternatif d\u00e9crit r\u00e9ellement l'image correspondante.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Images de produits pour les produits variables<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Chez <a href=\"\/fr\/aide\/boutiques-en-ligne-cms\/woocommerce\/produits-variables-variantes\/\">produits variables<\/a> Oui, WooCommerce permet d'attribuer des images sp\u00e9cifiques \u00e0 chaque variante.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">C'est par exemple tr\u00e8s utile pour diff\u00e9rentes couleurs.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Un t-shirt pourrait \u00eatre configur\u00e9 ainsi :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Variante Noir\n\u2192 Image du t-shirt noir\n\nVariante Blanc\n\u2192 Image du t-shirt blanc\n\nVariante Rouge\n\u2192 Image du t-shirt rouge\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Lorsqu'un client s\u00e9lectionne une variante, WooCommerce peut afficher l'image associ\u00e9e \u00e0 cette variante.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Cela permet au client de voir non seulement le nom de la couleur choisie, mais aussi la vue produit correspondante.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Une image de variante ne remplace pas automatiquement une galerie compl\u00e8te par variante<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Le c\u0153ur de WooCommerce permet d'attribuer une image propre \u00e0 une variante.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">En revanche, une galerie enti\u00e8rement s\u00e9par\u00e9e avec plusieurs images pour chaque variante individuelle ne fait pas partie de la fonctionnalit\u00e9 de base des variantes de WooCommerce Core.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Si, par exemple, vous avez besoin de cinq images de galerie distinctes pour chaque couleur, une extension suppl\u00e9mentaire ou une fonctionnalit\u00e9 correspondante du th\u00e8me ou du syst\u00e8me de boutique utilis\u00e9 peut s'av\u00e9rer n\u00e9cessaire.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Important :<\/strong> N'installez pas n'importe quel plugin de galerie juste parce que vous avez besoin d'images suppl\u00e9mentaires. V\u00e9rifiez d'abord si votre th\u00e8me ou une extension d\u00e9j\u00e0 pr\u00e9sente fournit d\u00e9j\u00e0 la fonction souhait\u00e9e.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Que montre WooCommerce sur la page produit ?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">WooCommerce fournit les fonctionnalit\u00e9s techniques des images de produits et de la galerie. Cependant, l'affichage exact sur le frontend est fortement influenc\u00e9 par le th\u00e8me utilis\u00e9 ou par la structure de la page produit.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Selon la boutique, il peut y avoir, par exemple :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>image principale<\/li>\n\n\n\n<li>petites vignettes de la galerie<\/li>\n\n\n\n<li>Fonction de zoom<\/li>\n\n\n\n<li>Bo\u00eete \u00e0 lumi\u00e8re<\/li>\n\n\n\n<li>Curseur ou carrousel<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">C'est pourquoi deux boutiques WooCommerce avec les m\u00eames images de produits peuvent avoir un aspect diff\u00e9rent.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">L'image produit a l'air bien dans le backend, mais pas dans la boutique<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Si une image s'affiche correctement dans la m\u00e9diath\u00e8que WordPress, mais qu'elle est mal pr\u00e9sent\u00e9e sur la page produit ou dans la vue d'ensemble de la boutique, le fichier d'origine n'est pas forc\u00e9ment endommag\u00e9.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Les causes possibles sont par exemple :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>le th\u00e8me utilise un recadrage d'image sp\u00e9cifique,<\/li>\n\n\n\n<li>Les images d'aper\u00e7u des produits ont des proportions diff\u00e9rentes,<\/li>\n\n\n\n<li>l'image est trop petite pour l'affichage souhait\u00e9,<\/li>\n\n\n\n<li>un constructeur de pages modifie la mise en page du produit,<\/li>\n\n\n\n<li>Les donn\u00e9es d'image ou de page en cache affichent encore une version ant\u00e9rieure.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">V\u00e9rifiez donc d'abord si une seule repr\u00e9sentation sp\u00e9cifique est concern\u00e9e.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Images de produits floues<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Une petite image de d\u00e9part peut para\u00eetre floue si elle est affich\u00e9e beaucoup plus grand sur la page produit.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Image originale :\n300 \u00d7 300 pixels\n\nAffichage sur grand \u00e9cran :\nnettement plus grand que l'original\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Le navigateur ne peut pas simplement restituer les informations d'image manquantes. L'image est agrandie et peut de ce fait para\u00eetre floue.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Utilisez par cons\u00e9quent des images sources ayant une r\u00e9solution suffisante.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Images de produits trop grandes<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">L'autre extr\u00e9misme est constitu\u00e9 par des fichiers originaux inutilement volumineux.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Une photo de plusieurs milliers de pixels de large et d'une tr\u00e8s grande taille de fichier peut \u00eatre surdimensionn\u00e9e pour une pr\u00e9sentation de produit normale.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Bien que WordPress g\u00e9n\u00e8re diff\u00e9rentes tailles d'images lors du t\u00e9l\u00e9chargement, vous devez tout de m\u00eame pr\u00e9parer judicieusement vos images sources pour le Web.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">En particulier pour une boutique avec de nombreux produits, des images mal optimis\u00e9es peuvent repr\u00e9senter une part consid\u00e9rable du volume de donn\u00e9es transf\u00e9r\u00e9.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Images de produits et temps de chargement<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Les pages de produits contiennent souvent plusieurs images haute r\u00e9solution. Par cons\u00e9quent, les images peuvent avoir un impact important sur le temps de chargement.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Sont particuli\u00e8rement importants :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>dimensions d'image appropri\u00e9es<\/li>\n\n\n\n<li>compression appropri\u00e9e<\/li>\n\n\n\n<li>format de fichier appropri\u00e9<\/li>\n\n\n\n<li>ne pas charger plus d'images que n\u00e9cessaire<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Si tu veux savoir \u00e0 quelle vitesse ta page produit se charge r\u00e9ellement, tu peux mesurer le temps de chargement avec les m\u00e9thodes de l'article <a href=\"\/fr\/aide\/surveillance-seo\/mesurer-le-temps-de-chargement-dun-site-web\/\">Mesurer le temps de chargement d'un site web<\/a> v\u00e9rifier.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Pour une analyse technique suppl\u00e9mentaire, vous pouvez \u00e9galement <a href=\"\/fr\/aide\/surveillance-seo\/google-pagespeed-insights\/\">Google PageSpeed Insights<\/a> utiliser.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Nommer judicieusement les fichiers d'images<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Il est judicieux de nommer clairement les fichiers d'images avant m\u00eame de les t\u00e9l\u00e9charger.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Au lieu de :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>IMG_8472.jpg\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">peut par exemple \u00eatre utilis\u00e9 :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>wanderrucksack-schwarz-vorne.jpg\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Cela vous facilitera \u00e9galement la gestion ult\u00e9rieure dans une grande m\u00e9diath\u00e8que.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Lorsque des centaines d'images de produits portent uniquement des noms tels que DSC_0012, IMG_4821 ou final-neu-3, la recherche d'un fichier sp\u00e9cifique devient inutilement difficile.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Ne pas t\u00e9l\u00e9charger inutilement plusieurs images en double<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Si un fichier image est d\u00e9j\u00e0 pr\u00e9sent dans la m\u00e9diath\u00e8que WordPress et doit \u00eatre utilis\u00e9 pour un autre produit, vous n'\u00eates pas oblig\u00e9 de le t\u00e9l\u00e9charger \u00e0 nouveau.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Vous pouvez s\u00e9lectionner \u00e0 nouveau des m\u00e9dias existants.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Cela \u00e9vite les copies inutiles du m\u00eame fichier et permet de garder la m\u00e9diath\u00e8que plus organis\u00e9e.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">V\u00e9rifier les images de produits apr\u00e8s l'enregistrement<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Apr\u00e8s avoir ajout\u00e9 ou modifi\u00e9 des images de produits, vous devez enregistrer ou mettre puis \u00e0 jour le produit, puis ouvrir la page produit r\u00e9elle.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">V\u00e9rifiez particuli\u00e8rement l\u00e0-bas :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>L'image principale correcte s'affiche-t-elle ?<\/li>\n\n\n\n<li>Le produit est-il complet et nettement visible ?<\/li>\n\n\n\n<li>Toutes les images de la galerie sont-elles affich\u00e9es ?<\/li>\n\n\n\n<li>L'ordre a-t-il du sens ?<\/li>\n\n\n\n<li>Est-ce que la s\u00e9lection d'images ou la galerie fonctionne ?<\/li>\n\n\n\n<li>Les images des variantes sont-elles chang\u00e9es correctement ?<\/li>\n\n\n\n<li>L'affichage est-il \u00e9galement correct sur un smartphone ?<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">V\u00e9rifiez \u00e9galement un aper\u00e7u des produits ou une cat\u00e9gorie. L'image principale peut y \u00eatre recadr\u00e9e diff\u00e9remment ou affich\u00e9e dans une taille diff\u00e9rente de celle de la page de produit individuelle.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Un exemple simple d'une bonne structure d'image<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Prenons un sac \u00e0 dos de randonn\u00e9e noir.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Image<\/th><th>T\u00e2che<\/th><\/tr><\/thead><tbody><tr><td>Image principale<\/td><td>Montrer le sac \u00e0 dos enti\u00e8rement de face ou l\u00e9g\u00e8rement de c\u00f4t\u00e9<\/td><\/tr><tr><td>Image de la galerie 1<\/td><td>Afficher le dos et le syst\u00e8me de portage<\/td><\/tr><tr><td>Image de la galerie 2<\/td><td>Afficher le compartiment principal ouvert<\/td><\/tr><tr><td>Image de la galerie 3<\/td><td>Montrer les poches et les fermetures \u00e9clair en d\u00e9tail<\/td><\/tr><tr><td>Image de la galerie 4<\/td><td>montrer le sac \u00e0 dos port\u00e9 ou en cours d'utilisation<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Ainsi, chaque image r\u00e9pond \u00e0 une autre question possible du client.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Ce qu'il faut \u00e9viter avec les images de produits<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Certains probl\u00e8mes typiques peuvent \u00eatre \u00e9vit\u00e9s d\u00e8s la configuration :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>images de sortie floues ou trop petites<\/li>\n\n\n\n<li>fichiers d'images inutilement gigantesques<\/li>\n\n\n\n<li>proportions d'image totalement diff\u00e9rentes au sein d'une vue d'ensemble des produits<\/li>\n\n\n\n<li>plusieurs images de galerie presque identiques et sans valeur informative suppl\u00e9mentaire<\/li>\n\n\n\n<li>images de variantes incorrectes<\/li>\n\n\n\n<li>noms de fichiers incompr\u00e9hensibles<\/li>\n\n\n\n<li>Textes alternatifs qui consistent uniquement en une liste de termes de recherche<\/li>\n\n\n\n<li>suppression h\u00e2tive de fichiers pr\u00e9tendument inutilis\u00e9s de la m\u00e9diath\u00e8que<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Ce qui importe, ce n'est pas d'utiliser le plus d'images possible. Les images doivent aider le client \u00e0 \u00e9valuer le produit le mieux possible.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Quelle est la suite ?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Apr\u00e8s avoir configur\u00e9 les informations sur les produits, les variantes, les caract\u00e9ristiques et les images, vous devez vous occuper du stock disponible.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dans le prochain article, nous expliquons donc comment tu <a href=\"\/fr\/aide\/boutiques-en-ligne-cms\/woocommerce\/lagerbestand-sku-verwalten\/\">G\u00e9rer les stocks, les SKU et le statut des livraisons dans WooCommerce<\/a>. Nous y examinerons entre autres la gestion automatique des stocks, l'\u00e9tat des stocks, les reliquats de commande et la gestion des stocks de variantes.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">R\u00e9sum\u00e9<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Das <strong>Image du produit<\/strong> est l'image principale d'un produit WooCommerce. Via <strong>Galerie de produits<\/strong> peux-tu ajouter des vues suppl\u00e9mentaires, des gros plans et d'autres images utiles.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Utilisez des images suffisamment grandes et adapt\u00e9es au Web, sans t\u00e9l\u00e9charger de fichiers originaux inutilement immenses. Des proportions uniformes garantissent un aspect visuel plus harmonieux, en particulier dans les aper\u00e7us de produits.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Les images de la galerie peuvent \u00eatre tri\u00e9es par glisser-d\u00e9poser dans WooCommerce. La suppression d'une image d'une galerie de produits ne supprime pas automatiquement le fichier de la m\u00e9diath\u00e8que WordPress.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Pour les produits variables, il est possible d'attribuer une image sp\u00e9cifique \u00e0 chaque variante. Cependant, une galerie enti\u00e8rement s\u00e9par\u00e9e pour chaque variante ne fait pas partie des fonctionnalit\u00e9s de base du c\u0153ur de WooCommerce.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">V\u00e9rifiez les images des produits directement dans la boutique apr\u00e8s chaque modification majeure : sur la page produit, dans les aper\u00e7us de produits et sur un smartphone.<\/p>","protected":false},"excerpt":{"rendered":"<p>Produktbilder geh\u00f6ren zu den wichtigsten Informationen eines Online-Shops. Kunden k\u00f6nnen ein Produkt nicht in die Hand nehmen und von allen Seiten betrachten. Gute Bilder helfen deshalb dabei, das Produkt m\u00f6glichst realistisch und verst\u00e4ndlich zu pr\u00e4sentieren. WooCommerce unterscheidet dabei zwischen dem Produktbild und der Produktgalerie. Das Produktbild ist das Hauptbild eines Produkts. \u00dcber die Galerie kannst [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_joinchat":[],"footnotes":""},"doc_category":[83,89],"doc_tag":[],"class_list":["post-23012","docs","type-docs","status-publish","hentry","doc_category-cms-online-shops","doc_category-woocommerce"],"year_month":"2026-09","word_count":2528,"total_views":"8","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"Silvio Mazenauer","author_nicename":"admin-curia","author_url":"https:\/\/www.curiaweb.ch\/fr\/author\/admin-curia\/"},"doc_category_info":[{"term_name":"CMS &amp; Online-Shops","term_url":"https:\/\/www.curiaweb.ch\/fr\/hilfe-kategorie\/cms-online-shops\/"},{"term_name":"WooCommerce","term_url":"https:\/\/www.curiaweb.ch\/fr\/hilfe-kategorie\/cms-online-shops\/woocommerce\/"}],"doc_tag_info":[],"knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/www.curiaweb.ch\/fr\/wp-json\/wp\/v2\/docs\/23012","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.curiaweb.ch\/fr\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/www.curiaweb.ch\/fr\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.curiaweb.ch\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.curiaweb.ch\/fr\/wp-json\/wp\/v2\/comments?post=23012"}],"version-history":[{"count":1,"href":"https:\/\/www.curiaweb.ch\/fr\/wp-json\/wp\/v2\/docs\/23012\/revisions"}],"predecessor-version":[{"id":23014,"href":"https:\/\/www.curiaweb.ch\/fr\/wp-json\/wp\/v2\/docs\/23012\/revisions\/23014"}],"wp:attachment":[{"href":"https:\/\/www.curiaweb.ch\/fr\/wp-json\/wp\/v2\/media?parent=23012"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/www.curiaweb.ch\/fr\/wp-json\/wp\/v2\/doc_category?post=23012"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/www.curiaweb.ch\/fr\/wp-json\/wp\/v2\/doc_tag?post=23012"}],"curies":[{"name":"Bien jou\u00e9","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}