Front & intégration Guide

Images produits en WebP et AVIF : le guide pour alléger une boutique sans perdre en qualité

Les images représentent souvent l'essentiel du poids d'une page produit. Formats modernes, dimensions adaptées à l'écran, image principale chargée en priorité et attributs de taille : les réglages qui allègent une boutique sans dégrader les photos.

Par

4 min de lecture

Dégradé bleu évoquant des images de produits optimisées

Sur une page produit, les photos sont à la fois l’argument de vente principal et, très souvent, la plus grosse part du poids téléchargé. Une galerie de huit visuels exportés en JPEG pleine résolution peut peser plusieurs mégaoctets sur un téléphone qui n’en affichera jamais que la largeur de son écran. Le problème ne se règle pas en dégradant les photos, mais en envoyant à chaque écran l’image dont il a besoin, dans le format le plus léger qu’il sait lire.

WebP, AVIF : où en est la compatibilité

Le WebP est lu par tous les navigateurs actuels. L’AVIF, plus récent et généralement plus compact encore à qualité perçue égale, est pris en charge par les principaux navigateurs, Safari compris depuis sa version 16.4. Côté plateformes, WordPress accepte le WebP depuis sa version 5.8 et l’AVIF depuis la 6.5 ; PrestaShop 9 gère nativement les deux formats. Le vrai sujet n’est donc plus la compatibilité, mais la chaîne de production des images.

Poids relatif indicatif d’une même photo produit en JPEG, WebP et AVIF Même photo, même qualité perçue — ordre de grandeur indicatif JPEG 100 % WebP ≈ 70 % AVIF ≈ 50 %
Les gains réels varient selon l’image ; ils se mesurent sur son propre catalogue.

Les réglages, dans l’ordre

  1. Des originaux propres. Une photo source par produit, en bonne définition, recadrée au même ratio pour tout le catalogue. Des ratios homogènes évitent les sauts de mise en page.
  2. Des déclinaisons de taille. La plateforme génère plusieurs largeurs (vignette, liste, fiche, zoom). Chaque emplacement de la page appelle la taille la plus proche de son affichage réel, et l’attribut srcset laisse le navigateur choisir selon l’écran.
  3. Des formats modernes. WebP ou AVIF pour les déclinaisons, avec repli automatique si nécessaire. Une conversion à la volée par le serveur ou par un CDN évite de stocker chaque variante à la main.
  4. Largeur et hauteur déclarées. Les attributs width et height sur chaque image réservent la place avant le chargement et suppriment les décalages de mise en page.
  5. La bonne priorité. L’image principale de la fiche produit est chargée tout de suite, avec fetchpriority="high", et jamais en chargement différé. Les images situées plus bas (galerie, produits associés) passent en loading="lazy".

Le cinquième point est l’erreur la plus fréquente : un réglage global de chargement différé appliqué à toutes les images, y compris la photo principale. C’est justement elle qui détermine, le plus souvent, le Largest Contentful Paint de la page. La documentation MDN sur les images adaptatives détaille srcset et sizes.

Le texte alternatif, oublié des optimisations

Une image produit sans texte alternatif est invisible pour un lecteur d’écran et muette pour les moteurs de recherche d’images. Le texte alternatif décrit ce que montre la photo (« sac cabas en cuir camel, vue de face »), pas le nom du fichier ni une liste de mots-clés. Sur un gros catalogue, il se génère à partir des attributs du produit puis se relit sur les références phares.

Ce qu’il faut retenir

  • WebP et AVIF sont lus par tous les navigateurs actuels ; WordPress et PrestaShop 9 les gèrent.
  • Chaque emplacement reçoit la taille d’image dont il a besoin, grâce à srcset.
  • L’image principale se charge en priorité, jamais en différé.

Je ne demande jamais à une équipe de « faire attention » au poids des images qu’elle dépose : ça ne tient pas plus de deux semaines. Le bon réglage est celui qui ne dépend de personne, où la plateforme génère d’elle-même les bonnes tailles et les bons formats à chaque dépôt, quelle que soit la photo envoyée. — Simon Janvier

Vos pages produits sont lourdes à charger sur mobile ? L’audit offert mesure le poids de vos images et chiffre le gain possible. Demander l’audit e-commerce

À lire aussi