Tailles d'Images Shopify : Photos de Produits, Bannières, et Recadrage Mobile Expliqués

Points clés

• Shopify documente les tailles d’images de produits, pas celles des bannières. Les images de produits peuvent atteindre 5000 x 5000 px et doivent faire moins de 20 Mo, avec 2048 x 2048 px suggéré pour les photos carrées.¹ Les dimensions des bannières dépendent de votre thème.
• Pour une bannière bureau en pleine largeur, 3840 x 1600 px est une taille d’upload sûre. Dawn ne demande jamais une bannière plus large que 3840 px.²
• Les bannières sont recadrées sur mobile car la boîte change de forme. La vraie solution est d’utiliser une image mobile séparée, ce que Horizon supporte, mais pas Dawn.³
• Les images floues sont presque toujours un problème de largeur. Soit le fichier est trop petit pour l’espace en 2x, soit le thème demande au CDN une version trop petite.

Un tableau des tailles d’images Shopify ne répond qu’à la moitié de la question. L’autre moitié est de comprendre pourquoi une bannière exportée à la bonne taille est quand même coupée sur un téléphone. Ce guide vous donne d’abord le tableau, puis explique ce que Shopify fait du fichier après l’upload, pourquoi les bannières sont recadrées, et comment corriger le flou.

Chaque chiffre est indiqué comme documenté (Shopify le publie) ou recommandé (nous l’avons déduit du code du thème), pour que vous sachiez ce qui relève de la règle ou du jugement.

Pourquoi vous pouvez nous faire confiance

Nous sommes dans l’écosystème Shopify depuis plus de quatre ans et avons travaillé avec des centaines de marques Shopify sur leurs boutiques. Jacques a plus de 15 ans d’expérience en développement. Nous avons créé Fudge, un éditeur de boutique IA avec une note de 4.9 sur le Shopify App Store et le statut Built for Shopify. Les chiffres présentés ici ont été tirés de la documentation de Shopify et du code source des thèmes Dawn et Horizon le jour de la rédaction.

Quelles sont les bonnes tailles d’images Shopify en 2026 ?

Les limites d’upload strictes

• Images de produits et collections : jusqu’à 5000 x 5000 px ou 25 mégapixels, et moins de 20 Mo.¹
• Images uploadées pour votre thème : La page des images de thème de Shopify indique 20 mégapixels et 20 Mo comme limites d’upload.⁶ Les deux chiffres diffèrent, mais rien dans le tableau ne dépasse 7 mégapixels, donc les deux sont bien au-dessus de ce dont vous avez besoin.
• Ce que le CDN sert : le filtre image_url accepte une largeur ou hauteur allant jusqu’à 5760 px et n’agrandit jamais une image au-delà de ses dimensions d’origine.⁷

Tailles d’images Shopify vs ce que les acheteurs téléchargent

Le fichier que vous uploadez n’est pas le fichier qu’un acheteur télécharge. Le CDN de Shopify génère des versions plus petites à la demande, dans n’importe quel format moderne supporté par le navigateur, y compris WebP et AVIF.⁶

Le thème décide de la version demandée. Il liste plusieurs largeurs de la même image dans un attribut srcset, et un attribut sizes indique au navigateur la largeur de l’image à l’écran. Le navigateur choisit la plus petite version qui remplit cet espace sur cet appareil.

Le filtre image_tag de Shopify génère ce code, y compris les attributs width et height qui évitent à la page de sauter pendant le chargement des images.⁷ Pour comparer le CDN intégré avec des options tierces, consultez notre comparatif des CDN d’images Shopify.

Pourquoi une image 2x est importante et pas une image de 6000 px

Les téléphones et de nombreux ordinateurs portables concentrent deux ou trois pixels matériels dans chaque pixel CSS. Une carte produit qui fait 400 px de large à l’écran a besoin d’une image de 800 px pour paraître nette en 2x.

Aller au-delà de 2x ne sert à rien, car le thème fixe le plafond. La bannière de Dawn s’arrête à une requête de 3840 px et sa galerie de produits à 1946 px.² Une bannière de 6000 x 3375 px fait aussi 20,25 mégapixels, ce qui dépasse la limite d’image du thème.

