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 à présenter le produit de manière aussi réaliste et compréhensible que possible.
WooCommerce fait la distinction entre le Image du produit et le Galerie de produits. L'image du produit est l'image principale d'un produit. Vous pouvez ajouter des images supplémentaires via la galerie.
Si vous êtes en train de créer votre premier produit, vous trouverez l'intégralité de la procédure dans l'article Créer le premier produit dans WooCommerce.
En bref : L'image du produit est l'image principale de votre produit. La galerie de produits complète cette image principale avec d'autres vues, des plans de détail ou d'autres images utiles.
Image de produit et galerie de produits – quelle est la différence ? #
Das Image du produit est l'image principale d'un produit WooCommerce. Elle est utilisée par WooCommerce à divers endroits, par exemple sur la page produit et dans les aperçus de produits.
Le dé Galerie de produits contient des images supplémentaires du même produit.
Pour une tasse de café, la répartition pourrait par exemple se présenter ainsi :
Image du produit
└── Tasse de profil de face
Galerie de produits
├── Vue latérale
├── Vue de dessus
├── Gros plan sur le matériau
└── Tasse en cours d'utilisation
La galerie ne remplace donc pas l'image du produit. Elle la complète.
Définir l'image du produit #
Dans l'administration de WordPress, ouvrez le produit que vous souhaitez modifier.
Selon l'interface WordPress et WooCommerce que vous utilisez, vous trouverez dans l'éditeur de produits une section pour le Image du produit.
Cliquez là sur la fonction pour définir l'image du produit. Ensuite, la médiathèque WordPress s'ouvrira.
Vous pouvez maintenant soit sélectionner une image existante, soit télécharger un nouveau fichier image.
Sélectionnez l'image souhaitée et confirmez la sélection. L'image sera ensuite utilisée comme image principale du produit.
Astuce Choisissez comme image principale une prise de vue sur laquelle le produit est immédiatement et clairement reconnaissable. Une prise de vue en très gros plan convient généralement mieux pour la galerie que pour l'image principale du produit.
Télécharger une nouvelle image de produit #
Si l'image souhaitée n'est pas encore présente dans WordPress, tu peux la télécharger directement lors de la définition de l'image du produit.
Le fichier est ainsi importé dans la médiathèque WordPress et peut ensuite y être géré.
Avant le téléchargement, assurez-vous que l'image est adaptée à une utilisation sur le Web. De très grands fichiers d'image peuvent occuper un espace de stockage et entraîner un transfert de données inutilement élevés, et nuire au temps de chargement d'une page produit.
Le fichier image ne devrait donc pas simplement être repris tel quel d'un appareil photo ou d'un original haute résolution si cette résolution n'est pas du tout nécessaire pour le site web.
Quel format d'image dois-je utiliser ? #
WordPress prend en charge différents formats d'image. Pour les photos de produits normales, le JPEG, le WebP ou – selon l'image et l'environnement utilisé – d'autres formats Web modernes entrent souvent en ligne de compte. Le PNG est particulièrement utile lorsque la transparence est requise, par exemple.
Le format le mieux adapté dépend du contenu de l'image et de l'utilisation souhaitée.
Pour une photo de produit classique avec beaucoup de couleurs et de détails, 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 être plus appropriés.
Important : Ce n'est pas seulement l'extension du fichier qui détermine un bon temps de chargement. Les dimensions de l'image, la compression et la taille de fichier réellement transférée sont également déterminantes.
Quelle doit être la taille d'une image de produit ? #
Il n'y a pas de taille de pixel unique qui convienne à toutes les boutiques WooCommerce.
La taille d'image requise dépend entre autres du thème utilisé, de la structure de la page produit, de l'affichage du zoom souhaité et de la taille de l'écran.
WooCommerce recommande une taille d'origine suffisante pour les images de produits et indique dans sa documentation actuelle au moins 800 × 800 pixels comme point de départ judicieux. Des images plus grandes peuvent être nécessaires ou judicieuses, en particulier pour les fonctions de zoom.
Cela ne signifie pas pour autant que chaque image doive être téléchargée le plus grand possible.
Une image de produit doit être suffisamment grande pour que le produit puisse être affiché nettement, mais pas inutilement grande.
Exemple pratique : Si l'image de votre produit n'est affichée qu'à une largeur de quelques centaines de pixels sur le site web, un original de 6000 × 4000 pixels, par exemple, est dans de nombreux cas inutilement grand. L'image doit être ramenée à une taille raisonnable avant ou pendant la préparation pour le web.
Utiliser des proportions d'image uniformes #
Pour un rendu sobre et professionnel, vous devez utiliser des proportions d'images aussi uniformes que possible pour des produits comparables.
Par exemple, si une image de produit est carrée, la suivante extrêmement haute et la troisième très large, une vue d'ensemble des produits peut paraître désordonnée.
Une structure uniforme pourrait par exemple être :
Produit A → quadratique
Produit B → quadratique
Produit C → quadratique
Produit D → quadratique
Cela ne signifie pas que chaque image originale doit être exactement identique. L'important est que les images de votre boutique soient cohérentes et qu'aucun détail important du produit ne soit perdu en raison de cadrages différents.
La façon dont WooCommerce découpe ou affiche réellement les images dépend également du thème et des paramètres de la boutique utilisés.
Ne pas couper les produits trop profondément #
Le produit principal doit être représenté entièrement sur l'image ou du moins de manière à ce qu'un client comprenne immédiatement ce qui est proposé.
Si WooCommerce ou ton thème recadre automatiquement les images de aperçu, tu dois par conséquent vérifier si des parties importantes du produit sont coupées.
C'est particulièrement pertinent pour les produits très hauts ou très larges.
Utiliser la galerie de produits #
Une seule image de produit ne suffit pas pour de nombreux produits.
À propos de Galerie de produits Pouvez-vous ajouter des prises de vue supplémentaires.
Ouvrez pour cela la section de la galerie de produits dans l'éditeur de produits et sélectionnez la fonction d'ajout d'images.
Ici aussi, vous pouvez sélectionner des images existantes de la médiathèque WordPress ou en télécharger de nouvelles.
Vous pouvez sélectionner plusieurs images pour la galerie.
Quelles images vont dans la galerie ? #
La galerie devait fournir des informations supplémentaires au client et ne pas simplement montrer cinq images presque identiques.
Selon le produit, par exemple, les éléments suivants peuvent être pertinents :
- autres vues du produit
- Arrière ou dessous
- Gros plans
- Connexions ou éléments de commande
- Structure du matériau
- Comparaison de tailles
- Produit en cours d'utilisation
- Emballage ou contenu de la livraison, si cela est pertinent pour l'achat
Pour un sac à dos, par exemple, on pourrait montrer le devant, le dos, l'intérieur, le système de portage et les différents compartiments.
Sur un appareil électronique, les connexions et les éléments de commande peuvent être importants.
La question décisive est la suivante : Quelle vue aide un client à prendre sa décision d'achat ?
Modifier l'ordre des images de la galerie #
Les images de la galerie de produits peuvent être réorganisées par glisser-déposer dans l'éditeur de produits WooCommerce.
Faites glisser une image vers la position souhaitée, puis enregistrez ou mettez à jour le produit.
Classez les images de manière aussi logique que possible.
Par exemple :
Image principale
↓
Deuxième vue d'ensemble
↓
Vue latérale
↓
Gros plan
↓
Produit en utilisation
Cela permet au client d'obtenir un ordre cohérent en parcourant les images.
Supprimer l'image de la galerie de produits #
Lorsqu'une image n'est plus nécessaire, vous pouvez la supprimer de la galerie de produits.
La suppression d'une image de la galerie ne signifie pas automatiquement que le fichier image est également supprimé de la médiathèque WordPress.
Le fichier peut toujours être présent dans WordPress et être utilisé à d'autres endroits du site Web.
Important : Ne supprimez pas précipitamment un fichier image directement de la médiathèque. Le fait que vous n'en ayez plus besoin pour ce produit ne signifie pas qu'il n'est pas utilisé ailleurs sur votre site web.
Remplacer l'image du produit #
Si tu souhaites modifier l'image principale d'un produit, tu supprimes ou remplaces l'attribution précédente et tu en sélectionnes une autre dans la médiathèque ou tu en télécharges une nouvelle.
Enregistrez ou mettez ensuite à jour le produit.
Vérifiez ensuite à la fois la page produit et une vue d'ensemble des produits. Vous saurez ainsi si la nouvelle image est correctement rognée et affichée dans les deux cas.
Que devient l'ancienne image du produit ? #
Lorsque vous attribuez une nouvelle image principale à un produit, le fichier image précédemment utilisé n'est pas automatiquement supprimé de la médiathèque WordPress.
C'est judicieux, car le même fichier multimédia est peut-être utilisé ailleurs.
Si vous souhaitez supprimer ultérieurement de vieilles images de la médiathèque, vous devez donc vérifier au préalable si elles ne sont effectivement plus nécessaires.
Ajouter le texte alternatif pour les images de produits #
WordPress propose dans la médiathèque pour les images un champ pour le Texte alternatif ou texte alternatif.
Le texte alternatif décrit le contenu ou la fonction d'une image dans des situations où l'image ne peut pas être perçue visuellement. Il est particulièrement important pour l'accessibilité.
Un texte alternatif pertinent décrit le produit réellement visible de manière aussi concise et compréhensible que possible.
Exemple :
Sac à dos de randonnée noir avec compartiment principal ouvert
Moins utile serait :
bild123.jpg
ou une juxtaposition artificielle de mots-clés.
Règle de base : Décrivez ce qui est pertinent de voir sur l'image. Rédigez le texte alternatif pour les personnes et non sous forme de liste du plus grand nombre de mots-clés possible.
Est-ce que chaque image de galerie doit avoir le même texte ALT ? #
Non. Si des images différentes montrent des vues différentes et qu'un texte alternatif est judicieux pour ces images, le texte doit également décrire la vue respective.
Par exemple :
Image principale :
Sac à dos de randonnée noir de face
Image de galerie :
Sac à dos de randonnée noir avec le compartiment principal ouvert
Image de galerie :
Arrière du sac à dos de randonnée noir avec système de portage
C'est ainsi que chaque texte alternatif décrit réellement l'image correspondante.
Images de produits pour les produits variables #
Chez produits variables Oui, WooCommerce permet d'attribuer des images spécifiques à chaque variante.
C'est par exemple très utile pour différentes couleurs.
Un t-shirt pourrait être configuré ainsi :
Variante Noir
→ Image du t-shirt noir
Variante Blanc
→ Image du t-shirt blanc
Variante Rouge
→ Image du t-shirt rouge
Lorsqu'un client sélectionne une variante, WooCommerce peut afficher l'image associée à cette variante.
Cela permet au client de voir non seulement le nom de la couleur choisie, mais aussi la vue produit correspondante.
Une image de variante ne remplace pas automatiquement une galerie complète par variante #
Le cœur de WooCommerce permet d'attribuer une image propre à une variante.
En revanche, une galerie entièrement séparée avec plusieurs images pour chaque variante individuelle ne fait pas partie de la fonctionnalité de base des variantes de WooCommerce Core.
Si, par exemple, vous avez besoin de cinq images de galerie distinctes pour chaque couleur, une extension supplémentaire ou une fonctionnalité correspondante du thème ou du système de boutique utilisé peut s'avérer nécessaire.
Important : N'installez pas n'importe quel plugin de galerie juste parce que vous avez besoin d'images supplémentaires. Vérifiez d'abord si votre thème ou une extension déjà présente fournit déjà la fonction souhaitée.
Que montre WooCommerce sur la page produit ? #
WooCommerce fournit les fonctionnalités techniques des images de produits et de la galerie. Cependant, l'affichage exact sur le frontend est fortement influencé par le thème utilisé ou par la structure de la page produit.
Selon la boutique, il peut y avoir, par exemple :
- image principale
- petites vignettes de la galerie
- Fonction de zoom
- Boîte à lumière
- Curseur ou carrousel
C'est pourquoi deux boutiques WooCommerce avec les mêmes images de produits peuvent avoir un aspect différent.
L'image produit a l'air bien dans le backend, mais pas dans la boutique #
Si une image s'affiche correctement dans la médiathèque WordPress, mais qu'elle est mal présentée sur la page produit ou dans la vue d'ensemble de la boutique, le fichier d'origine n'est pas forcément endommagé.
Les causes possibles sont par exemple :
- le thème utilise un recadrage d'image spécifique,
- Les images d'aperçu des produits ont des proportions différentes,
- l'image est trop petite pour l'affichage souhaité,
- un constructeur de pages modifie la mise en page du produit,
- Les données d'image ou de page en cache affichent encore une version antérieure.
Vérifiez donc d'abord si une seule représentation spécifique est concernée.
Images de produits floues #
Une petite image de départ peut paraître floue si elle est affichée beaucoup plus grand sur la page produit.
Exemple :
Image originale :
300 × 300 pixels
Affichage sur grand écran :
nettement plus grand que l'original
Le navigateur ne peut pas simplement restituer les informations d'image manquantes. L'image est agrandie et peut de ce fait paraître floue.
Utilisez par conséquent des images sources ayant une résolution suffisante.
Images de produits trop grandes #
L'autre extrémisme est constitué par des fichiers originaux inutilement volumineux.
Une photo de plusieurs milliers de pixels de large et d'une très grande taille de fichier peut être surdimensionnée pour une présentation de produit normale.
Bien que WordPress génère différentes tailles d'images lors du téléchargement, vous devez tout de même préparer judicieusement vos images sources pour le Web.
En particulier pour une boutique avec de nombreux produits, des images mal optimisées peuvent représenter une part considérable du volume de données transféré.
Images de produits et temps de chargement #
Les pages de produits contiennent souvent plusieurs images haute résolution. Par conséquent, les images peuvent avoir un impact important sur le temps de chargement.
Sont particulièrement importants :
- dimensions d'image appropriées
- compression appropriée
- format de fichier approprié
- ne pas charger plus d'images que nécessaire
Si tu veux savoir à quelle vitesse ta page produit se charge réellement, tu peux mesurer le temps de chargement avec les méthodes de l'article Mesurer le temps de chargement d'un site web vérifier.
Pour une analyse technique supplémentaire, vous pouvez également Google PageSpeed Insights utiliser.
Nommer judicieusement les fichiers d'images #
Il est judicieux de nommer clairement les fichiers d'images avant même de les télécharger.
Au lieu de :
IMG_8472.jpg
peut par exemple être utilisé :
wanderrucksack-schwarz-vorne.jpg
Cela vous facilitera également la gestion ultérieure dans une grande médiathèque.
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écifique devient inutilement difficile.
Ne pas télécharger inutilement plusieurs images en double #
Si un fichier image est déjà présent dans la médiathèque WordPress et doit être utilisé pour un autre produit, vous n'êtes pas obligé de le télécharger à nouveau.
Vous pouvez sélectionner à nouveau des médias existants.
Cela évite les copies inutiles du même fichier et permet de garder la médiathèque plus organisée.
Vérifier les images de produits après l'enregistrement #
Après avoir ajouté ou modifié des images de produits, vous devez enregistrer ou mettre puis à jour le produit, puis ouvrir la page produit réelle.
Vérifiez particulièrement là-bas :
- L'image principale correcte s'affiche-t-elle ?
- Le produit est-il complet et nettement visible ?
- Toutes les images de la galerie sont-elles affichées ?
- L'ordre a-t-il du sens ?
- Est-ce que la sélection d'images ou la galerie fonctionne ?
- Les images des variantes sont-elles changées correctement ?
- L'affichage est-il également correct sur un smartphone ?
Vérifiez également un aperçu des produits ou une catégorie. L'image principale peut y être recadrée différemment ou affichée dans une taille différente de celle de la page de produit individuelle.
Un exemple simple d'une bonne structure d'image #
Prenons un sac à dos de randonnée noir.
| Image | Tâche |
|---|---|
| Image principale | Montrer le sac à dos entièrement de face ou légèrement de côté |
| Image de la galerie 1 | Afficher le dos et le système de portage |
| Image de la galerie 2 | Afficher le compartiment principal ouvert |
| Image de la galerie 3 | Montrer les poches et les fermetures éclair en détail |
| Image de la galerie 4 | montrer le sac à dos porté ou en cours d'utilisation |
Ainsi, chaque image répond à une autre question possible du client.
Ce qu'il faut éviter avec les images de produits #
Certains problèmes typiques peuvent être évités dès la configuration :
- images de sortie floues ou trop petites
- fichiers d'images inutilement gigantesques
- proportions d'image totalement différentes au sein d'une vue d'ensemble des produits
- plusieurs images de galerie presque identiques et sans valeur informative supplémentaire
- images de variantes incorrectes
- noms de fichiers incompréhensibles
- Textes alternatifs qui consistent uniquement en une liste de termes de recherche
- suppression hâtive de fichiers prétendument inutilisés de la médiathèque
Ce qui importe, ce n'est pas d'utiliser le plus d'images possible. Les images doivent aider le client à évaluer le produit le mieux possible.
Quelle est la suite ? #
Après avoir configuré les informations sur les produits, les variantes, les caractéristiques et les images, vous devez vous occuper du stock disponible.
Dans le prochain article, nous expliquons donc comment tu Gérer les stocks, les SKU et le statut des livraisons dans WooCommerce. Nous y examinerons entre autres la gestion automatique des stocks, l'état des stocks, les reliquats de commande et la gestion des stocks de variantes.
Résumé #
Das Image du produit est l'image principale d'un produit WooCommerce. Via Galerie de produits peux-tu ajouter des vues supplémentaires, des gros plans et d'autres images utiles.
Utilisez des images suffisamment grandes et adaptées au Web, sans télécharger de fichiers originaux inutilement immenses. Des proportions uniformes garantissent un aspect visuel plus harmonieux, en particulier dans les aperçus de produits.
Les images de la galerie peuvent être triées par glisser-déposer dans WooCommerce. La suppression d'une image d'une galerie de produits ne supprime pas automatiquement le fichier de la médiathèque WordPress.
Pour les produits variables, il est possible d'attribuer une image spécifique à chaque variante. Cependant, une galerie entièrement séparée pour chaque variante ne fait pas partie des fonctionnalités de base du cœur de WooCommerce.
Vérifiez les images des produits directement dans la boutique après chaque modification majeure : sur la page produit, dans les aperçus de produits et sur un smartphone.
