Je déboguais une boutique PrestaShop le mois dernier quand quelque chose m’a frappé. Le propriétaire de la boutique avait passé des semaines à optimiser le code de son thème, supprimer les modules inutiles et minifier le CSS — tous les conseils de performance standards. Mais son score Lighthouse était toujours dans les 40. Le coupable ? Une page de collection chargeant 24 images produit, chacune de plus de 800 Ko, directement sorties de l’appareil photo.
Voici la vérité inconfortable sur la performance des boutiques en ligne : vous pouvez avoir le code de thème le plus propre du monde, mais si vos images produit sont gonflées, vos scores Core Web Vitals n’iront nulle part. Et avec l’accent mis par Google en 2026 sur l’INP (Interaction to Next Paint) devenu un facteur de classement strict, les pages produit lentes vous coûtent directement du trafic organique et des conversions.
Pourquoi les boutiques e-commerce sont particulièrement lourdes en images
La plupart des sites de contenu ont 5-15 images par page. Une page de collection typique sur une boutique en ligne ? 20-50 vignettes produit. Une page détail produit ? Généralement 5-8 images de variantes haute résolution, plus des vues zoom. Ajoutez un slider de page d’accueil, des bannières promotionnelles et des photos lifestyle, et vous obtenez plus de 60 images sur une seule session.
Le CDN d’images de votre plateforme les sert efficacement, mais le CDN ne réduit pas magiquement les fichiers de 2 Mo. Il les livre juste rapidement. Le navigateur doit encore télécharger, décoder et afficher chaque octet — et sur une page de collection, cela se produit 30 fois d’affilée.
Le calcul est brutal. Si votre image produit moyenne fait 1,5 Mo et que vous en chargez 30 sur une page de collection, cela fait 45 Mo d’images. Même sur une connexion rapide (50 Mbps), cela représente plus de 7 secondes de téléchargement pur d’images — avant tout rendu. Sur mobile ? N’en parlons pas.
Ce que les Core Web Vitals mesurent réellement (et pourquoi les images les plombent)
Les trois métriques Core Web Vitals de Google se décomposent différemment lorsque les images sont le goulot d’étranglement :
- LCP (Largest Contentful Paint) : C’est généralement votre image héro ou la première photo produit. Si elle fait plus de 1 Mo, votre LCP est condamné. Google veut un LCP inférieur à 2,5 secondes. Une seule image héro non optimisée peut à elle seule dépasser les 5 secondes.
- CLS (Cumulative Layout Shift) : Les images sans attributs explicites de largeur/hauteur font sauter le contenu pendant le chargement. Les thèmes de boutique se sont améliorés sur ce point, mais les grilles produit en lazy-loading peuvent encore provoquer des décalages si les dimensions ne sont pas définies.
- INP (Interaction to Next Paint) : C’est la nouveauté pour 2026. Lorsqu’un utilisateur appuie sur un filtre de collection ou fait défiler les images de variantes, combien de temps avant que la page réponde ? Les grandes images en mémoire ralentissent chaque interaction car le navigateur est occupé à décoder et composer.
Une boutique que j’ai auditée avait un LCP de 6,8 secondes. Après compression de leurs images produit (mêmes dimensions, juste correctement optimisées), le LCP est tombé à 1,9 seconde. Même thème. Même code. Juste des images plus petites.
Le flux de travail de compression d’images e-commerce qui fonctionne
Les plateformes e-commerce créent automatiquement des versions redimensionnées des images téléchargées pour différents contextes (vignettes, grilles de collection, vues zoom). Mais voici ce que la plupart des propriétaires de boutique ignorent : la plateforme ne compresse pas l’image source que vous téléchargez. Elle sert exactement le fichier que vous lui avez donné, juste redimensionné. Si vous avez téléchargé un JPEG non optimisé de 3 Mo, chaque variante générée hérite de ce poids.
La solution se fait donc avant le téléchargement. Voici le flux de travail :
1. Compressez d’abord vos images source
Avant que quoi que ce soit ne touche les serveurs de votre boutique, faites passer vos photos produit dans un compresseur. J’utilise une approche en deux passes :
- Passe 1 : Compressez avec une qualité de 75-80. Pour la plupart des photos produit, cela produit une réduction de 60-70 % de la taille du fichier sans perte de qualité visible. Une photo produit de 3,2 Mo devient environ 900 Ko.
- Passe 2 : Vérifiez la sortie compressée à la taille d’affichage réelle (généralement 600-800 px de large). Si elle est toujours nette, publiez-la. S’il y a des artefacts visibles, augmentez la qualité à 85 et recompressez.
2. Utilisez le bon format
Votre plateforme prend en charge JPEG, PNG et WebP. Pour les photos produit :
- JPEG qualité 75-80 : Idéal pour la plupart des photos produit. Bonne compression, universellement pris en charge.
- WebP : Environ 25 % plus petit que le JPEG à qualité égale. Certaines plateformes convertissent automatiquement en WebP pour les utilisateurs Chrome/Firefox, mais télécharger des fichiers source WebP économise la surcharge de conversion côté serveur.
- PNG : Uniquement pour les images produit qui nécessitent de la transparence. Pour les photos standards, le JPEG sera 5-10 fois plus petit.
3. Traitez votre catalogue par lots
Personne n’a le temps de compresser 200 images produit une par une. CompactJPG gère la compression par lots — déposez tout votre dossier de photos produit, réglez la qualité sur 75 et compressez tout en une fois. Téléchargez le ZIP et c’est terminé.
Métriques réelles d’une refonte de boutique en ligne
Voici ce qui s’est réellement passé quand j’ai aidé une boutique à optimiser ses images :
| Métrique | Avant | Après |
|---|---|---|
| LCP (page de collection) | 6,8s | 1,9s |
| Poids total de la page | 28,4 Mo | 6,2 Mo |
| Taille moyenne des images produit | 1,42 Mo | 310 Ko |
| INP (interaction filtre catégorie) | 380 ms | 95 ms |
| Trafic organique (30 jours plus tard) | Référence | +18 % |
L’augmentation du trafic n’était pas magique — de meilleurs scores CWV ont amélioré leur position pour les mots-clés existants. Même contenu, mêmes produits, pages plus rapides.
Erreurs courantes d’images e-commerce à éviter
- Télécharger directement depuis votre reflex : Les appareils photo produisent des fichiers énormes destinés à l’impression, pas au web. Compressez toujours avant de télécharger sur votre boutique.
- Utiliser le PNG pour les photos : Je vois cela constamment. Une photo produit PNG de 4 Mo qui pourrait être un JPEG de 300 Ko. La transparence ne vaut pas le sacrifice de vitesse de page, sauf si vous en avez réellement besoin.
- Images « retina » en double résolution : Des images de 2000 px de large sur une fiche produit de 400 px. Oui, elles sont nettes sur les écrans retina. Non, la plupart des utilisateurs ne voient pas la différence entre une densité 2x et 1,5x. Envisagez 1,5x là où la qualité le permet.
- Ignorer le mobile : Vos statistiques montrent probablement plus de 60 % de trafic mobile. Ces images de 800 px de large pour ordinateur sont servies sur des écrans de téléphone de 375 px de large. Utilisez les balises d’image responsives de votre plateforme et servez des variantes de taille appropriée.
En résumé
Votre plateforme e-commerce vous offre une excellente base. Mais elle ne peut pas réparer ce que vous lui donnez. Si vous téléchargez des images non optimisées, votre boutique sera lente — point final. La bonne nouvelle, c’est que la compression d’images est le gain de performance le plus facile à obtenir. Pas de codage. Pas de modification de thème. Faites simplement passer vos photos produit dans un bon compresseur avant de les télécharger, et regardez vos scores Core Web Vitals grimper.
Vos clients ne remarqueront pas la compression. Ils remarqueront simplement que votre boutique se charge avant qu’ils ne perdent patience et ne repartent.