Taille de la bannière Shopify : pourquoi ma bannière est-elle recadrée sur mobile ?

Shopify ne publie aucune taille de bannière car la bannière est une boîte dont la forme est définie par la section du thème, pas par votre image. La section met votre image à l’échelle pour couvrir la boîte et coupe ce qui dépasse.⁶

Dawn rend l’arithmétique facile à comprendre. Avec la Hauteur sur Moyen et les paramètres par défaut, sa Bannière d’image fait au moins 560 px de haut sur bureau et la zone d’image fait 340 px de haut sur mobile.²

• Sur un ordinateur portable de 1440 px de large, la boîte fait 1440 x 560 px, soit environ 2.6:1.
• Sur un téléphone de 390 px de large, la boîte fait 390 x 340 px, soit environ 1.15:1.

Une bannière bureau en 2.4:1 couvrant cette boîte de téléphone ne montre qu’environ 48 % de sa largeur au centre. Une image en 16:9 en montre environ 65 %, mais perd environ 30 % de sa hauteur sur l’ordinateur portable.

Aucun fichier unique ne convient aux deux boîtes. Il y a quatre façons de gérer cela. Si la bannière n’est pas encore configurée, commencez par comment changer la bannière de la page d’accueil sur Shopify.

Solution 1 : définir un point focal

Un point focal indique au thème quelle partie de l’image doit rester dans le cadre. Cliquez sur l’image dans Contenu → Fichiers, dans l’éditeur de thème, ou dans la section Médias d’un produit, cliquez sur la zone importante ou faites glisser le point bleu, et enregistrez.⁶

Chaque image a un seul point focal, et il s’applique partout où l’image est utilisée. Cela fonctionne sur Dawn 7.0.0 et versions ultérieures, et sur tous les thèmes Horizon.

Un point focal choisit ce qui survit au recadrage. Il n’empêche pas le recadrage.

Solution 2 : laisser la section s’adapter à l’image

Dans Dawn, réglez la Hauteur de la bannière sur S’adapter à la première image. La section prend le propre ratio d’aspect de l’image, donc rien n’est coupé.

Le compromis se voit sur mobile : une bannière en 2.4:1 sur un téléphone de 390 px devient une bande d’environ 160 px de haut.

Solution 3 : garder le texte hors de l’image

Le texte incrusté dans l’image est recadré avec le reste et rétrécit jusqu’à devenir illisible sur un téléphone. Les directives de Shopify conseillent de ne pas mettre de texte dans les images de diaporama et d’arrière-plan et de l’ajouter dans l’éditeur de thème.⁶

Le texte en direct reste à la bonne taille à n’importe quelle largeur, revient à la ligne tout seul, et est lisible par les moteurs de recherche et les lecteurs d’écran. Si vous devez absolument incruster du texte, gardez-le dans les 40 % centraux de la largeur.

Les visuels de promotion sont les coupables habituels. Notre guide sur la page d’accueil du Black Friday couvre ce qu’il faut changer d’autre cette semaine-là.

Solution 4 : utiliser une image mobile séparée

C’est la vraie solution : une image large pour le bureau et une image portrait en 4:5 pour les téléphones, chacune composée pour sa propre boîte.

Horizon supporte cela nativement. Sa section Hero a une case à cocher Afficher des médias différents sur mobile qui révèle des sélecteurs d’image mobile, et le thème génère un élément picture qui change la source en dessous de 750 px.³

Ce n’est pas le cas de Dawn. Sa Bannière d’image a deux sélecteurs, mais l’Image 2 se place à côté de l’Image 1 sur bureau et s’empile sur mobile. Ce n’est pas une alternative pour mobile.²

Une astuce courante consiste à utiliser deux sections de bannière avec du CSS qui en cache une selon la taille de l’écran. Les conseils de performance de Shopify recommandent plutôt un élément picture, pour que le navigateur ne télécharge que l’image correspondante.⁸

