Skip to content
← Blog

Optimisation des fiches produit

Comment compresser des photos produit sans perdre en qualité

· 4 min read

Redimensionnez la photo produit aux dimensions en pixels auxquelles elle est réellement affichée, puis exportez-la en WebP ou en AVIF, qui sont en général 25 à 50 pour cent plus légers qu'un JPEG à qualité visuelle égale. Visez environ 100 à 300KB par image selon son rôle dans la page. Le critère Largest Contentful Paint de Google juge une page lente au-delà de 2,5 secondes, et une photo principale trop lourde est souvent la seule ressource responsable de ce dépassement.

Faites-le avec RorlAIProduct: Clean studio backdrop for anything boxed or bottled.

Pourquoi le poids d'un fichier est un problème de conversion, pas seulement de chargement

Le Largest Contentful Paint mesure le temps que met le plus grand élément visible d'une page à s'afficher entièrement. D'après les seuils de Google, moins de 2,5 secondes est bon, de 2,5 à 4 secondes à améliorer, et au-delà de 4 secondes mauvais. Sur une fiche produit, le plus grand élément visible est presque toujours la photo principale. Un seul fichier image trop lourd peut donc décider à lui seul si votre page réussit ou échoue au critère, quelle que soit la rapidité de chargement du reste.

Ce n'est pas un exercice de notation abstrait. Une photo principale lente à charger est la première chose que le client vit sur votre annonce, avant d'avoir lu un mot de la description ou vu le prix.

Un budget de poids réaliste

Rôle de l'imageObjectif raisonnable
Photo principale, avec zoom150 à 300KB
Image de galerie secondaire ou vignette60 à 120KB
Photo principale mobile, en haut de pagemoins de 150 à 200KB environ

Ce sont des objectifs de travail tirés des recommandations actuelles d'optimisation d'images, et non une spécification officielle d'une plateforme ; ils varient un peu selon la complexité de l'image. Un produit simple sur fond blanc se compresse davantage qu'une scène chargée avant que la perte de qualité ne devienne visible. Considérez donc le tableau comme un plafond, pas comme une règle à atteindre exactement.

L'ordre des étapes qui fait vraiment gagner des octets

  1. 1Redimensionnez avant de compresserUn appareil photo ou un outil de génération exporte couramment en 3000 à 4000 pixels de large. Si la photo s'affiche dans un emplacement de 1200 pixels sur votre page, redimensionnez-la d'abord à peu près à cette largeur. Compresser une image surdimensionnée revient à livrer une image surdimensionnée, simplement un peu plus petite.
  2. 2Exportez en WebP quand votre plateforme le permetLe WebP est couramment 25 à 35 pour cent plus léger qu'un JPEG à qualité visuelle égale, et l'AVIF peut aller encore plus loin. La plupart des plateformes e-commerce et des navigateurs actuels prennent en charge le WebP ; vérifiez si la vôtre le sert automatiquement ou si le fichier doit être importé directement dans ce format.
  3. 3Réglez la qualité JPEG autour de 70 à 85 quand le WebP n'est pas possibleLes réglages d'export par défaut des logiciels de retouche sont souvent inutilement élevés. Une qualité dans cette plage est visuellement indiscernable de l'original pour la plupart des photos produit et nettement plus légère qu'un export à 100 pour cent.
  4. 4Supprimez les métadonnées intégréesLes réglages de l'appareil, les profils colorimétriques au-delà de ce dont la page a besoin et les données GPS que certains téléphones intègrent ajoutent un poids que le client ne voit jamais. La plupart des outils de compression les suppriment par défaut ; vérifiez que le vôtre le fait.

La distinction qui compte le plus :

  • La compression sans perte conserve chaque pixel exactement comme capturé et réduit à peine une photographie. Elle convient aux graphismes à aplats de couleur et aux contours nets, pas à la photographie
  • La compression avec perte élimine des données que l'œil humain remarque difficilement, et c'est là que se trouvent les vraies économies pour une photo
  • Un encodeur moderne bien réglé reste très en dessous du seuil où un client perçoit la différence, bien avant d'atteindre celui où vous la percevriez

Où se place une photo générée ou retouchée

Une photo produite par n'importe quel outil de retouche ou de génération a besoin du même passage de redimensionnement et de compression qu'une photo sortie d'appareil. Ces outils exportent souvent en pleine résolution par défaut, et un export en pleine résolution pose le même problème de poids, que les pixels viennent d'un capteur ou d'un modèle. Traitez-la comme un fichier brut qui attend le même budget, pas comme une ressource terminée.

Common questions

Compresser mes photos produit les rendra-t-il moins belles ?
Pas avec un réglage raisonnable. La compression avec perte dans les plages décrites ici est calibrée pour éliminer le détail que l'œil humain ne perçoit pas ; une photo correctement compressée paraît identique à taille d'affichage normale tout en se chargeant en une fraction du temps.
Dois-je utiliser le WebP ou rester sur le JPEG ?
Utilisez le WebP si votre plateforme de boutique le prend en charge, car il est généralement 25 à 35 pour cent plus léger qu'un JPEG à qualité égale. Ne revenez à un JPEG bien réglé que si votre plateforme ou votre thème ne sert pas le WebP automatiquement.
Faut-il des tailles d'image distinctes pour mobile et ordinateur ?
Idéalement oui. Un client sur mobile voit la photo dans un espace bien plus petit qu'un client sur ordinateur ; servir un fichier plus léger sur mobile fait donc gagner un vrai temps de chargement sans perte de qualité visible sur cet écran.
Le poids des images influence-t-il vraiment les ventes, ou seulement un score de vitesse ?
La vitesse de page et la conversion sont assez liées pour que la plupart des plateformes e-commerce les traitent désormais comme un facteur de classement et de conversion, pas seulement comme un test en laboratoire. Une image principale qui pousse à elle seule la page au-delà du seuil de 2,5 secondes du Largest Contentful Paint est un ralentissement réel et mesurable que le client ressent, pas un score abstrait.

Keep reading