Comment optimiser les images de vos produits pour votre boutique en ligne

Commencez par les informations produit essentielles pour les clients

Une image de produit ne se limite pas à remplir un rectangle. Elle doit permettre au client d'évaluer la forme, la finition, la couleur et les caractéristiques du produit. Une exportation qui supprime les coutures, rend le texte difficile à lire ou modifie l'aspect d'une surface est trop compressée, même si la taille du fichier semble impressionnante.

Choisissez quelques vues utiles avant de les modifier. Une photo principale nette, un autre angle et un gros plan d'une caractéristique importante répondent généralement à plus de questions que plusieurs photos presque identiques. Ajoutez une vue d'ambiance ou une échelle si cela aide à expliquer le produit. Il n'y a pas de nombre requis: une simple tasse et une veste technique nécessitent des informations différentes.

Conservez vos photos originales dans un dossier séparé. Préparez des copies pour publication avec des noms qui identifient le produit et la vue. Si l'image originale est floue, mal éclairée ou trop petite, la compression ne la corrigera pas. Remplacez la photo de mauvaise qualité avant de vous occuper des paramètres d'exportation.

Harmonisez le cadrage et l'arrière-plan

Ouvrez une page de collection et visualisez plusieurs produits côte à côte. Des espaces vides différents peuvent donner l'impression que des produits similaires sont disparates ou de tailles sensiblement différentes. Choisissez un format adapté à votre thème, puis veillez à ce que la position du sujet et l'espace environnant soient relativement cohérents sur les images principales.

Un cadrage carré peut convenir à une grille de produits carrée, mais ce n'est pas une règle absolue. Un vêtement long ou un équipement imposant peuvent nécessiter une présentation différente. Vérifiez l'objet dans son intégralité, poignées et accessoires compris, avant de valider le cadrage. Ne déformez pas une photo pour l'adapter à un modèle.

Pour préparer une série, utilisez l’outil d’optimisation des photos produit de Pixilo. Choisissez des dimensions de la zone de travail, des marges minimales et un arrière-plan communs, puis recadrez et positionnez chaque photo séparément. Vérifiez l’ensemble dans Toutes les images avant le téléchargement. La fonction Agrandir permet d’examiner les détails et l’effet du réglage de qualité.

La marge minimale se mesure depuis les bords de l’image recadrée, pas depuis un produit détecté automatiquement. Les espaces vides et les fonds opaques du fichier source restent présents, sauf si vous les éliminez par recadrage. Des dimensions communes ne garantissent donc pas des produits de même taille apparente. Vérifiez aussi la grille publiée, car votre thème peut recadrer les images à son tour.

Un fond blanc ou neutre peut donner une impression d'homogénéité à un catalogue, tandis que la transparence peut convenir à une mise en page présentant des produits sur différents fonds. Si un fichier PNG ou WebP comporte déjà des zones transparentes, l'outil de couleur d'arrière-plan peut les remplir avec la couleur de votre choix et créer un JPG. Il ne supprime pas l'arrière-plan d'une photographie classique.

Vérifiez la transparence des bords sur des surfaces claires et foncées. Un contour pâle qui disparaît sur fond blanc peut devenir visible sur une page sombre. Si ce contour fait déjà partie de l'image originale, le changement de format ne le supprimera pas. Consultez le guide sur les arrière-plans inattendus dans les images transparentes pour identifier la différence.

Choisissez les dimensions de la grille, de la page produit et du zoom

Mesurez la largeur réelle de l'image dans votre mise en page. Une fiche produit peut occuper 360 pixels CSS, tandis que l'image principale du produit peut en occuper 800. Il s'agit de largeurs d'affichage, et non d'exigences automatiques pour le fichier téléchargé.

Le pixel CSS mesure la taille visible dans la mise en page. Sur un écran à haute densité, un pixel CSS peut utiliser plusieurs pixels physiques. Une image nette peut donc nécessiter plus de pixels que sa largeur affichée.

Pour un écran haute densité, une version dont la largeur est environ deux fois supérieure à celle affichée est un bon candidat pour les tests. Une carte de 360 pixels pourrait donc être exportée en 720 pixels, tandis qu'une image produit de 800 pixels pourrait être exportée en 1600 pixels. Prévoyez également des versions plus petites. Ces chiffres sont des exemples de planification et ne constituent ni des recommandations de plateforme ni des garanties quant au fichier que choisira un navigateur.