La méthode Fudge. Fudge ajoute le paramètre manquant et le balisage responsive à la section bannière de votre thème, vous n’avez donc qu’à fournir les deux fichiers d’images. Dites à Fudge :

“Ajoute un paramètre d’image mobile séparé à la bannière de ma page d’accueil pour que les téléphones affichent un recadrage portrait en 4:5 et que le bureau garde la version large. Garde le titre en texte par-dessus l’image.”

Vous obtenez le code de thème natif sous forme de brouillon que vous pouvez prévisualiser sur les deux tailles d’écran avant de publier.

Le code, si vous l’ajoutez vous-même

Dupliquez d’abord votre thème, puis allez dans Boutique en ligne → Thèmes → ⋯ → Modifier le code et ouvrez la section de la bannière. Ajoutez un sélecteur d’image au schéma de la section :

{
    "type": "image_picker",
    "id": "mobile_image",
    "label": "Image mobile (4:5)"
}

Affichez ensuite les deux images dans un seul élément picture :

{%- assign desktop_image = section.settings.image -%}
{%- assign mobile_image = section.settings.mobile_image -%}

<picture>
  {%- if mobile_image != blank -%}
    <source
      media="(max-width: 749px)"
      srcset="
        {{ mobile_image | image_url: width: 800 }} 800w,
        {{ mobile_image | image_url: width: 1200 }} 1200w,
        {{ mobile_image | image_url: width: 1600 }} 1600w
      "
      sizes="100vw"
      width="{{ mobile_image.width }}"
      height="{{ mobile_image.height }}"
    >
  {%- endif -%}
  {{
    desktop_image
    | image_url: width: 3840
    | image_tag:
      widths: '750, 1100, 1500, 2000, 3000, 3840',
      sizes: '100vw',
      loading: 'eager',
      fetchpriority: 'high'
  }}
</picture>

Quatre choses à savoir :

• loading: 'eager' et fetchpriority: 'high' ne s’appliquent qu’à la première bannière de la page. Plus bas, utilisez loading: 'lazy' et supprimez l’indication de priorité. Voir notre correctif de chargement eager de la bannière hero.
• Le point focal provient de l’image de bureau. image_tag l’écrit comme un style object-position en ligne, donc cadrez le fichier mobile en le recadrant vous-même.
• Vérifiez que le CSS s’applique toujours à l’image. Dawn stylise l’image comme un enfant direct de son conteneur média, ces règles doivent donc cibler l’image à l’intérieur de l’élément picture.
• Dans Dawn, la boîte doit aussi être mise à jour. Avec ‘S’adapter à la première image’ sélectionné, la règle en haut de image-banner.liquid lit le ratio d’aspect de l’image de bureau pour les deux tailles d’écran. Faites pointer la règle mobile vers l’image mobile.

Taille des images de produits Shopify : garder des grilles cohérentes

Une grille de collection a l’air ordonnée quand chaque image à la une partage le même ratio d’aspect. La documentation de Shopify fait la même remarque : des ratios mixtes s’affichent à des tailles différentes côte à côte.¹

Choisissez un ratio et exportez tout en fonction : 2048 x 2048 px pour le carré, ou 2048 x 2560 px pour le portrait en 4:5, qui convient aux vêtements et aux produits hauts.

Le thème peut forcer ce ratio. Dans Dawn, les sections Grille de produits, Collection en vedette et Liste de collections ont chacune un paramètre Ratio de l’image avec trois options : S’adapter à l’image, Portrait et Carré. Portrait correspond à 4:5 dans le code.²

Portrait et Carré recadrent pour remplir la carte, depuis le centre, à moins qu’un point focal ne soit défini. S’adapter à l’image montre chaque photo sans la recadrer, ce qui cause des rangées inégales.

Dawn n’a pas d’option 2:3. Une photo en 2:3 dans une carte Portrait perd environ 17 % de sa hauteur, donc vérifiez que les têtes et les ourlets survivent. Pour remplacer des fichiers, voir comment mettre à jour les images de produits sur Shopify.

