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.
Les leviers à actionner dans l’ordre
-
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.
-
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.
-
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.
-
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.
-
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.
Questions fréquentes
Faut-il optimiser les images manuellement ou existe-t-il des outils automatiques ?
L’optimisation des images suffit-elle à résoudre une boutique lente ?
Le format WebP est-il compatible avec tous les navigateurs ?
Décrivez votre besoin en 1 minute
Quelques questions ciblées pour que je vous réponde avec une estimation, pas avec un questionnaire de plus.