Le zoom doit être géré indépendamment. Si les clients souhaitent examiner le tissage d’un tissu, une pièce de fixation ou une gravure, conservez une image originale suffisamment détaillée ou fournissez un gros plan séparé. Une petite image destinée à la grille de produits ne doit pas être le seul fichier disponible pour la visionneuse zoom. Inversement, la grille ne doit pas obliger chaque visiteur à télécharger une image zoomée en pleine résolution.

Votre plateforme peut générer ces variantes automatiquement. Si vous gérez vous-même la diffusion, utilisez des images adaptatives afin que le navigateur puisse demander une version appropriée. Le guide des images adaptatives explique comment les dimensions, srcset et sizes interagissent. Réduire la taille d'une grande image avec du CSS ne crée pas un fichier téléchargeable plus petit.

Exemple réel : recadrer une photo pour une carte produit carrée

Cette photo mesure 1920 × 1076 pixels. Le pot occupe une petite partie de la composition large. Pour une carte produit carrée, un cadrage plus serré le met davantage en valeur sans le déformer ni supprimer le fond photographié.

1. Choisissez le cadrage. Dans l’outil d’optimisation des photos produit, gardez tout le couvercle et la base du pot dans une zone de 630 × 630 pixels. Le socle peut dépasser du cadre, mais le produit doit rester entier.
2. Définissez la sortie. Choisissez une zone de travail de 600 × 600 pixels et une marge de 0 %. Laissez l’agrandissement désactivé : la zone recadrée est légèrement plus grande que le résultat et peut être réduite sans ajouter de pixels.
3. Exportez et vérifiez. Nous avons téléchargé un JPG de qualité 90, pesant 16,4 ko. Examinez le bord du couvercle, l’ombre légère et la surface blanche uniforme avant de retenir ce fichier.

Le carré de 600 pixels illustre une version destinée à une carte produit ; ce n’est pas une recommandation générale d’envoi. Une grande galerie ou un zoom peut demander davantage de pixels. La réduction du fichier résulte à la fois du recadrage, du redimensionnement et de l’export JPG : elle ne mesure pas la compression seule. Le fond d’origine et une partie du socle restent présents.

Choisissez un format adapté à l’image et pris en charge par votre système de publication

Distinguez le format que vous téléchargez de celui que reçoivent les visiteurs. Votre boutique accepte peut-être une image originale au format JPG ou PNG et la propose automatiquement au format WebP ou AVIF. Dans ce cas, préparer vous-même plusieurs fichiers à télécharger dans des formats modernes peut s'avérer fastidieux sans pour autant améliorer le résultat.

• JPG: Un point de départ pratique pour les photos à fond opaque, surtout si votre plateforme ou autre destination exige le format JPEG. Vérifiez la netteté des petits caractères et des textures fines après compression.
• PNG: Utile lorsque vous avez besoin de transparence ou souhaitez conserver des éléments graphiques nets sans exportation supplémentaire avec perte. Un fichier PNG photographique volumineux peut être beaucoup plus lourd qu'une alternative adaptée.
• WebP: À comparer pour les photos et les graphiques de produits transparents si votre système de publication le prend en charge. Le format prend en charge différents modes de compression, mais les convertisseurs PNG/JPG vers WebP de Pixilo utilisent un paramètre de qualité plutôt qu'un mode sans perte dédié.
• AVIF: Une autre option si votre flux de travail de publication complet le prend en charge. Testez l'image exportée et la page publiée; un fichier plus petit ne garantit pas à lui seul que l'image soit adaptée.

Consultez le guide des formats d'image pour sites web pour une comparaison plus large. Avant de remplacer tout un catalogue, testez une photo ordinaire et une image plus complexe, comme un motif fin ou un détourage transparent. Vérifiez que le chargement, les vignettes, les galeries et le zoom fonctionnent correctement.

Définissez une taille de fichier cible adaptée sans sacrifier la qualité

Il n'existe pas de taille de fichier unique et optimale pour toutes les photos de produits. Un objet simple sur fond uni et un vêtement tissé détaillé peuvent nécessiter des paramètres différents, même à dimensions égales. Une page de collection comportant de nombreuses images a également des exigences de chargement différentes d'une galerie affichant une seule grande image.

