Le guide technique des images Shopify
Quand on gère une boutique Shopify, la gestion des images occupe un temps considérable. Shooting, retouche, upload, organisation du catalogue, ce temps est bien investi quand les fichiers sont bien préparés.
Quand ils ne le sont pas, les conséquences s'accumulent discrètement : pages lentes, visuels flous sur certains écrans, fiches produit qui n'apparaissent pas dans Google Images, zoom désactivé sur mobile.
L'image est pourtant le premier argument de vente d'une fiche produit.
Avant le prix, avant la description, avant les avis clients, c'est elle que le visiteur perçoit.
Le problème, c'est que ces approximations ont des conséquences mesurables.
Ce que Shopify gère pour vous
Shopify intègre plusieurs mécanismes d'optimisation qui fonctionnent en arrière-plan. La plateforme sert vos images dans le format le plus léger supporté par le navigateur (WebP pour la quasi-totalité du trafic actuel). Le redimensionnement adaptatif et le lazy loading existent, mais ils demandent une implémentation spécifique dans le code du thème.
Ces automatismes sont bien réels. Ils ont aussi un périmètre précis.
Shopify travaille avec ce que vous lui donnez.
Si vous uploadez une image en HEIC prise sur iPhone, elle s'affichera mal sur la plupart des navigateurs hors Apple. Si vous uploadez un fichier de 15 Mo là où 300 Ko auraient suffi, la plateforme optimise à la marge.
Si vos textes alt sont vides ou générés depuis le nom de fichier, ils le resteront.
La limite technique de Shopify est de 5 000 x 5 000 pixels et 20 Mo par image. C'est un plafond de sécurité car les valeurs cibles à viser en pratique sont bien en dessous.
Les dimensions de référence
Les besoins varient selon l'emplacement et la fonction de l'image. Une hero image doit couvrir un grand écran ; une miniature dans une grille catalogue a des contraintes très différentes.
| Type d'image | Desktop (L x H) | Mobile (L x H) | Ratio | Poids cible |
|---|---|---|---|---|
| Image d'arrière-plan | 2 560 x 1 400 px | 360 x 640 px | 16:9 | ≤ 400 Ko |
| Hero image | 1 600 x 900 px | 800 x 450 px | 16:9 | ≤ 300 Ko |
| Bannière | 1 200 x 400 px | 360 x 120 px | 3:1 | ≤ 80 Ko |
| Image de blog | 1 200 x 800 px | 360 x 240 px | 3:2 | ≤ 200 Ko |
| Produit (carré) | 2 048 x 2 048 px | — | 1:1 | ≤ 150 Ko |
| Miniature | 300 x 300 px | 90 x 90 px | 1:1 | — |
| Logo (horizontal) | 400 x 100 px | 160 x 40 px | 4:1 | ≤ 50 Ko |
| Logo (carré) | 100 x 100 px | 60 x 60 px | 1:1 | ≤ 50 Ko |
| Favicon | 16 x 16 px | 16 x 16 px | 1:1 | — |
| Lightbox | 1 920 x 1 080 px | 360 x 640 px | 16:9 | — |
Quelques précisions sur les cas qui méritent un commentaire :
Pour les images produit, le format carré (1:1) s'est imposé comme standard de fait en e-commerce. Il s'adapte bien aux petits écrans et permet d'afficher plus de produits dans une grille sans scroll supplémentaire. La valeur cible de 2 048 x 2 048 px correspond au seuil à partir duquel le zoom natif de Shopify fonctionne correctement. En dessous de 800 x 800 px, le zoom est désactivé.
La hero image est généralement l'image qui contribue le plus au LCP de la page, et c'est aussi la première que le visiteur perçoit. Viser 800 px de large pour les écrans mobiles et monter jusqu'à 1600 px pour les grands écrans, avec un export WebP bien compressé, permet dans la plupart des cas de rester sous les 300 Ko en pratique, largement en dessous du seuil de 10 Mo indiqué dans le tableau.
Google met également à disposition toutes les spécifications de dimensions concernant la création de bannières.
La documentation est disponible ici.
Choisir le bon format
Le choix du format d'image est l'une des décisions les plus impactantes sur la performance d'une boutique, et souvent l'une des moins bien comprises.
WebP
Aujourd'hui le format par défaut pour la quasi-totalité des images e-commerce.
Il produit des fichiers environ 30 % plus légers que JPEG ou PNG à qualité visuelle équivalente. Shopify le sert automatiquement aux navigateurs compatibles, mais uploader directement en WebP reste une bonne pratique : vous gardez le contrôle sur la compression appliquée.
Avif
C'est le format qui dépasse WebP en compression.
Développé sur la base du codec vidéo AV1, il produit des fichiers significativement plus petits à qualité identique. La compatibilité navigateur progresse rapidement et couvre aujourd'hui la grande majorité des environnements modernes. Si votre boutique cible un public technophile ou si vous optimisez agressivement la performance, c'est un format à tester sérieusement.
SVG
Le seul choix rationnel pour les logos et icônes.
Format vectoriel, il s'appuie sur des équations mathématiques plutôt que sur une grille de pixels, ce qui lui permet d'être affiché à n'importe quelle taille sans aucune perte de qualité, et avec des fichiers généralement très légers. Si votre logo existe en version vectorielle (ce qui devrait toujours être le cas) exportez-le en SVG.
PNG
Utile pour les visuels nécessitant de la transparence.
Sa compression sans perte préserve la netteté des graphiques et des logos sur fond transparent, là où JPEG ne supporte pas la transparence et où WebP peut parfois produire des artefacts indésirables sur des bords nets.
En dehors de ce cas d'usage, PNG génère des fichiers plus lourds que WebP sans avantage notable.
JPEG
Le format classique et solide, mais daté.
Il reste acceptable pour les photographies complexes, mais sa compression avec perte et ses performances inférieures à WebP le rendent moins pertinent pour un usage e-commerce en 2026. À conserver uniquement si la conversion vers un format moderne n'est pas possible.
Performance et Core Web Vitals
Les Core Web Vitals sont les métriques que Google utilise pour évaluer la qualité d'expérience d'une page. Pour une boutique Shopify, deux d'entre elles sont directement liées aux images.
Le LCP (Largest Contentful Paint) mesure le temps de rendu de l'élément visuel le plus large visible à l'écran au chargement. Sur une fiche produit, c'est presque toujours l'image principale. Google considère un LCP inférieur à 2,5 secondes comme satisfaisant, au-delà, la page est pénalisée dans les résultats de recherche et l'expérience utilisateur se dégrade perceptiblement.
Un fichier image trop lourd est la première cause d'un mauvais LCP sur Shopify.
Le CLS (Cumulative Layout Shift) mesure les décalages visuels inattendus pendant le chargement. Quand une image n'a pas de dimensions déclarées dans le code HTML, le navigateur ne peut pas lui réserver l'espace avant qu'elle soit chargée, ce qui provoque un saut de mise en page au moment du rendu.
Les thèmes Shopify modernes gèrent généralement cela correctement, mais c'est un point à vérifier sur les thèmes personnalisés ou les sections custom.
La performance de chargement prend une importance supplémentaire avec l'essor de l'agentic commerce. Les agents IA qui font le shopping à la place des utilisateurs évaluent aussi la vitesse et la structuration des données d'une boutique pour décider si un produit mérite d'être recommandé.
Pour comprendre ce que cela implique concrètement 👇
Jérémie Werner
Les textes alternatifs
Le texte alt est l'attribut HTML qui décrit une image en langage textuel.
Il joue deux rôles distincts qu'il vaut la peine de garder en tête simultanément.
Pour l'accessibilité, il permet aux personnes malvoyantes utilisant des lecteurs d'écran de comprendre le contenu d'une image. C'est une obligation légale dans de nombreux contextes et une pratique de base pour un site inclusif.
Pour le SEO, il fournit aux moteurs de recherche un contexte textuel sur le contenu de l'image. Un texte alt pertinent contribue au référencement de la page sur les requêtes associées, et à la visibilité de l'image dans Google Images.
Les images uploadées dans l'admin Shopify ont par défaut un texte alt vide.
Une desctiption alt efficace décrit l'image avec précision, intègre naturellement le mot-clé principal sans sur-optimisation, et reste concis, moins de 100 caractères est une bonne règle de travail.
Pour une image produit, "Veste en laine mérinos bleu marine, coupe droite" fait mieux le travail que "veste-produit-1" ou "veste en laine mérinos de haute qualité achetez maintenant".
Le texte alt n'est d'ailleurs qu'un élément parmi d'autres dans l'équation d'une fiche produit qui convertit.
Pour aller plus loin sur la rédaction des pages produit, pour l'humain comme pour les agents IA 👇
Robin Marzin
Quelques points d'attention courants
Uploader des fichiers trop lourds
C'est l'erreur la plus répandue et aussi la plus coûteuse en performance.
La limite technique de Shopify à 20 Mo est un plafond de sécurité, certainement pas une cible.
En pratique, une image produit bien préparée doit peser moins de 300 Ko, une hero image moins de 1 Mo dans la plupart des cas. L'écart entre ces valeurs cibles et ce que l'on voit sur beaucoup de boutiques est souvent considérable.
Ignorer la cohérence des ratios
Erreur plus subtile, mais qui a un impact visible sur la perception de la marque.
Des fiches produit avec des visuels aux formats hétérogènes : certains en portrait, d'autres en paysage, d'autres en carré. Ce chaos crée une impression de désordre qui érode la confiance.
Définir un ratio unique pour toutes les images d'une collection est une décision de branding autant qu'une bonne pratique technique.
Confondre résolution et dimensions
Erreur encore trop fréquente chez ceux qui gèrent eux-mêmes leurs visuels.
La résolution (mesurée en PPI, pixels par pouce) détermine la netteté d'une image à un niveau de détail fin ; les dimensions (en pixels) déterminent la taille d'affichage.
Une image peut être grande en pixels et paraître floue si sa résolution est insuffisante, et inversement.
Pour le web, 72 PPI est le standard ; c'est la taille en pixels qui pilote réellement la qualité perçue à l'écran.
Des images à votre image
Les images sont le point de contact le plus immédiat entre un visiteur et un produit. Un contenu qui précède toute lecture, toute décision, toute confiance accordée.
Appliquer les bonnes pratiques est une discipline à intégrer dans la façon dont vous gérez votre catalogue au quotidien, au moment de photographier, d'exporter, d'uploader, de nommer.
Chaque image est une décision alors autant qu'elle soit bonne.
