Images produit floues après la mise en ligne : où passent les pixels

Des images produit floues après la mise en ligne, ce n'est presque jamais un problème d'appareil photo. Le fichier qui a quitté votre poste était net. Le fichier que le téléphone de l'acheteur télécharge réellement n'est plus le même : il a été rééchantillonné, réencodé, plafonné et rediffusé, en général quatre ou cinq fois, par des systèmes réglés pour la vitesse de la page et non pour vos cotes.

Personne ne met en ligne une image floue. La netteté ne se perd pas au moment de l'envoi, elle se dépense — une étape à la fois — et la plupart de ces étapes sont invisibles depuis le tableau de bord vendeur. Voici toute la chaîne dans un tableau, puis quoi faire pour les trois étapes qui vous coûtent le plus cher.

Images produit floues après la mise en ligne : les huit étapes, dans l'ordre

#	Étape	Ce qui arrive à votre fichier	Ce que vous perdez	Sous votre contrôle ?
1	Prise de vue	Bougé, mise au point ratée, diffraction aux très petites ouvertures	Du détail réel, irrécupérable ensuite	Oui
2	Rééchantillonnage à l'export	Réduction à la taille cible sans accentuation de sortie	Le micro-contraste des arêtes, des pointes de flèche et du petit texte	Oui
3	Votre encodage JPEG	Le réglage de qualité et le sous-échantillonnage de chrominance suppriment du détail couleur	Les traits colorés fins, les cotes en rouge et en bleu	Oui
4	Ingestion plateforme	La marketplace décode votre JPEG et le réencode avec ses propres réglages	Perte de génération, halos de ringing sur les arêtes franches	Non
5	Plafond de pixels	La plateforme stocke selon son propre maximum sur le plus grand côté	Tout ce qui dépasse le plafond, définitivement	Seulement via la bonne taille d'export
6	Tailles dérivées	La page demande une vignette, pas votre master	Du détail proportionnellement au facteur de réduction	En partie, selon l'emplacement visé
7	Densité de pixels	Un écran 3x réclame trois pixels d'image par pixel CSS	Deux tiers de la netteté perçue sur les écrans denses	En partie
8	Diffusion	Placeholders de chargement différé, réglages du thème, replis sur réseau lent	Un flou temporaire ou persistant au premier affichage	En partie

Les étapes 1 et 2 vous appartiennent. Les étapes 4 et 5 appartiennent à la plateforme et ne se négocient pas. En pratique, la plupart des plaintes sur des images produit floues après la mise en ligne remontent aux étapes 3, 4 et 7 — l'encodage, le réencodage et l'écran — ce qui explique aussi pourquoi refaire les photos ne règle presque jamais rien.

Étape 3 : le sous-échantillonnage de chrominance tue d'abord votre flèche de cote rouge

Le sous-échantillonnage de chrominance est un raccourci de l'encodage JPEG : la luminosité est stockée en pleine résolution, la couleur seulement à une fraction — en mode 4:2:0, courant, un échantillon de couleur par bloc de 2x2 pixels. Le détail de luminosité survit ; le détail de couleur est divisé par quatre avant même que le fichier ne quitte votre machine.

Pour la photo d'un canapé, l'échange est raisonnable. Pour une flèche rouge d'un pixel tracée sur un panneau gris, il est désastreux : un rouge moyen sur un gris moyen ne se distingue presque pas de son fond en luminosité. Sa visibilité repose presque entièrement sur la teinte — précisément le canal que l'encodeur sacrifie en premier. Le trait ne disparaît pas : il bave en une tache rose molle d'environ deux pixels de large, et la pointe de la flèche perd sa pointe.

La solution n'est pas de monter le curseur de qualité. La solution est de faire gagner les annotations sur la luminosité plutôt que sur la couleur :

Trait sombre sur fond clair, ou trait clair sur fond sombre. Le contraste en luminance, pas en teinte.
Donnez au trait un fin contour ou un halo contrasté pour que l'arête survive à une moyenne de couleur 2x2.
Gardez le texte de cote épais d'au moins 2 px à la taille diffusée, pas à la taille du master.
Évitez le rouge ou le bleu saturés posés directement sur un produit en demi-teinte. Ce sont les deux teintes qui lâchent en premier.

Étape 4 : le réencodage que personne ne voit