Pour une image destinée à être diffusée directement, vous pouvez tester une taille de 200 Ko comme budget initial, puis décider si elle est utilisable. Il s'agit d'un exemple, et non d'une exigence. Si les étiquettes ou les détails du matériau deviennent flous, essayez un paramètre moins agressif, un format plus efficace ou une taille d'affichage différente. Ne réduisez pas la qualité uniquement pour atteindre un chiffre arbitraire.

Comparez à la taille à laquelle les acheteurs verront normalement l'image, puis inspectez les zones importantes à taille réelle ou en mode zoom. Recherchez les contours de lettres dégradés, les blocs dans les ombres, les textures floues et les transitions irrégulières sur les fonds unis. Le meilleur choix est la plus petite version acceptable pour cet emplacement, plutôt que la plus petite exportation que votre outil peut produire.

Pour tester uniquement la compression, nous sommes repartis de l’original non recadré et l’avons exporté en JPG de qualité 20, en conservant les 1920 × 1076 pixels. Le résultat pèse 28,0 ko, soit environ 62 % de moins que l’original. Utilisez le séparateur et Examiner les détails pour comparer le bord du couvercle, le mur et l’ombre douce. La qualité 20 est volontairement basse pour ce test, pas un réglage conseillé. Vérifiez aussi l’image à sa taille d’affichage prévue.

JPG originalJPG · Qualité 20

Si un formulaire de téléchargement impose une limite réelle, utilisez: l’outil de compression à une taille cible. Conservez les dimensions initiales et n’autorisez le redimensionnement proportionnel que s’il est approprié à l’usage de l’image. Une limite stricte peut imposer des compromis visibles; parfois, un nouveau recadrage ou une photo de détail séparée est plus utile qu’une compression supplémentaire.

Évitez d’exporter à plusieurs reprises à partir de la dernière copie compressée. Revenez à l’original lorsque vous essayez un autre réglage de qualité. Les valeurs de qualité ne sont pas interchangeables entre les formats ou les encodeurs; ainsi, un JPG à 80 et un AVIF à 80 n’auront pas automatiquement la même apparence.

Vérifiez ce que Shopify, WordPress ou votre boutique gère déjà

La documentation de Shopify sur l’importation des images décrit l’optimisation automatique de la boutique et recommande des originaux de bonne qualité plutôt qu’une précompression manuelle obligatoire. Le format diffusé peut différer du format importé. Vérifiez les exigences de vos médias produits et de votre thème: une petite taille cible pour le fichier diffusé ne doit pas devenir une règle pour tous les originaux importés.

Pour une boutique WordPress, vérifiez les tailles d'image générées par votre thème et tout plugin d'optimisation ou service d'images utilisé. Assurez-vous que la fiche produit, la galerie de produits et le zoom reçoivent les versions appropriées. Le guide d’optimisation des images WordPress détaille les étapes de cette préparation.

Si vous remplacez une image, ouvrez une nouvelle page et vérifiez que la nouvelle version est bien affichée. Les vignettes en cache ou les variantes générées peuvent faire apparaître une ancienne exportation comme étant la nouvelle version. Ajouter un autre plugin de compression avant de vérifier le processus actuel risque de créer plus de confusion que de résoudre le problème.

Pixilo prépare les fichiers localement dans votre navigateur. Il ne se connecte pas à votre boutique, ne met pas à jour le catalogue et ne configure pas la diffusion des images. Les outils JPG vers WebP, PNG vers WebP, WebP vers JPG et PNG vers JPG réduisent les images dont la largeur ou la hauteur dépasse 4000 pixels, en conservant leurs proportions. L’outil de redimensionnement accepte jusqu’à 8000 pixels par côté et 32 millions de pixels au total. Vérifiez les dimensions du fichier téléchargé lorsque vous préparez une grande image pour le zoom.

Aidez les moteurs de recherche à comprendre les images de vos produits

Décrivez la vue avec précision. Un nom de fichier tel que blue-ceramic-mug-side-view.jpg est plus facile à gérer que IMG_4837.jpg. Pour le texte alternatif, rédigez une description utile de ce que montre l'image, par exemple: « Mug en céramique bleue avec une anse incurvée, vue de côté ». Une autre photo doit décrire sa propre vue plutôt que de répéter le même texte.

