# Comment optimiser les images produits pour la performance

> Sur une fiche produit ou une page catégorie, les images représentent en général la majorité du poids total de la page. C’est aussi le levier de performance le plus simple à actionner, sans toucher au code ni à l’hébergement.

- Source canonique : [https://allaux.fr/guides/optimiser-images-produits](https://allaux.fr/guides/optimiser-images-produits)
- Langue : FR
- Dernière mise à jour : 2026-07-26

## Réponse directe

> Servez des images dans un format compressé moderne (WebP ou AVIF), aux dimensions réellement affichées plutôt qu’en pleine résolution, et différez le chargement de celles situées hors de l’écran visible au chargement grâce à l’attribut loading="lazy".

## Les leviers à actionner dans l’ordre

1. **Redimensionner à la taille réellement affichée** — Une image de plusieurs milliers de pixels de large affichée dans une vignette de 300 pixels gaspille de la bande passante sans aucun bénéfice visuel. Les dimensions générées doivent correspondre aux tailles réellement utilisées par le thème.
2. **Convertir vers un format compressé moderne** — WebP, et de plus en plus AVIF, offrent un poids nettement inférieur au JPEG ou au PNG à qualité visuelle équivalente. La plupart des CMS et hébergements récents savent générer ou convertir automatiquement ces formats.
3. **Différer le chargement des images hors écran** — L’attribut HTML loading="lazy" indique au navigateur de ne charger une image que lorsqu’elle approche de la zone visible, ce qui accélère l’affichage initial d’une page contenant de nombreux produits.
4. **Ne pas différer l’image principale visible au chargement** — L’image la plus grande visible immédiatement (souvent l’image produit principale) ne doit pas être différée, car c’est justement celle qui détermine la mesure du LCP, un des indicateurs Core Web Vitals de Google.
5. **Servir les images via un CDN si le trafic le justifie** — Un CDN répartit la livraison des images depuis un point géographique proche du visiteur, ce qui réduit le temps de transfert au-delà de ce que la seule compression peut apporter.

## Pourquoi les images pèsent autant sur la performance perçue

Sur une page catégorie affichant plusieurs dizaines de produits, chaque vignette non optimisée s’additionne aux autres : une économie de quelques dizaines de kilo-octets par image, multipliée par le nombre de produits visibles, change directement le temps de chargement perçu par le visiteur, bien plus qu’une optimisation équivalente sur un seul fichier CSS ou JavaScript.

Le lien avec le référencement est direct : le LCP, l’un des trois indicateurs Core Web Vitals utilisés par Google, mesure justement le temps d’affichage du plus grand élément visible de la page, très souvent une image produit sur une fiche ou une bannière sur une page d’accueil. Optimiser les images améliore donc à la fois l’expérience du visiteur et un critère explicitement pris en compte par Google.

## Les erreurs courantes

- Uploader des photos directement issues d’un appareil photo ou d’un smartphone, souvent plusieurs mégaoctets, sans aucun redimensionnement préalable.
- Différer le chargement de l’image principale visible immédiatement, ce qui dégrade au contraire le LCP au lieu de l’améliorer.
- Convertir en formats modernes sans prévoir de version de repli pour les navigateurs plus anciens qui ne les prennent pas en charge.
- Compresser trop fortement au point de dégrader visiblement la qualité perçue, ce qui peut nuire à la confiance du visiteur sur une fiche produit.

## Penser aussi à la déclinaison zoomée

> Sur une fiche produit avec fonction de zoom, l’image haute résolution utilisée pour le zoom n’a pas besoin d’être chargée avant que le visiteur ne déclenche réellement cette fonction. La différer au clic ou au survol évite de charger une image lourde sur chaque visite alors qu’une minorité de visiteurs utilise le zoom.

## FAQ

### Faut-il optimiser les images manuellement ou existe-t-il des outils automatiques ?

De nombreux modules PrestaShop et extensions WooCommerce automatisent la compression et la conversion au moment de l’upload ou après coup sur l’ensemble du catalogue existant, ce qui évite un traitement manuel image par image.

### L’optimisation des images suffit-elle à résoudre une boutique lente ?

Elle apporte un gain réel et souvent rapide à mettre en œuvre, mais elle ne corrige pas un problème de requêtes SQL non indexées ou de cache mal configuré : c’est un levier parmi plusieurs, pas une solution unique.

### Le format WebP est-il compatible avec tous les navigateurs ?

Les navigateurs modernes le prennent en charge très largement aujourd’hui. Pour les cas résiduels d’incompatibilité, une balise picture avec une version de repli en JPEG ou PNG garantit l’affichage sur tous les navigateurs.