La méthode Fudge. Si le paramètre de carte de votre thème n’offre pas le ratio que vous voulez, Fudge modifie le code de la carte et le CSS. Dites à Fudge :

“Mets toutes les images des cartes produits des pages de collection au format portrait 4:5, recadrées depuis le centre, sans les étirer.”

Vous obtenez la modification sous forme de brouillon à examiner. Les photos ont toujours besoin d’assez d’espace autour du produit pour survivre à ce recadrage.

Pourquoi mes images Shopify ont-elles l’air floues ?

Le flou signifie que le navigateur a reçu moins de pixels que ce dont l’écran avait besoin. Parcourez cette liste dans l’ordre :

1. Est-ce flou seulement un instant ? Shopify note que les images peuvent paraître douces puis s’affiner au fur et à mesure que la version complète se charge. C’est le comportement attendu.⁶
2. Le fichier source est-il assez grand ? Prenez la plus grande largeur à laquelle l’image apparaît à l’écran et doublez-la. Un fichier de 1200 px dans une bannière pleine largeur est insuffisant sur n’importe quel ordinateur portable.
3. Qu’est-ce que le navigateur a chargé ? Faites un clic droit sur l’image, choisissez Inspecter, et survolez l’URL de l’image. Chrome montre la taille rendue et la taille intrinsèque. Sur un écran 2x, si la taille intrinsèque est inférieure à la taille rendue multipliée par deux, c’est ce qui cause le flou.
4. Quelle largeur le thème a-t-il demandé ? Les URL du CDN de Shopify contiennent une valeur width=. Si votre fichier fait 3000 px de large et que l’URL indique width=1100, le srcset ou les sizes du thème en sont la cause.
5. Le fichier a-t-il été agrandi ou fortement compressé avant d’être uploadé ? Agrandir une petite image ajoute des pixels, pas des détails, et le CDN ne l’agrandit jamais non plus.⁷
6. Y a-t-il du texte dans l’image ? Le texte incrusté s’adoucit chaque fois que l’image est mise à l’échelle.

Les cas 2, 5 et 6 sont résolus en exportant un meilleur fichier. Le cas 4 nécessite une correction du thème.

La méthode Fudge. Une mauvaise valeur sizes ou un srcset qui s’arrête trop bas est une modification de code à l’intérieur de la section. Dites à Fudge :

“Mon image hero a l’air floue sur bureau. Vérifie quelles largeurs la section demande et corrige le srcset pour que les grands écrans aient une image nette.”

Fudge modifie la façon dont la section demande l’image et la retourne sous forme de brouillon. Les fichiers d’images doivent toujours être exportés à la bonne taille par vous - Fudge corrige la manière dont le thème les demande et les recadre. La page éditeur de boutique Shopify montre ce qu’il peut modifier d’autre.

Quel format de fichier et quel poids devez-vous uploader ?

Uploadez des JPEG pour les photographies et des PNG pour les logos, icônes et graphismes plats avec transparence. C’est la recommandation de Shopify pour les images de thème.⁶ Sa page sur les médias de produits classe le PNG en premier pour les photos de produits, donc l’un ou l’autre fonctionne là-bas.¹ Les uploads de WebP et HEIC sont également acceptés.

Le format d’upload a moins d’importance qu’avant, car le CDN les convertit à la volée en WebP ou AVIF lorsque le navigateur les supporte.

Concernant le poids, la position de Shopify est que les images n’ont pas besoin d’être compressées avant l’upload et que vous devriez uploader la meilleure qualité possible.⁶ Les acheteurs téléchargent la version redimensionnée du CDN, pas votre original.

La cible raisonnable est donc les dimensions, pas les kilo-octets. Exportez aux tailles en pixels du tableau en haute qualité, restez sous la limite des 20 Mo, et laissez le CDN compresser. Trop compresser un JPEG en amont signifie juste qu’il sera compressé deux fois.

Si vous voulez quand même des originaux plus petits, notre guide sur la compression des images dans Shopify couvre les outils.

FAQ