Points à retenir
- Shopify convertit automatiquement les images en WebP — mais les fichiers sources trop lourds ralentissent quand même votre boutique.
- Les images non optimisées sont l’une des causes les plus fréquentes d’un mauvais score Core Web Vitals sur Shopify.
- Compressez les images avant de les importer en utilisant des outils gratuits comme Squoosh ou TinyPNG.
- Visez moins de 500 Ko pour les images produits et moins d’1 Mo pour les images hero/bannières.
Shopify gère beaucoup de choses pour vos images : conversion de format, diffusion via CDN, redimensionnement responsive. Mais il ne peut travailler qu’avec ce que vous lui donnez.
Si vous importez une photo produit de 5 Mo, Shopify servira une version plus petite — mais le fichier source reste volumineux, ce qui crée de la surcharge. Compresser vos images avant de les importer est une habitude simple qui s’avère payante : temps de chargement plus rapides, meilleur SEO et baisse du taux de rebond.
Pourquoi vous pouvez nous faire confiance
Jacques a plus de 15 ans d’expérience en développement Shopify et a diagnostiqué les problèmes de lenteur de centaines de boutiques. Nous avons créé Fudge — un éditeur de boutique assisté par IA utilisé par des centaines de boutiques Shopify, noté 5.0 sur le Shopify App Store.
Est-ce que Shopify compresse les images automatiquement ?
En partie.
Shopify s’occupe automatiquement de :
- Convertir les images au format WebP (fichier plus léger, même qualité)
- Diffuser les images via son CDN global
- Générer plusieurs tailles pour s’adapter à la largeur de l’écran (responsive)
Shopify ne fait PAS :
- Compresser vos fichiers sources avant de les stocker
- Supprimer les métadonnées inutiles de vos uploads
- Lazy-loader toutes les images de la page par défaut (ça dépend de votre thème)
Donc oui, Shopify aide — mais partir d’une image déjà compressée donne moins de travail au CDN et accélère encore plus les choses.
Pourquoi la compression d’images est importante pour votre boutique Shopify
La vitesse de la page a un impact direct sur deux choses : le classement SEO et le taux de conversion.
Google utilise les Core Web Vitals comme critère de classement. La principale métrique affectée par les images trop lourdes est le Largest Contentful Paint (LCP) — le temps qu’il faut pour que le plus grand élément de la page (généralement une image hero ou une photo produit) s’affiche.
Un LCP lent = un moins bon classement. Et pour chaque 100 ms de temps de chargement en plus, le taux de conversion chute. Les images compressées sont le moyen le plus rapide d’améliorer les performances pour la plupart des boutiques Shopify.
Sur le même sujet : Ajouter du texte alternatif aux images sur Shopify.
Comment compresser des images avant de les importer sur Shopify
Outils gratuits
Squoosh — Le compresseur sur navigateur de Google. Gère le WebP, l’AVIF et le JPEG. Affiche une comparaison avant/après du poids du fichier. Idéal pour des images individuelles.
TinyPNG / TinyJPG — Compression par simple glisser-déposer. Réduit les fichiers PNG et JPEG de 60 à 80 % avec un minimum de perte de qualité visible. Gratuit jusqu’à 500 images/mois.
ImageOptim — Application Mac de compression par lot (batch). Parfait pour traiter tout un dossier d’images avant le lancement d’un produit.
Paramètres recommandés
| Type d’image | Format | Poids max | Dimensions max |
|---|---|---|---|
| Image produit | WebP ou JPEG | 500 Ko | 2048 × 2048 px |
| Hero / bannière | WebP ou JPEG | 1 Mo | 2560 × 1440 px |
| Image de fond | WebP ou JPEG | 800 Ko | 1920 × 1080 px |
| Icône / logo | PNG ou SVG | 100 Ko | Selon les besoins |
Astuce : Vous n’avez pas besoin d’images dépassant 2048 px de large. La largeur d’affichage maximale sur Shopify est de 2048 px — tout ce qui est plus grand ne fait qu’alourdir le fichier sans améliorer la qualité.
Comment compresser l’existant en lot sur Shopify
Si votre boutique contient déjà des centaines d’images non optimisées, les repasser une par une à la main n’est pas jouable. Une application Shopify peut s’occuper de la compression en lot de votre médiathèque existante.
TinyIMG et Crush.pics sont deux options très réputées sur le Shopify App Store. Les deux scrutent vos images produits actuelles, les compressent et remplacent les originaux — le plus souvent sans aucune différence de qualité visible.
Cherchez une application qui affiche le poids des fichiers avant/après et vous permet de revenir en arrière (rollback) si besoin.
Comment lazy-loader les images sur Shopify
Le lazy loading fait en sorte que les images ne se chargent que lorsqu’un utilisateur s’en approche en scrollant — au lieu de toutes se charger d’un coup à l’ouverture de la page. Ça améliore énormément le temps initial de chargement.
La plupart des thèmes Shopify modernes (Dawn, Horizon, etc.) font du lazy loading par défaut grâce à l’attribut loading="lazy" sur les balises <img>. Pour vérifier sur votre boutique : clic droit sur n’importe quelle image → Inspecter → cherchez loading="lazy" dans le code HTML.
Si votre thème ne l’intègre pas, un développeur (ou Fudge) peut l’ajouter à vos templates d’images.
Quel impact a la compression d’images sur votre score de vitesse Shopify
Le score de vitesse de Shopify s’appuie sur Google Lighthouse, qui mesure les performances en conditions réelles. Les images trop lourdes font souvent ressortir ces erreurs :
- “Properly size images” (Redimensionnez correctement les images) — les images servies sont beaucoup plus grandes que ce qui est affiché
- “Efficiently encode images” (Encodez les images efficacement) — les images pourraient être davantage compressées
- “Defer offscreen images” (Différez les images hors écran) — les images chargent avant même que l’utilisateur puisse les voir
Corriger les deux premiers points est totalement entre vos mains en compressant avant d’importer. La plupart des boutiques peuvent gagner 10 à 30 points sur leur score de vitesse rien qu’avec l’optimisation d’images.
Quel format d’image utiliser sur Shopify ?
Utilisez le WebP pour obtenir le meilleur ratio qualité/poids — c’est en général 25 à 35 % plus léger que le JPEG pour la même qualité visuelle, et c’est supporté par tous les navigateurs modernes. Shopify convertit automatiquement les images importées en WebP lorsqu’il les sert aux navigateurs compatibles. Pour les images produits, le JPEG reste la valeur de repli (fallback) sûre pour les anciens outils. Utilisez le PNG uniquement si vous avez besoin d’un fond transparent (logos, icônes). Évitez le GIF, sauf pour les très courtes animations en boucle — préférez de courtes vidéos MP4 pour une bien meilleure compression. Voir aussi : comment lazy-loader les images sur Shopify pour la prochaine étape de l’optimisation des performances de vos médias.
Sur le même sujet : Accélérer un thème Shopify.
Sur le même sujet : Corriger les scripts qui bloquent le rendu sur Shopify.