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 format WebP pour obtenir le meilleur compromis entre la qualité et le poids du fichier — c’est généralement 25 à 35 % plus léger que le JPEG à qualité visuelle équivalente et c’est compatible avec tous les navigateurs modernes. Shopify convertit automatiquement les images que vous uploadez en WebP lorsqu’il les sert aux navigateurs compatibles. Pour les images de produits, le JPEG reste un choix prudent pour la compatibilité avec les outils plus anciens. N’utilisez le PNG que si vous avez besoin d’un fond transparent (logos, icônes). Évitez les GIF pour tout ce qui n’est pas une courte boucle animée — utilisez plutôt une courte vidéo MP4 pour une meilleure compression. À voir aussi : comment mettre en place le lazy loading des images sur Shopify pour aller plus loin dans l’optimisation des performances de vos images.
FAQ
Dois-je compter uniquement sur la compression automatique de Shopify ?
Non. L’optimisation du CDN de Shopify est utile, mais elle a ses limites : elle ne peut pas corriger un fichier source trop lourd. Une image de 5 Mo devient un fichier plus petit une fois servi, mais le fichier d’origine reste énorme, ce qui ralentit les sauvegardes, les exports de thème et la navigation dans l’admin Shopify. Compressez toujours avant d’uploader, peu importe ce que fait le CDN.
Quelle est la différence entre WebP, JPEG et PNG sur Shopify ?
WebP : le plus petit poids à qualité équivalente, gère à la fois les photos et les éléments graphiques en transparence, idéal pour la plupart des images de produits. JPEG : très compatible, légèrement plus lourd que le WebP, parfait pour les photos. PNG : le fichier le plus lourd, permet la transparence, à réserver uniquement aux logos/icônes ou aux visuels avec des contours nets. Shopify convertit automatiquement les images uploadées en WebP pour les navigateurs compatibles.
Une compression trop forte va-t-elle dégrader la qualité de l’image ?
Oui, au-delà d’un certain seuil. Une qualité JPEG à 80 % est généralement visuellement identique à du 100 % mais 30 à 50 % plus légère ; en dessous de 60 %, vous commencez à voir des artefacts (des zones pixelisées, des problèmes dans les dégradés). Pour le WebP, une qualité de 80 % est également un bon réglage par défaut. Visualisez toujours la version compressée avec un zoom de 100 % 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.) — elles remplacent les images existantes par des versions compressées. Shopify lui-même n’a pas de fonction intégrée pour la recompression de masse. Pour quelques produits occasionnels, la méthode manuelle (téléchargement → recompression → nouvel upload) fonctionne mais prend du temps. Sinon, décrivez ce que vous souhaitez accomplir à Fudge (“audite notre boutique pour trouver les images de produits de plus de 500 Ko et propose des remplacements compressés”) et il vous générera une liste avec les tailles avant/après pour validation.
À quel point la compression d’images améliore-t-elle vraiment la vitesse d’une page Shopify ?
De manière significative. Le poids des images est la cause n°1 des boutiques Shopify lentes — compresser une image hero de 3 Mo à 300 Ko peut faire baisser le LCP de 1 à 2 secondes sur les connexions lentes. La plupart des boutiques Shopify peuvent gagner 10 à 30 points de score PageSpeed rien qu’avec l’optimisation des images, sans rien changer d’autre. C’est l’action qui a le plus d’impact sur les performances.
À lire aussi : Accélérer un thème Shopify.
À lire aussi : Corriger les scripts bloquant le rendu sur Shopify.