Placez l'image à proximité des informations pertinentes sur le produit et évitez de surcharger les noms de fichiers ou le texte alternatif avec des termes de recherche répétitifs. Les consignes de Google concernant le référencement des images, , expliquent l'importance du texte descriptif et de la découverte des images. Ces pratiques aident à communiquer ce que représente l'image; elles ne garantissent pas un bon classement.

Vérifiez également la page produit. Une image correcte de la couleur ou de la variante choisie est plus utile qu'un fichier parfaitement optimisé montrant le mauvais article. L'optimisation des images doit contribuer à une fiche produit précise, et non compenser des informations produit manquantes.

Vérifiez le résultat publié avant de modifier l'ensemble du catalogue

• Vue Collection: Le produit est visible, le cadrage est cohérent et la grille ne télécharge pas de fichiers inutilement volumineux.
• Galerie de produits: L’image principale est nette, les angles supplémentaires apportent des informations et la variante appropriée est affichée.
• Zoom: Les étiquettes importantes, la texture et les accessoires restent lisibles au niveau de zoom souhaité.
• Affichage mobile: Un écran étroit ne rogne pas le sujet et n’impose pas une image grand format (réservée aux ordinateurs de bureau) dans un petit espace.
• Arrière-plans: Les bords transparents et les aplats de couleur s’affichent correctement par rapport aux couleurs réelles de la page.
• Chargement: Inspecter les requêtes de fichiers lors d’une nouvelle visite. Éviter de retarder l’affichage de l’image principale du produit simplement parce que d’autres images de la galerie peuvent se charger ultérieurement.
• Mise en page: Conserver les proportions correctes des images afin que le texte et les boutons ne sautent pas lorsque les photos apparaissent.
• Fichiers sources: Conserver les fichiers originaux et une brève trace des paramètres utilisés pour la publication.

Commencez par quelques produits représentatifs, en incluant une image détaillée. Comparez l'avant et l'après dans des conditions similaires. Une fois l'affichage et le chargement validés, appliquez le processus au reste du catalogue. Pour un diagnostic plus approfondi des problèmes de chargement, consultez: Pourquoi les images d'un site web se chargent-elles lentement?

Foire aux questions

Quelle est la taille d'image optimale pour une boutique en ligne?

Cela dépend des dimensions d'affichage et du comportement du zoom du thème. Mesurez la grille et la galerie, conservez suffisamment de détails de l'image originale pour l'agrandissement et vérifiez les fichiers générés. Il n'existe pas de dimension carrée universelle convenant à tous les produits ou plateformes.

Chaque image de produit doit-elle faire moins de 200 Ko?

Non. Cela peut servir de budget de test pour certaines images directement hébergées, mais ce n’est pas une règle universelle pour l’importation des images. Une image originale destinée au zoom peut nécessiter plus de détails, et une plateforme d'optimisation automatique fonctionnera probablement mieux avec un fichier de haute qualité.

Quel format est le plus adapté aux photos de produits: JPG ou PNG?

Le format JPG est un bon point de départ pour les photos ordinaires avec un fond opaque. Le format PNG est utile pour la transparence et les graphismes nets, mais peut être volumineux pour les photos. Vérifiez le processus d’importation et de diffusion des images de votre plateforme avant de choisir; le format reçu par les acheteurs peut être différent.

Pourquoi l’image de mon produit est-elle floue après le chargement?

Comparez l’original, votre fichier exporté et l’image livrée par la boutique. Les causes fréquentes incluent une image originale trop petite, une compression excessive, une vignette générée trop petite utilisée dans une grande galerie ou un zoom qui agrandit le même fichier. Identifiez l’étape qui a introduit le flou avant de modifier les paramètres.

Pixilo peut-il supprimer l’arrière-plan d’une photo de produit?

Non. L’outil d’optimisation des photos produit remplit l’espace ajouté et les zones déjà transparentes avec la couleur de fond choisie. Il ne détecte pas le produit et ne supprime pas un arrière-plan opaque. L’outil distinct de couleur de fond nécessite lui aussi une image déjà détourée pour changer le fond derrière un produit.