Quelle taille donner aux images produits Shopify
La question revient chaque semaine dans les forums de marchands. La réponse tient en une dimension et une nuance que presque personne n'explique.
Shopify sert vos images depuis son CDN et sait les redimensionner à la demande. Vous avez sans doute déjà vu ces adresses se terminer par ?width=800 : c'est exactement ce mécanisme. Le thème demande une largeur, le CDN la fabrique et la met en cache.
Conséquence directe : la taille que vous téléversez n'est presque jamais celle que vos visiteurs téléchargent. Mais elle fixe une limite. Le CDN peut réduire, il ne peut pas inventer des pixels qui n'existent pas.
La dimension à viser
Pour une fiche produit classique, 2048 pixels sur le côté le plus long couvre tous les cas utiles : la vignette de collection, l'image principale, et le zoom sur écran haute densité.
| Usage | Largeur demandée par le thème | Source minimale |
|---|---|---|
| Vignette de collection | 300 à 500 px | 1000 px |
| Image principale de fiche | 800 à 1200 px | 1600 px |
| Zoom au survol | 1500 à 2048 px | 2048 px |
| Écran Retina (2x) | le double de la taille CSS | 2048 px |
Pourquoi téléverser plus grand ne sert à rien
Au-delà de 2048 px, vous ajoutez du poids à votre bibliothèque sans rien changer pour le visiteur : le thème ne demandera jamais cette largeur. Un fichier de 5000 px pèse plusieurs fois celui de 2048 px, pour une image affichée identique.
Ce poids n'est pas invisible pour autant. Il ralentit l'administration Shopify, il gonfle vos exports, et il allonge chaque traitement que vous lancez dessus.
Le CDN peut réduire une image. Il ne peut pas rattraper une image téléversée trop petite.
L'erreur inverse, plus grave
Téléverser en 800 px parce que c'est la taille affichée est une fausse économie. Sur un écran Retina, le thème demande le double. Le CDN ne pouvant pas agrandir, il sert votre 800 px étiré : l'image paraît floue exactement là où l'acheteur regarde le détail du produit.
- Trop grand : gaspillage de stockage, aucun effet visible pour l'acheteur
- Trop petit : flou irrattrapable sur les écrans modernes
- 2048 px : le seul réglage qui ne se paie ni d'un côté ni de l'autre
Vérifier ce que vous avez
La dimension d'un fichier se lit dans votre administration Shopify. Ouvrez la fiche produit, cliquez sur une image de sa galerie : l'aperçu indique la taille du fichier tel que vous l'avez téléversé. C'est cette valeur qui compte, puisque c'est le point de départ du CDN.
Fiche par fiche, c'est fiable mais lent. Sur un catalogue de quelques centaines de produits, personne ne le fait, et c'est précisément pour cela que les images trop petites passent inaperçues pendant des années.
Mesurez vos propres images
L'audit gratuit lit votre boutique et vous donne le poids réel de vos images produits, sans installation.
À lire ensuite
- Le nom de vos fichiers images produits ShopifyShopify ne permet pas de renommer une image déjà téléversée, et une image renommée ne reçoit aucune redirection. Ce qui vaut la peine d’être corrigé.
- Titre SEO et meta description d’une fiche produit ShopifyShopify ne remplit pas ces deux champs pour vous, et Google écrit alors l’extrait à votre place. Où les trouver, quoi y mettre, et comment vérifier votre boutique en une minute.
- WebP, JPEG ou PNG : lequel choisir pour ShopifyTrois formats, trois usages qui ne se recouvrent pas. Le mauvais choix double le poids d'une page produit sans que personne ne s'en aperçoive.