Accueil » Blog Tunnel de Vente » Creation De Site Web » Shopify et images : les formats WebP et AVIF qui allègent les pages sans perte visible

Shopify et images : les formats WebP et AVIF qui allègent les pages sans perte visible

Comparaison des formats d'image WebP, AVIF et JPEG sur une boutique Shopify avec illustration du gain de poids et de la conservation de la qualité visuelle pour les photos produits

Les images font et défont la performance d’une boutique Shopify. Sur une fiche produit moyenne, elles représentent 70% du poids transféré, et ce sont elles qui décident en grande partie du temps de chargement perçu par le visiteur. Le format JPEG, qui domine encore les bibliothèques produits, date de 1992 et n’a quasiment plus évolué depuis. WebP et AVIF, beaucoup plus récents, descendent à des poids 30 à 50% inférieurs pour la même qualité visuelle. Chez Propuls’Lead, nous avons mesuré sur des dizaines de boutiques ce que ce changement de format produit comme effet sur les conversions, et le retour sur effort dépasse celui de presque toutes les autres optimisations techniques.

Comprendre ce qui se cache derrière les formats d’image modernes

WebP est sorti des laboratoires Google en 2010. Son algorithme combine plusieurs techniques de compression qui permettent de descendre les poids tout en préservant la finesse visuelle. Un visuel produit JPEG de 350 Ko descend typiquement à 180 Ko en WebP, sans qu’aucun œil humain ne perçoive la différence dans des conditions de navigation normales. Tous les navigateurs modernes supportent WebP depuis 2020, ce qui couvre aujourd’hui plus de 96% du parc visiteurs.

AVIF est arrivé en 2019, basé sur la même technologie que les codecs vidéo récents. Sur les mêmes images, AVIF compresse encore 25 à 35% mieux que WebP. Le même visuel produit qui pesait 350 Ko en JPEG et 180 Ko en WebP descend à 110 Ko en AVIF. La contrepartie tient au temps d’encodage, plus long, et à un support navigateur encore légèrement en retrait (autour de 90%). La bonne pratique consiste à servir AVIF aux navigateurs qui le supportent, WebP en repli, et JPEG pour les rares cas restants.

Mesurer le gain réel sur votre boutique avant de basculer

Avant de lancer une opération de conversion massive, il faut savoir ce qu’on gagne réellement. Le bon protocole consiste à prendre cinq pages produits représentatives, à mesurer leur poids actuel via Chrome DevTools, puis à recalculer ce poids si les images passaient en WebP ou AVIF. Cette projection se fait en quelques minutes : on télécharge les images, on les convertit via Squoosh ou un outil similaire, et on compare les poids obtenus.

L’écart varie selon le type d’image. Les photos produit sur fond uni gagnent typiquement 30 à 40% en WebP. Les images riches en détails comme les textiles, les bijoux ou les paysages gagnent souvent plus, jusqu’à 50%. Les illustrations vectorisées ou les images très simples gagnent moins. Cette mesure pré-conversion évite les attentes irréalistes et permet de prioriser les pages où le bénéfice sera le plus marqué pour le visiteur final.

Une autre dimension à intégrer dans la projection concerne la part du trafic mobile. Sur une boutique dont 70% des visites viennent du mobile, le bénéfice du passage en WebP se concentre sur cette majorité, parce que les réseaux mobiles paient chaque kilooctet économisé en vitesse perçue. Sur une boutique très majoritairement desktop avec des connexions fibres, le gain reste positif mais moins spectaculaire dans les sensations utilisateur.

Convertir les images existantes avec la méthodologie PROPULSE

Sur une boutique qui a deux ou trois ans d’existence, la bibliothèque produits peut contenir plusieurs milliers d’images au format JPEG. La conversion une par une est impensable. Dans le cadre de la méthodologie PROPULSE que nous appliquons chez Propuls’Lead, nous procédons par lots successifs, en commençant par les pages les plus visitées et en redescendant progressivement vers les pages moins consultées.

Plusieurs applications Shopify automatisent ce travail. TinyIMG, Crush.pics et Hyperspeed proposent une conversion automatique de toutes les images du catalogue vers WebP avec repli JPEG. Le processus tourne en arrière-plan pendant quelques heures et ne demande aucune intervention manuelle. Pour les boutiques qui préfèrent garder le contrôle, l’outil en ligne Squoosh de Google permet de traiter les images une par une avec un contrôle fin du niveau de compression. Notre article sur les optimisations à appliquer sur chaque boutique Shopify précise la place de cette conversion dans une démarche d’optimisation globale.

