Photo produit et Shopify : formats, poids, dimensions (les principes qui durent)

La première image ne joue pas le même rôle que les suivantes

La première image d'une fiche produit est celle qui apparaît dans les résultats de recherche, sur les pages de catégorie et dans les partages sur les réseaux sociaux : elle capte l'essentiel du clic avant même que l'acheteur n'ouvre la fiche complète. Les images suivantes, consultées une fois la fiche déjà ouverte, jouent un rôle différent (détail, mise en situation, échelle) pour un visiteur déjà engagé plutôt que pour convaincre un premier clic. Traiter la première image avec un soin de cadrage, de lumière et de netteté supérieur à celui des suivantes n'est donc pas un luxe éditorial mais un choix qui suit directement l'usage réel de chaque image dans le parcours d'achat. Le nombre d'images à prévoir au total par fiche, et le rôle de chacune, est détaillé dans notre guide sur le nombre d'images par fiche produit.

Combien d'images faut-il par fiche produit →

L'arbitrage entre qualité visuelle et poids de page

Le poids d'un fichier et la qualité perçue d'une image se découplent au-delà d'un certain seuil : passé ce point, un gain de poids supplémentaire n'apporte plus de qualité visuelle perceptible à l'œil, alors que le temps de chargement continue, lui, d'augmenter. Ce temps de chargement a un coût commercial direct et mesuré depuis longtemps dans le e-commerce : une page produit qui met trop de temps à afficher ses images perd des visiteurs avant même qu'ils aient vu le produit, un abandon qui n'apparaît jamais dans les statistiques de conversion classiques puisqu'il se produit avant l'interaction. L'arbitrage à faire est donc simple à énoncer, même s'il demande un peu de discipline à appliquer systématiquement : viser le poids le plus bas qui ne dégrade pas visiblement l'image à l'écran, plutôt que le poids le plus bas tout court ou la qualité maximale sans limite.

Carré, portrait, mixte : le ratio compte moins que sa cohérence

Un ratio carré affiche mieux en grille dense sur une page de catégorie ; un ratio portrait donne plus de hauteur pour montrer un vêtement porté en pied ; un mélange des deux, utilisé délibérément par type de produit, peut avoir du sens pour un catalogue varié. Ce qui compte le plus, cependant, n'est pas lequel de ces choix est fait mais le fait qu'il soit tenu constant sur l'ensemble du catalogue : une grille de produits où chaque vignette a un ratio différent casse visuellement l'alignement de la page et donne une impression de désordre, même si chaque image prise isolément est de bonne qualité. Choisir un ratio par catégorie de produit, puis s'y tenir pour toute nouvelle référence de cette catégorie, évite ce problème sans exiger un ratio unique pour l'ensemble du site.

WebP, AVIF : quand ça vaut le coût de compatibilité

Un format d'image moderne comme le WebP ou l'AVIF réduit sensiblement le poids d'un fichier par rapport à un JPEG classique, à qualité visuelle équivalente, ce qui va directement dans le sens de l'arbitrage décrit plus haut. Le coût de ce gain se mesure en compatibilité : un format plus récent est moins universellement pris en charge par les navigateurs et les outils anciens que le JPEG, désormais compatible par principe partout. Dans la pratique, la plupart des plateformes e-commerce modernes, Shopify compris, convertissent ou servent elles-mêmes le format le plus adapté au navigateur du visiteur, ce qui déplace une partie de cette décision de l'exportateur vers la plateforme : un point à vérifier dans la documentation actuelle de la plateforme utilisée plutôt qu'à supposer identique d'un service à l'autre.

Garder un master haute résolution, exporter des dérivés

