La taille du texte sur les images produit dépend d'un chiffre que presque personne ne vérifie : la taille de la vignette que l'acheteur voit réellement. Pas votre export en 1600 px — le petit carré large comme un ongle dans la grille de résultats. Les distributeurs sont invités à afficher les vignettes produit sur smartphone à environ 16 x 16 mm. Voilà le support sur lequel votre cote est vraiment imprimée.
Six croyances poussent les vendeurs à concevoir pour le mauvais support. Chacune a une contre-argumentation publiée, parce que les marques de grande consommation ont réglé ce problème il y a des années et ont mis les règles par écrit.
Une précision sur l'origine de ces règles : le travail sur les Mobile Ready Hero Images a été porté par les marques et les enseignes de la grande distribution, d'où les exemples de flacons de shampoing et de croquettes pour chien. La physique, elle, ne connaît pas les catégories. Un acheteur qui plisse les yeux devant une vignette de 16 x 16 mm ne lira pas mieux la profondeur d'assise de votre canapé que le nombre de lavages annoncé sur un baril de lessive.
Idée reçue 1 : l'acheteur zoomera s'il a besoin de la dimension
Il zoomera — après avoir cliqué. Or le clic se joue dans la grille, là où le zoom n'existe pas encore.
Tout l'argument tient dans cet enchaînement. Chaque défense du petit texte par le zoom suppose un acheteur déjà engagé, qui a choisi votre fiche plutôt que les onze autres à l'écran. Si votre image a perdu cette comparaison parce que l'acheteur n'a pas su quelle taille faisait l'article, la fonction zoom ne servira jamais. La lisibilité est un problème de haut de tunnel déguisé en problème de fiche produit.
Idée reçue 2 : 1600 px, donc le texte est lisible
Les pixels stockent, ils ne dimensionnent pas. Ce qui décide de la lisibilité, c'est la taille rendue sur l'écran physique, et ce chiffre est bien plus petit que ne le croient les vendeurs.
Le référentiel Mobile Ready Hero Image demande aux distributeurs d'afficher les vignettes à peu près à ces tailles rendues :
| Appareil | Taille de vignette rendue recommandée | En clair |
|---|---|---|
| Smartphone | 16 x 16 mm | Un ongle |
| Tablette | 23 x 23 mm | Un timbre-poste |
| Ordinateur fixe ou portable | 50 x 50 mm | Le petit côté d'une carte bancaire |
Le référentiel dit noir sur blanc pourquoi il ne se contente pas d'écrire « faites-les plus grandes » : des vignettes plus grandes dégradent la capacité de l'acheteur à faire défiler vite une page de résultats, tandis que des vignettes plus petites rendent impossible toute communication graphique et renvoient l'acheteur à la lecture des titres produit — plus lente et plus pénible que le balayage des images.
La contrainte est donc figée. Vous concevez pour 16 x 16 mm, que cela vous plaise ou non, et un fichier de 1600 px rendu dans cette vignette est réduit d'environ deux ordres de grandeur avant que quiconque le lise. La taille du texte sur les images produit se spécifie face à cette vignette rendue, pas face au plan de travail de votre logiciel. Le cadrage compte aussi — voir le format d'image produit pour ce qui arrive quand la plateforme rogne justement le côté où se trouvaient vos cotes.
Idée reçue 3 : un fort contraste rend le petit texte acceptable
Contraste et taille sont deux façons indépendantes d'échouer, et corriger l'une ne sauve pas l'autre.
Les objectifs publiés pour le texte des images e-commerce sont précis. Le score de l'Accessible Perceptual Contrast Algorithm doit en général dépasser 60, avec 45 comme strict minimum, et le référentiel GS1 hero image renvoie au ratio de contraste minimal du W3C, 4.5:1, comme plancher d'accessibilité. La combinaison de couleurs doit en plus fonctionner pour les acheteurs atteints d'une déficience de la vision des couleurs, ce qui élimine plusieurs associations qui vous paraissent très contrastées.
Le contraste est nécessaire. Il n'est pas suffisant. Un texte trop petit à 16 x 16 mm reste illisible quel que soit le ratio de contraste, parce que l'échec porte sur la résolution angulaire, pas sur la luminance.
Idée reçue 4 : une typo fine et élégante fait haut de gamme
Elle fait haut de gamme à 100 %. À 16 x 16 mm, dans un JPEG, elle disparaît.
Sur la typographie, le référentiel est d'une franchise rare pour un document de normalisation :
| Choix | Ce que dit le référentiel |
|---|---|
| Graisse | Le semi-gras ou le gras donnent en général la meilleure lisibilité — éviter l'ultra light et l'extra bold |
| Style de caractère | Des linéales sans empattement comme Open Sans ou Arial ; éviter les polices décoratives, stylisées ou à empattements, qui rendent mal en petite image, d'autant que les distributeurs utilisent le plus souvent le format .jpg |
| Fond derrière le texte | Le garder net — éviter les dégradés de couleur, éviter le texte sur fond à motifs |
| Effets | Éviter les effets de contour et d'ombre portée sur le texte |
Notez que l'extra bold figure lui aussi sur la liste des interdits. Les graisses très lourdes bouchent leurs propres contreformes à la réduction, et un 8 bouché se lit 0. Pour une cote, ce n'est pas un problème esthétique — c'est un chiffre faux.
Idée reçue 5 : plus de repères, plus d'informations
Le support est minuscule et chaque élément se dispute la place. Tout ce qui figure sur l'image sans porter un message utile à l'acheteur prend la place de ceux qui en portent un.
Le standard hero image est impitoyable là-dessus. Il définit quatre messages critiques, les « 4Ws » — Who (la marque), What (le type de produit), Which (la variante) et HoW much (la contenance) — et considère tout le reste comme candidat à la suppression. Ses règles de contrôle automatisé vont plus loin : le seul élément autorisé hors emballage est une pastille de taille, carré noir, en bas à droite. Pas de texte flottant, aucun autre élément hors emballage, rien qui déborde des limites du packaging, fond blanc. Il précise aussi qu'il ne faut pas montrer plusieurs vues du même produit, parce que c'est visuellement perturbant et que l'acheteur peut se tromper sur le nombre d'articles qu'il va recevoir.
Transposez cela à un schéma coté et la hiérarchie est inconfortable mais claire : une cote que l'acheteur peut lire vaut mieux que six qu'il ne peut pas lire. Choisir les repères qui méritent leur place est la moitié la plus difficile du travail — les repères sur photo produit explique comment les sélectionner.
Idée reçue 6 : l'emplacement de la dimension n'a pas d'importance
Il en a une, et la raison n'est pas esthétique.
Le référentiel place l'information de taille hors emballage en bas à droite, et donne deux raisons. D'abord la cohérence : quand toutes les images d'une catégorie mettent la taille au même endroit, l'acheteur sait où regarder sans chercher. Ensuite la géométrie — le bas à droite est le seul emplacement compatible avec les produits en portrait comme en paysage. Partout ailleurs, cela marche pour une orientation et percute le produit dans l'autre.
Si vous avez déjà déplacé trois fois une cote parce qu'elle heurtait une référence tout en hauteur, c'est cette règle que vous redécouviez à la dure.
Le test des 16 mm : 60 secondes chrono
Pas besoin d'un budget d'étude pour savoir si votre image passe. Il y a deux façons de vérifier.
La version physique. Imprimez l'image en 16 x 16 mm et tenez-la à 40 cm — la distance normale de lecture d'un téléphone. Ce que vous ne lisez pas n'est pas là.
La version numérique. Le référentiel GS1 décrit la simulation telle quelle : appliquer un flou gaussien d'un rayon de 34 pixels sur une image de 3000 x 3000 pixels. Ce niveau de flou est calibré pour représenter une lecture sur mobile tenu à 40 cm. Jugez l'image floutée sur votre écran. Si une cote est illisible après le flou, elle est illisible pour une grande part des acheteurs réels.
Il existe un outil sous licence prévu pour cela — Clari-Fi, issu de la même équipe de l'University of Cambridge, à £263 hors taxes pour une licence mono-utilisateur — et les grandes marques s'en servent comme d'un point de contrôle bloquant, pas comme d'une relecture. Le directeur e-commerce mondial d'Unilever a déclaré en octobre 2022 que toute image e-commerce nouvelle ou mise à jour devait passer le contrôle Clari-Fi avant d'être envoyée aux distributeurs, et que le groupe y avait fait passer plus de 30,000 images produit en trois ans. Pour un petit vendeur, le flou manuel est un substitut honnête. Ce qui compte, c'est de faire le contrôle, avant la mise en ligne de l'image, pas après l'arrivée des retours.
Les conséquences sont chiffrées, ce qui est rare dans ce domaine. Une image qui échoue au contrôle de clarté de niveau AA signifie que plus de 46% des acheteurs ne perçoivent pas l'information critique qu'elle contient. Dans l'exemple traité par le référentiel lui-même, un pack shot classique échouait sur « quelle variante » et « quelle quantité », la part de personnes susceptibles d'avoir du mal à percevoir ces messages se situant entre 52% et 100%.
Voilà le clou : si votre cote échoue au test de flou, vous n'avez pas publié une dimension. Vous avez publié une décoration.
Pour situer ce que vaut une cote non lue, un retour pour erreur de taille coûte l'expédition aller, l'expédition retour, le contrôle, le reconditionnement et souvent la marge entière de l'article — le calculateur de coût des retours chiffre tout cela à l'unité.
Taille du texte sur les images produit : ce qui survit à la vignette
| Élément | Traitement qui survit à 16 x 16 mm | Ce qui le tue |
|---|---|---|
| Chiffres de cote | Le plus gros texte de l'image ; linéale semi-grasse ; un seul système d'unités par image | Des chiffres calibrés comme une légende |
| Unités (cm, in, mm) | Même graisse que le chiffre, jamais en exposant | Unités en petites capitales ou en exposant qui se noient dans le chiffre |
| Lignes de cote et flèches | Trait assez épais pour survivre à la réduction ; plein, très contrasté | Filets de 1 px qui disparaissent |
| Lignes de rappel vers un repère | Courtes, droites, sans croisement | Longs filets fins en travers d'une photo chargée |
| Pastille de taille | Bloc plein, en bas à droite, identique sur toute la gamme | Texte flottant sans aucun fond |
| Fond sous le texte | Zone plate et propre de l'image | Dégradés, motifs, texture du produit |
| Texte marketing secondaire | Supprimé, ou déplacé sur l'image 2 | Tout ce qui concurrence le chiffre qui vend la taille |
Deux règles couvrent l'essentiel. Soit la cote est le plus gros texte de l'image, soit l'image n'a plus de sujet. Et tout élément qui n'est pas l'un de vos messages critiques emprunte de la place à un élément qui l'est.
FAQ
Quelle taille doit faire le texte sur une image produit ?
Assez grande pour survivre à la vignette de 16 x 16 mm — la taille du texte sur les images produit est un résultat de test, pas une valeur en pixels fixée d'avance. Comme la taille rendue dépend des dimensions en pixels de l'image et de la densité de l'écran, une réponse unique du type « mettez 48 px » est fausse sur la moitié des appareils. Composez votre texte, floutez l'export au niveau calibré, et agrandissez jusqu'à ce que les chiffres critiques restent lisibles.
Les acheteurs vont-ils zoomer pour lire les dimensions ?
Certains, après avoir cliqué. Le problème, c'est que le clic se décide dans la grille de résultats, avant tout zoom possible : un texte qui ne fonctionne qu'agrandi ne pèse rien dans le choix de votre fiche.
Quel contraste faut-il pour du texte sur une image produit ?
Visez un score APCA supérieur à 60, traitez 45 comme le plancher, et gardez le ratio classique de 4.5:1 comme référence d'accessibilité. Vérifiez aussi la paire de couleurs face aux déficiences de la vision des couleurs — un chiffre rouge sur fond vert peut atteindre le ratio et rester invisible pour une part non négligeable des acheteurs.
Puis-je mettre la taille dans un coin de l'image ?
Oui, et le coin recommandé est celui du bas à droite. C'est le seul qui fonctionne pour les produits en portrait comme en paysage, et le placer au même endroit sur chaque image permet à l'acheteur de le trouver sans chercher.
Mon schéma coté échoue au test de flou — quelle est la correction la plus rapide ?
Ne refaites pas la photo. La photo est presque toujours bonne ; c'est la couche d'annotation qui pose problème. Le chemin rapide consiste à garder les cotes dans une couche vivante et modifiable, liée aux arêtes mesurées du produit plutôt qu'aplatie dans le JPEG : vous pouvez alors grossir la typo, épaissir les traits, supprimer les libellés décoratifs et ré-exporter au format exigé par chaque plateforme en une seule passe. Cette capacité — mesurer sur la géométrie réelle et ré-exporter à la demande — sépare un logiciel d'annotation d'un éditeur photo, et d'un générateur d'images qui sort un chiffre convaincant qu'il n'a jamais mesuré. Si vous hésitez entre plusieurs approches, le comparatif des outils pour ajouter des dimensions aux photos produit les départage exactement sur ce point.
Sources et références
- GS1 — Guide Mobile Ready Hero Images : les 4Ws, le contrôle par flou gaussien calibré (rayon de 34 px sur une image de 3000 x 3000, distance de lecture de 40 cm) et la référence de contraste 4.5:1
- GS1 — Mobile Ready Hero Images (page du standard en vigueur)
- University of Cambridge Inclusive Design Toolkit — Taille recommandée du texte et des chiffres dans les Mobile Ready Hero Images : objectifs APCA, graisse et style de caractère, et le chiffre de 46%
- Inclusive Design Toolkit — Afficher les images sur mobile à la meilleure taille possible : 16 x 16 mm sur smartphone, 23 x 23 mm sur tablette, 50 x 50 mm sur ordinateur
- Inclusive Design Toolkit — Test de clarté visuelle : comment le flou simule la lecture d'une vignette, et le niveau de contrôle AA
- Inclusive Design Toolkit — Preuves des bénéfices des hero images : l'exemple de pack shot traité et la fourchette de difficulté de 52-100%
- Inclusive Design Toolkit — Présenter l'information de taille : positionnement en bas à droite des pastilles de taille hors emballage
- W3C — Comprendre le critère de succès WCAG 1.4.5 Texte sous forme d'image