Imposer un workflow propre pour les nouvelles images produits

Convertir l’existant ne sert à rien si les nouveaux produits arrivent encore en JPEG 4000 pixels à 3 Mo. Le vrai chantier consiste à imposer une discipline en amont, dès la production des visuels. Chez les marchands que nous accompagnons, nous documentons un cahier des charges précis pour la production photo : dimensions maximales 2000 pixels de large, format de sortie WebP ou AVIF selon les outils du studio, niveau de compression défini une fois pour toutes.

Quand la production photo passe par un prestataire extérieur, ce cahier des charges devient un livrable contractuel. Le prestataire livre les images dans le bon format, à la bonne taille, prêtes à uploader sur Shopify. La discipline d’équipe vaut largement l’investissement initial dans la rédaction du cahier des charges, parce qu’elle élimine définitivement le retour des problèmes de poids sur toutes les futures collections. Cette approche structurée évite le retour permanent des problèmes de poids et permet à l’équipe e-commerce de se concentrer sur les sujets à plus forte valeur ajoutée. Notre article sur les redirections produits epuises Shopify complète cette discipline éditoriale avec la maintenance des URL dans la durée.

Vérifier que Shopify sert bien le bon format au bon navigateur

Shopify dispose depuis fin 2022 d’un système qui sert automatiquement WebP aux navigateurs compatibles via la balise picture HTML5. Cette automatisation fonctionne sur les thèmes modernes, mais pas systématiquement sur les thèmes plus anciens ou fortement personnalisés. La vérification prend deux minutes : ouvrir une fiche produit, faire un clic droit sur l’image principale, choisir « Inspecter », et regarder l’extension du fichier servi par Shopify. Si elle affiche .webp ou .avif, tout va bien. Si elle affiche encore .jpg, le thème ne tire pas parti de l’automatisation Shopify.

Dans ce dernier cas, deux options s’offrent. Soit on met à jour le thème vers une version récente, ce qui prend généralement une demi-journée selon les personnalisations en place. Soit on installe une application de gestion d’images qui prend le relais sur les fichiers servis. La première option reste préférable pour la propreté du code et la maintenance future. Cette vérification rejoint la démarche d’audit décrite dans notre article sur accelerer site wordpress 10 optimisations vraie difference, qui s’applique avec les mêmes principes au monde Shopify.

Surveiller les pièges classiques après la conversion

Une conversion massive peut produire quelques effets secondaires. Sur les boutiques où les images servent aussi à des intégrations externes (flux Google Shopping, marketplace Amazon, partenaires affiliés), il faut vérifier que ces flux acceptent les formats WebP et AVIF. La plupart des plateformes les acceptent désormais, mais certains intégrateurs B2B plus anciens demandent encore du JPEG. Dans ce cas, la solution consiste à garder une version JPEG des images destinées au flux externe, séparée de celle servie au site.

Le second piège tient à la qualité visuelle perçue. Sur certaines images très sombres ou très saturées, une compression WebP agressive peut introduire des artefacts visibles à l’œil. La parade consiste à tester chaque réglage de qualité sur trois ou quatre images représentatives avant de lancer la conversion massive. Un niveau de qualité à 80% offre le meilleur compromis dans 95% des cas, mais quelques catégories de produits méritent un niveau supérieur. Cette finesse d’application distingue les boutiques bien tenues des boutiques optimisées à la chaîne.

Ce qu’il faut retenir avant de convertir votre catalogue

Le passage en WebP et AVIF est l’une des optimisations Shopify au meilleur rapport effort-résultat. Les gains atteignent 30 à 50% sur le poids des images, ce qui se traduit par une seconde gagnée sur le LCP des fiches produits et une amélioration mesurable des conversions mobiles. La démarche tient en quatre étapes : mesurer le gain potentiel sur quelques pages, convertir l’existant via une application automatisée, imposer une discipline pour les nouvelles images, vérifier que Shopify sert bien le bon format au bon navigateur. Chez Propuls’Lead, nous appliquons cette séquence sur chaque audit Shopify, parce qu’aucune autre intervention sur les images ne produit autant de bénéfice direct sur l’expérience visiteur. La conversion devient simplement un nouveau standard de travail, et chaque produit ajouté arrive d’office au bon format, sans charge mentale supplémentaire pour l’équipe en place ni vigilance quotidienne sur ce point.

Sources

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *