Pourquoi vos images Shopify plombent votre conversion
Sur une fiche produit Shopify moyenne, les images représentent 60 à 80 % du poids total de la page. Chaque seconde gagnée au chargement, c’est environ 4 à 7 % de taux de conversion en plus (source : étude Deloitte Milliseconds Make Millions, 2020).
Le problème classique :
- Le thème accepte une image source en JPG 4000×3000 (8 Mo).
- Shopify la redimensionne côté CDN mais conserve le format d’entrée.
- Le visiteur mobile télécharge un JPG de 350 Ko là où un WebP de 90 Ko suffirait — pour un rendu visuel strictement identique.
Sur 20 produits × 5 visuels par fiche, ça représente plus de 25 Mo inutilement transférés par session.
Les trois leviers à actionner
1. Convertir vos sources en WebP (ou AVIF)
Le format WebP offre en moyenne 30 % de poids en moins qu’un JPG équivalent à qualité perçue identique. AVIF descend encore plus bas (jusqu’à -50 % vs JPG) mais sa prise en charge reste imparfaite sur certains navigateurs anciens.
Règle pratique : uploadez vos masters en WebP qualité 82-88. C’est le sweet spot entre poids et fidélité couleur.
2. Calibrer la dimension réelle d’affichage
Inutile de servir une image 2400×1800 si elle s’affiche à 600×450 dans le thème. Pour la majorité des thèmes Shopify (Dawn, Sense, Refresh) :
| Emplacement | Largeur native recommandée |
|---|---|
| Hero homepage | 1920 px |
| Carrousel produit | 1200 px |
| Vignette collection | 600 px |
| Image blog | 1200 px |
3. Activer le loading="lazy" partout en dehors du fold
Shopify l’ajoute par défaut sur les thèmes récents, mais vérifiez vos
sections custom (Liquid) — un <img> sans attribut bloque le LCP.
Le workflow concret en 4 étapes
- Auditer : Lighthouse → onglet Opportunities → “Serve images in next-gen formats”.
- Préparer un batch des photos produit en
.jpghaute résolution. - Convertir tout le lot en WebP avec MediaBay — glissez-déposez, format de sortie WebP, qualité 85, taille max 1200 px.
- Réuploader dans Shopify (admin → Fichiers, ou directement dans la fiche produit). Le CDN Shopify servira ensuite la bonne taille selon le viewport.
Cas réel : -1.8s sur le LCP d’un shop mode
Sur un shop client (catalogue ~40 références) :
- LCP avant : 3.2 s (4G mobile)
- LCP après conversion lot en WebP : 1.4 s
- Poids moyen d’une fiche produit : 2.8 Mo → 720 Ko
Le bénéfice SEO est immédiat : Google déprécie depuis 2023 les pages dont le LCP dépasse 2.5 s.
Et la confidentialité de vos visuels ?
Beaucoup d’outils de conversion en ligne envoient vos images sur leurs serveurs — risque RGPD si vos photos contiennent des personnes, des prototypes confidentiels, ou simplement votre catalogue avant lancement.
MediaBay convertit 100 % localement dans votre navigateur, via WebAssembly. Aucun upload, aucun stockage côté serveur. Auditable dans l’onglet Network des DevTools.
TL;DR
- Convertissez vos JPG en WebP qualité 85, taille max 1200 px sur la largeur produit.
- Vérifiez
loading="lazy"sur tout<img>hors du fold. - Mesurez via Lighthouse avant/après — visez un LCP < 2.5 s.
- Faites-le sans uploader vos photos : convertissez-les en local.