Chaque marketplace décode ce que vous envoyez et en écrit sa propre copie. Le JPEG étant destructif, le second encodage ne se contente pas de répéter les erreurs du premier : il quantifie une image qui contient déjà des artefacts de compression, et ces artefacts sont traités comme du détail à préserver. Le résultat visible s'appelle le ringing : de faibles halos collés à chaque arête franche, très visibles sur du texte noir sur blanc et sur les traits droits d'un schéma coté.

Impossible de le désactiver. En revanche, vous pouvez cesser de lui donner de la matière abîmée :

Conservez un master sans perte (PNG, TIFF ou l'original en calques). Ne rouvrez jamais le JPEG exporté pour le réenregistrer.
Exportez une fois, depuis le master, à la taille finale en pixels. Chaque enregistrement JPEG intermédiaire est une génération que vous payez.
Ne précompressez pas pour atteindre un poids de fichier que le plafond de la plateforme gère déjà.

La règle qui découle des étapes 3 et 4 : le nombre de fois qu'une image d'annonce est encodée en JPEG compte davantage que le curseur de qualité d'un encodage isolé.

Étape 5 : le plancher de pixels qui maintient le zoom en vie

Le zoom est la fonction dont l'acheteur se sert pour vérifier qu'une cote est lisible, et chaque plateforme le conditionne à un seuil de pixels. Sous le seuil, l'image n'est pas floue : il n'existe simplement jamais de version haute résolution à servir.

Plateforme	Minimum accepté	Seuil de zoom	Plafond
Amazon	500 px sur le plus grand côté	1 000 px minimum ; 1 600 px ou plus pour le meilleur zoom	10 000 px sur le plus grand côté
eBay	500 px sur le plus grand côté	1 600 px sur le plus grand côté	12 Mo par photo
Shopify	Aucun plancher publié	Plus de 800 x 800 px pour que le zoom fonctionne	5 000 x 5 000 px, jusqu'à 20 Mo ; 2 048 x 2 048 px recommandé en carré

Deux conséquences. D'abord, envoyer un fichier physiquement plus gros n'ajoute pas une résolution qui n'a jamais été captée — c'est la confusion qui alimente le débat 300 dpi contre 72 dpi, où un nombre inscrit dans l'en-tête du fichier est pris pour du détail d'image. Ensuite, exporter au plafond de la plateforme ne coûte généralement rien et reste toujours plus sûr que d'exporter à la taille que votre thème affiche en ce moment.

Étape 7 : la taxe 2x des écrans denses

La densité de pixels (device pixel ratio) est le nombre de pixels physiques qu'un navigateur utilise pour un pixel CSS. Les téléphones actuels annoncent couramment 2 ou 3. Une image de 1 000 pixels placée dans un emplacement de 500 pixels CSS paraît nette sur un vieux portable et visiblement molle sur un téléphone, parce que le téléphone a demandé 1 500 pixels et n'en a reçu que 1 000.

C'est de loin la raison la plus fréquente du fameux « chez moi, sur l'écran, c'est net ». C'est probablement vrai. Votre écran a demandé moins de pixels que le téléphone de votre acheteur. Vérifiez chaque image d'annonce sur un téléphone, à 100 %, avant de déclarer le fichier bon.

Le recadrage aggrave le tout. Si l'emplacement d'affichage de la plateforme n'a pas le même format que votre export, la partie nette de l'image peut être coupée avant même d'être redimensionnée — un autre défaut, que l'œil lit comme le même flou. C'est une décision distincte, traitée dans le format d'image des photos produit.

Quoi changer, par ordre de rentabilité

Exporter au plafond de la plateforme, une seule fois, depuis un master sans perte. Le plus gros gain, gratuit.
Corriger le contraste des annotations avant de toucher au curseur de qualité. La luminance passe partout où la teinte se fait écraser.
Accentuer après le redimensionnement, jamais avant. Accentuer un master de 6 000 px puis réduire jette l'accentuation et ajoute des halos.
Arrêter les allers-retours JPEG. Un export par taille diffusée, depuis le master.
Vérifier sur un téléphone. Pas sur l'aperçu de bureau, pas dans la fenêtre d'envoi.

Il existe un cinquième levier, en amont de tous les autres : la façon dont l'annotation a été créée au départ. Des lignes de cote et un texte technique tracés comme de la géométrie puis exportés une fois à la taille diffusée restent nets à travers un réencodage de la plateforme, parce que ce sont des formes à arêtes franches, à fort contraste de luminance, rendues en résolution native. Les mêmes chiffres tapés dans un éditeur d'image sur une vue zoomée puis réduits arrivent déjà mous avant même que la compression commence. Les outils qui accrochent la mesure aux arêtes réelles du produit et exportent l'image annotée à la taille de schéma de chaque plateforme sautent entièrement les étapes 2 et 3 — et comme la géométrie est mesurée et non générée, le nombre porté sur la flèche est celui du mètre ruban, pas une valeur plausible inventée par un modèle d'image. Pour comparer les approches, la sélection d'outils pour ajouter des cotes aux photos produit est un point de départ raisonnable.

Le diagnostic en 60 secondes

À faire avant de refaire la moindre photo. Cela sépare les trois causes d'images produit floues après la mise en ligne — trop peu de pixels, trop d'encodages, un écran trop dense — en une minute environ :

Ouvrez l'annonce en ligne sur un téléphone et zoomez à deux doigts. Le zoom s'active-t-il seulement ? Sinon, vous êtes sous le seuil de zoom de la plateforme : c'est un problème de nombre de pixels, pas de netteté.
Clic droit sur l'image en ligne, ouvrez-la dans un nouvel onglet. Comparez ses dimensions en pixels à ce que vous avez envoyé. Un nombre plus petit signifie que la plateforme a plafonné ou redérivé.
Regardez une arête franche noir sur blanc à 200 %. De faibles halos clairs des deux côtés signalent un réencodage, pas une mise au point ratée.
Regardez un trait d'annotation coloré à 200 %. Si le trait a bavé latéralement alors que le texte noir voisin reste propre, c'est le sous-échantillonnage de chrominance.
Vérifiez le fichier envoyé. S'il a été ouvert puis réenregistré en JPEG, refaites l'export depuis le master.
Comparez le plus grand côté du master au plafond de la plateforme. S'il est nettement en dessous, réexportez plus grand.

Si les six points passent et que l'image reste molle, alors seulement il s'agit d'un problème de prise de vue — et à ce stade, la correction se fait au shooting, pas à l'export. Construire une prise de vue qui reste mesurable est une discipline en soi, traitée dans comment photographier un produit pour le mesurer.

FAQ

Pourquoi mes images produit sont-elles floues après la mise en ligne sur Shopify, mais nettes sur mon ordinateur ?

Parce que votre ordinateur affiche le master et la boutique une dérivée. Shopify redimensionne automatiquement les images pour les petits écrans : l'acheteur reçoit donc le plus souvent une copie mise à l'échelle, pas votre fichier. Shopify accepte jusqu'à 5 000 x 5 000 px et 20 Mo, recommande 2 048 x 2 048 px pour les images carrées, et exige plus de 800 x 800 px pour que le zoom fonctionne ; si votre envoi est très en dessous, chaque dérivée part avec trop peu de détail.

Envoyer un fichier plus gros rend-il l'image plus nette ?

Seulement jusqu'à la résolution réellement captée. Plus de pixels aident quand le seuil de zoom ou les tailles dérivées de la plateforme affament l'affichage — passer de 800 px à 1 600 px active le zoom sur Amazon ou eBay. Agrandir une photo de 900 px à 3 000 px ajoute du poids et aucun détail, souvent avec un flou d'interpolation visible en prime.

Pourquoi mon texte de cote est-il correct dans l'image principale et pâteux dans la vignette de la galerie ?

La vignette est une dérivée distincte, produite par réduction. Un texte de 14 px de haut dans un master de 1 600 px mesure environ 4 px dans une vignette de 450 px, sous la taille à laquelle les formes de lettres survivent à un rééchantillonnage. Dimensionnez le texte d'annotation par rapport au plus petit emplacement où il apparaîtra, pas par rapport au master.

Faut-il envoyer du PNG plutôt que du JPEG pour les schémas cotés ?

Là où la plateforme l'autorise, oui pour les images faites surtout d'aplats, de traits francs et de texte : le PNG est sans perte et insensible au sous-échantillonnage de chrominance. Le hic, c'est que la plupart des marketplaces réencodent en JPEG à l'ingestion de toute façon ; le PNG protège donc les étapes 2 et 3, mais pas l'étape 4. Cela vaut quand même le coup : une entrée propre survit bien mieux à un réencodage qu'une image déjà dégradée.

Pourquoi mes images sont-elles moins bonnes en données mobiles qu'en wi-fi ?

Certains navigateurs et réseaux substituent une version de moindre qualité sur les connexions contraintes, et beaucoup de boutiques affichent un minuscule placeholder flou pendant le chargement du vrai fichier. Si l'image devient nette après une seconde, c'était le placeholder et il n'y a rien à corriger. Si elle reste molle, remontez les étapes 5 à 7.