Points clés
- 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 de mauvais scores Core Web Vitals sur Shopify.
- Compressez vos images avant de les importer en utilisant des outils gratuits comme Squoosh ou TinyPNG.
- Visez moins de 500 Ko pour les images de produits et moins de 1 Mo pour les bannières ou images hero.
Shopify se charge d’une grande partie du traitement des images à votre place — conversion de format, diffusion via CDN, redimensionnement responsif. Mais il ne peut faire avec ce que vous lui donnez.
Si vous importez une photo de produit de 5 Mo, Shopify en servira une version plus petite — mais le fichier source restera lourd, ce qui crée une surcharge. Compresser les images avant de les importer est une habitude simple qui s’avère payante : temps de chargement plus rapides, meilleur SEO et taux de rebond plus faibles.
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
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 importée de 5 Mo devient un fichier diffusé plus petit, mais le fichier d'origine reste énorme, ce qui ralentit les sauvegardes, les exports de thèmes et la navigation dans l'admin Shopify. Compressez toujours avant d'importer l'image, peu importe le comportement du CDN.
WebP : c'est la plus petite taille à qualité équivalente, il gère à la fois les photos et les graphismes transparents, l'idéal pour la plupart des images de produits. JPEG : très compatible, un peu plus lourd que le WebP, bon pour les photos. PNG : le format le plus lourd, permet la transparence, à utiliser uniquement pour les logos/icônes ou les illustrations avec des bords nets. Shopify convertit automatiquement les images en WebP pour les navigateurs compatibles.
Oui, si l'on dépasse un certain seuil. Un JPEG avec une qualité à 80 % est généralement identique visuellement à 100 % mais 30 à 50 % plus léger ; en dessous de 60 %, des artefacts apparaissent (zones pixelisées, effet de bandes dans les dégradés). Pour le WebP, 80 % est aussi un bon réglage par défaut. Regardez toujours la version compressée avec un zoom de 100 % sur un véritable écran avant de l'ajouter.
Oui, en utilisant des applications (TinyIMG, Crush.pics, etc.) ; elles remplacent les images actuelles par des versions compressées. Shopify ne propose pas d'outil natif pour compresser en masse. Pour un ou deux produits, la méthode manuelle (télécharger → compresser → ré-importer) marche bien mais prend du temps. Vous pouvez aussi demander à Fudge ("auditer notre boutique pour trouver les images de produits de plus de 500 Ko et proposer des alternatives compressées") et il vous générera une liste complète pour vérifier la taille avant/après.
Énormément. Le poids des images est la cause numéro 1 des lenteurs des boutiques Shopify — réduire une image hero de 3 Mo à 300 Ko peut faire baisser le LCP de 1 à 2 secondes sur une connexion lente. La majorité des boutiques Shopify peuvent gagner 10 à 30 points de score PageSpeed juste en optimisant leurs images, sans rien changer d'autre. C'est l'optimisation qui offre le plus grand impact par rapport à l'effort fourni.
À lire aussi : Accélérer un thème Shopify.
À lire aussi : Corriger les scripts bloquant le rendu sur Shopify.