Conserver un fichier source en haute résolution, à l'écart du dossier de mise en ligne, permet d'exporter à tout moment le dérivé exact dont un usage a besoin (vignette, fiche produit, zoom, partage social) à la taille et au format voulus, sans jamais reconstituer une qualité déjà perdue. Cette pratique évite le problème inverse : redimensionner un fichier déjà réduit à sa taille finale, plutôt que le fichier source d'origine, dégrade la qualité un peu plus à chaque nouvelle exportation, une perte qui n'est jamais réversible. C'est aussi, très concrètement, le moment où une métadonnée de provenance C2PA se perd le plus souvent : chaque réencodage d'un fichier, y compris cette étape d'export a priori anodine, est susceptible d'effacer un manifeste C2PA attaché à l'image d'origine, un mécanisme détaillé dans notre article sur les plateformes qui détruisent la provenance des images.

Pourquoi votre plateforme détruit la provenance de vos images →

Le zoom, et la résolution qu'il demande

Une fonction de zoom, courante sur une fiche produit mode ou accessoire, agrandit l'image bien au-delà de sa taille d'affichage par défaut : ce qui exige un fichier source dont la résolution dépasse largement ce que montre l'aperçu initial, sous peine d'un zoom flou qui décrédibilise l'image entière plutôt que de simplement mal servir sa fonction. C'est une raison supplémentaire de conserver un master haute résolution comme décrit plus haut : le zoom est justement l'usage qui consomme le plus de résolution parmi tous les affichages d'une même image, et c'est lui qui doit dimensionner le fichier source, pas l'inverse.

Texte alternatif : accessibilité et indexation

Un texte alternatif décrit ce que montre l'image pour un visiteur qui ne peut pas la voir (via un lecteur d'écran, ou lorsque l'image ne se charge pas) et sert donc d'abord un objectif d'accessibilité. Il sert aussi, en complément, l'indexation : un moteur de recherche lit ce texte pour comprendre le contenu visuel d'une page qu'il ne peut pas interpréter directement en pixels. Un bon texte alternatif décrit ce qui est réellement visible (le produit, sa couleur, son contexte) plutôt que de répéter mécaniquement le nom du produit ou d'empiler des mots-clés, ce qui dessert les deux objectifs à la fois plutôt que d'en servir un seul.

Nommer ses fichiers

Un nom de fichier cohérent (descriptif, sans espace ni caractère spécial, incluant si besoin une référence produit) facilite la maintenance d'un catalogue dans la durée : retrouver, remplacer ou auditer une image précise devient direct plutôt que de dépendre d'une recherche visuelle dans un dossier entier. Un nom de fichier descriptif contribue aussi, dans une mesure plus modeste que le texte alternatif, à l'indexation de l'image elle-même. La convention exacte compte moins que sa constance : choisir une structure de nommage et l'appliquer identiquement à chaque nouvel export évite le mélange de conventions qui rend un catalogue difficile à maintenir après quelques centaines de références.

Liste de contrôle export avant mise en ligne

Six vérifications, à appliquer à chaque nouvel export, quelle que soit la plateforme de destination :

Où vérifier les valeurs actuelles

La documentation officielle de la plateforme utilisée reste la source la plus fiable pour connaître les limites précises en vigueur (poids maximal accepté, dimensions maximales, formats supportés) puisque ces valeurs évoluent avec les versions du service. Un chiffre exact publié dans un article a davantage de chances de devenir obsolète que de rester correct, ce qui explique le choix fait ici de s'en tenir aux principes plutôt qu'à des valeurs chiffrées : ces principes, eux, restent valables indépendamment des évolutions de plateforme.

Un master déjà en haute résolution au départ

Une image générée par MannequinIA sort du studio en PNG, dans la résolution choisie à la génération (1K, 2K ou 4K selon le besoin), ce qui donne directement un fichier source de qualité suffisante pour servir de master, sans étape de numérisation ou de retouche préalable à prévoir. Les principes d'export détaillés dans cet article (conserver ce master à part, en dériver les formats et poids adaptés à chaque usage) s'appliquent ensuite de la même façon qu'à toute autre photo produit.

Questions fréquentes