Points clés à retenir
- Shopify convertit automatiquement les images en WebP — mais les fichiers sources volumineux ralentissent toujours votre boutique.
- Les images non optimisées sont l’une des causes les plus courantes de mauvais scores Core Web Vitals sur Shopify.
- Compressez les images avant de les uploader en utilisant des outils gratuits comme Squoosh ou TinyPNG.
- Visez moins de 200 Ko pour les images de produits et moins de 300 Ko pour les images hero / bannières.
Pour compresser des images pour Shopify, passez-les par Squoosh ou TinyPNG avant de les uploader, gardez les photos de produits à une largeur de 2048 px ou moins, et utilisez une application comme TinyIMG pour les images déjà présentes sur votre boutique. Le CDN de Shopify les convertit et les redimensionne, mais ne résout pas le problème d’un fichier source trop lourd.
Si vous uploadez une photo de produit de 5 Mo, Shopify en servira une version plus petite, mais il part d’un fichier source lourd. Compresser les images avant de les uploader est une habitude simple qui s’avère payante avec des temps de chargement plus rapides, un meilleur SEO et des taux de rebond plus faibles.
Pourquoi vous pouvez nous faire confiance
Jacques a plus de 15 ans d’expérience en dev et a diagnostiqué des boutiques lentes pour des centaines de marques. Nous développons Fudge, l’opérateur IA pour les boutiques Shopify, utilisé par plus de 3 100 boutiques Shopify et noté 4.9 sur le Shopify App Store.
Est-ce que Shopify compresse les images automatiquement ?
En partie.
Ce que Shopify fait automatiquement :
- Convertit les images au format WebP (taille de fichier réduite, qualité identique)
- Diffuse les images via son CDN mondial
- Génère plusieurs tailles pour différentes largeurs d’écran
Ce que Shopify ne fait PAS :
- Compresser vos fichiers sources avant de les stocker
- Supprimer les métadonnées inutiles des fichiers importés
- Charger en lazy-load toutes les images de votre page par défaut (cela dépend de votre thème)
Donc oui, Shopify vous aide, mais partir d’une image déjà compressée donne moins de travail au CDN et accélère encore plus les choses.
Vous vous demandez si un CDN d’images tiers ferait mieux ? Consultez notre comparatif de CDN d’images pour Shopify pour savoir quand le CDN intégré suffit et quand Cloudinary ou Bunny valent leur prix.
Pourquoi la compression d’images est importante pour votre boutique Shopify
La vitesse des pages affecte directement deux choses : le classement SEO et le taux de conversion.
Google utilise les Core Web Vitals comme signal de classement. La métrique principale affectée par les grandes images est le Largest Contentful Paint (LCP) — le temps nécessaire pour que le plus grand élément de la page (généralement une image hero ou une photo de produit) se charge.
LCP lent = moins bon classement. Les pages plus lentes ont aussi tendance à moins bien convertir, et la compression des images est souvent le “quick win” (gain de vitesse le plus rapide) sur une boutique Shopify.
Pour le reste de l’optimisation de la vitesse, consultez Accélérer un thème 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 | Taille max du fichier | Dimensions max |
|---|---|---|---|
| Image produit | WebP ou JPEG | 200 Ko | 2048 × 2048 px |
| Hero / bannière | WebP ou JPEG | 300 Ko | 2560 × 1440 px |
| Image de fond | WebP ou JPEG | 300 Ko | 1920 × 1080 px |
| Icône / logo | PNG ou SVG | 100 Ko | Selon le besoin |
Astuce : Vous n’avez pas besoin d’images de produits de plus de 2048 px de large. Shopify suggère 2048 x 2048 px pour les photos de produits carrées, et son CDN redimensionne chaque image à la largeur demandée par votre thème. Les bannières en pleine largeur font exception - pour celles-ci et tous les autres types d’images, consultez notre guide des tailles d’images Shopify.
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 (chargement différé) signifie que les images ne se chargent que lorsqu’un utilisateur s’en approche en scrollant — plutôt que toutes en même temps au chargement initial de la page. Cela améliore considérablement le temps de chargement initial.
La plupart des thèmes Shopify modernes (Dawn, Horizon, etc.) utilisent le lazy loading par défaut avec l’attribut loading="lazy" sur les balises <img>. Pour vérifier le vôtre : faites un clic droit sur n’importe quelle image de votre boutique → Inspecter → cherchez loading="lazy" dans le HTML.
Si votre thème ne l’inclut pas, un développeur (ou Fudge) peut l’ajouter à vos templates d’images. Pour en savoir plus sur le lazy loading, consultez Comment mettre en place le Lazy Load d’images sur Shopify.
Comment la compression des images apparaît dans les rapports de vitesse de Shopify
Le rapport de performance web de Shopify utilise les Core Web Vitals des utilisateurs réels. PageSpeed Insights exécute Lighthouse, un test en labo, qui signale les grandes images sous une seule recommandation : “Améliorer la diffusion des images” (“Improve image delivery”). Il liste les images dont la taille de téléchargement pourrait être plus petite, car elles sont servies plus grandes qu’elles ne sont affichées, trop peu compressées ou dans un format plus ancien. Les anciens rapports Lighthouse divisaient cela en “Dimensionner correctement les images” et “Encoder efficacement les images”.
La majeure partie de tout ça est sous votre contrôle en compressant et redimensionnant avant l’upload. Rien que l’optimisation des images permet souvent d’augmenter sensiblement le score PageSpeed d’une boutique.
Les scripts sont l’autre point souvent signalé par Lighthouse ; voir Corriger les scripts bloquant le rendu dans Shopify.
Quel format d’image utiliser sur Shopify ?
- WebP offre la meilleure combinaison de qualité et de taille de fichier. Il est généralement de 25 à 35 % plus petit que le JPEG à qualité visuelle égale et est supporté par tous les navigateurs modernes. Shopify convertit automatiquement les images uploadées en WebP lorsqu’il les sert aux navigateurs compatibles.
- JPEG est l’option de secours sûre pour les photos de produits et les outils plus anciens.
- PNG ne vaut le coup que lorsque vous avez besoin d’un fond transparent (logos, icônes).
- GIF est réservé aux courtes boucles animées. Utilisez plutôt une courte vidéo MP4 pour une meilleure compression.
Pour le côté SEO des images, consultez Ajouter du texte alternatif (Alt Text) aux images dans Shopify.
FAQ
Dois-je me fier uniquement à la compression automatique de Shopify ?
Non. L'optimisation du CDN de Shopify aide, mais a ses limites : elle ne peut pas corriger un fichier source trop lourd. Un upload de 5 Mo devient un fichier servi plus petit, mais le fichier sous-jacent reste volumineux, et la version servie part d'une source plus lourde. Compressez avant l'upload, peu importe le comportement du CDN.
Quelle est la différence entre WebP, JPEG et PNG pour Shopify ?
WebP : taille la plus petite à qualité équivalente, supporte les photos et les graphiques avec transparence, idéal pour la plupart des images de produits. JPEG : très compatible, légèrement plus gros que le WebP, bon pour les photos. PNG : taille de fichier la plus importante, supporte la transparence, à utiliser uniquement pour les logos/icônes ou les graphiques aux bords nets. Shopify convertit automatiquement les images uploadées en WebP pour les navigateurs compatibles.
Est-ce que compresser trop fort nuit à la qualité de l'image ?
Oui, passé un certain seuil. Une qualité JPEG à 80 % est généralement visuellement identique à 100 % mais 30 à 50 % plus petite ; en dessous de 60 %, vous commencez à voir des artefacts (zones pixelisées, bandes dans les dégradés). Pour le WebP, une qualité de 80 % est aussi un bon choix par défaut. Regardez toujours la version compressée à 100 % de zoom sur un vrai écran avant de l'uploader.
Puis-je compresser rétroactivement des images déjà uploadées sur Shopify ?
Oui via des applications (TinyIMG, Crush.pics, etc.), qui remplacent les images existantes par des versions compressées. Shopify n'a pas de recompression en masse intégrée. Pour quelques produits, le téléchargement manuel → recompresser → ré-uploader fonctionne mais c'est lent. Ou décrivez ce que vous voulez à Fudge ("audite notre boutique pour les images de produits de plus de 200 Ko") et il listera les images trop grandes, page par page.
À quel point la compression d'images améliore-t-elle vraiment la vitesse d'une page Shopify ?
Souvent de manière visible. Les images lourdes sont une cause fréquente de lenteur des boutiques Shopify, et compresser une image hero de 3 Mo à 300 Ko peut réduire le LCP de façon notable sur les connexions lentes. C'est généralement l'une des premières optimisations de performance qui vaut le coup.
