Tailles d'image Shopify et limites de poids

Utilisez 2048 par 2048 pixels comme fichier source Shopify et maintenez chaque fichier livré sous 500 Ko. Shopify autorise des images allant jusqu'à 20 Mo et 4472 pixels de côté, mais ces chiffres décrivent ce que la plateforme tolère plutôt que ce dont une boutique rapide a besoin.

Le chiffre de 20 Mo est celui que la plupart des guides citent, et c'est le mauvais point de départ pour concevoir votre site. Ce que Shopify autorise et ce que Shopify récompense sont deux choses différentes. Une page produit contenant 8 images de 3 Mo chacune est une page de 24 Mo, et les acheteurs sur mobile partent avant la fin du chargement.

Tailles d'image Shopify par emplacement

Les images de produits doivent être carrées à 2048 pixels, tandis que les bannières, les vignettes de collection et les logos ont chacun besoin de leurs propres dimensions. Utiliser une seule taille partout produit des bannières étirées et des images de collection recadrées.

Les thèmes recadrent les images différemment, et une bannière qui semble correcte sur un aperçu de bureau est fréquemment coupée au milieu sur un téléphone. Gardez la partie importante d'une bannière dans les 60 pour cent centraux afin qu'aucun thème ne puisse la recadrer.

Pourquoi 500 Ko est le chiffre qui compte

Le poids de la page détermine la vitesse de chargement d'une boutique, et les images représentent la majeure partie de ce poids sur une page produit typique. Une page de moins de 2 Mo au total se charge confortablement sur les données mobiles, contrairement à une page de 24 Mo.

Les acheteurs sur téléphone constituent la majorité du trafic pour la plupart des boutiques, et les connexions mobiles varient bien plus que le haut débit de bureau. Chaque seconde de temps de chargement coûte des conversions, ce qui fait du poids des images une question de revenus plutôt qu'un problème technique. Réduire 8 images de produits de 3 Mo à 300 Ko supprime 21 Mo de la page et ne change rien de visible pour un acheteur.

Est-ce que Shopify compresse les images pour vous

Shopify sert des variantes redimensionnées via son réseau de diffusion de contenu (CDN) et les convertit automatiquement en WebP pour les navigateurs compatibles. La plateforme fait un travail convenable, et elle fonctionne à partir de tout ce que vous téléversez.

Ce dernier point constitue la limite. Shopify génère des variantes plus petites à partir de votre original, de sorte qu'un téléversement de 5 Mo mal compressé produit des variantes plus grandes qu'un téléversement de 400 Ko bien préparé. Compresser avant le téléversement réduit également votre propre utilisation du stockage et rend les importations en masse beaucoup plus rapides, car une importation de 500 produits déplace 200 Mo au lieu de 2,5 Go.

Comment préparer les images pour Shopify

Pour produire une page produit rapide, suivez ces 6 étapes.

1. Exportez un fichier source carré de 2048 par 2048 pixels depuis votre éditeur de photos.
2. Redimensionnez toute bannière ou image d'ambiance à sa largeur d'affichage réelle, doublée pour les écrans haute densité.
3. Convertissez les photographies en WebP, ou conservez le JPG si votre flux de travail en dépend, puisque Shopify convertit dans tous les cas.
4. Compressez vers une taille cible, en utilisant 300 Ko pour les photographies de produits et 400 Ko pour les bannières.
5. Nommez les fichiers par code produit et vue afin qu'une importation CSV en masse associe les images aux bons produits.
6. Téléversez et vérifiez la page produit sur un téléphone plutôt que uniquement sur un aperçu de bureau.

WebP sur Shopify

Shopify prend en charge le WebP nativement depuis des années et convertit automatiquement les fichiers JPG et PNG téléversés pour les navigateurs compatibles. Téléverser directement du WebP est accepté et vous donne le contrôle sur la compression plutôt que de la laisser à la plateforme.

Le WebP atteint la même qualité visuelle que le JPG avec des tailles de fichier 25 à 35 pour cent plus petites, ce qui est précieux sur une page contenant 8 photographies. Le seul cas à éviter est le téléversement de WebP lorsque le fichier doit être téléchargé ultérieurement par un fournisseur ou envoyé à un imprimeur, car ces destinataires attendent toujours du JPG.

Corriger une page produit lente

Commencez par la plus grande image de la page, car le fichier unique le plus lourd est généralement responsable de la majeure partie du retard. Sur une boutique Shopify, il s'agit normalement de la bannière de la page d'accueil ou de la première photographie de produit.

• Redimensionnez avant de compresser. Une bannière de 4000 pixels dans un emplacement de 1920 pixels gaspille 75 pour cent de ses données.
• Réduisez le nombre d'images au-dessus de la ligne de flottaison. Une galerie de 12 images se chargeant en même temps retarde tout le reste.
• Vérifiez que le chargement différé (lazy loading) est activé pour les images sous la ligne de flottaison, ce que la plupart des thèmes modernes gèrent par défaut.
• Remplacez les fichiers GIF animés par de la vidéo, car un court GIF pèse fréquemment plus lourd que tout le reste de la page.
• Auditez les applications. Les widgets d'avis, les fenêtres contextuelles et les badges de confiance chargent souvent leurs propres images et scripts.

Texte alternatif et noms de fichiers d'images

Rédigez un texte alternatif décrivant le produit pour les acheteurs utilisant des lecteurs d'écran, et nommez les fichiers d'après le produit plutôt que d'après l'appareil photo. Un fichier nommé IMG_4821.jpg n'apprend rien aux moteurs de recherche ni aux acheteurs.

Utilisez une structure telle que chemise-lin-bleu-marine-face.jpg, qui reste lisible dans une importation en masse, se classe de manière prévisible dans un dossier et décrit l'image dans les résultats de recherche. Le texte alternatif doit indiquer ce que montre la photographie, y compris la couleur, la matière et la vue, sans répéter mot pour mot le titre du produit. Les deux champs prennent quelques secondes par produit et améliorent l'apparition d'une boutique dans la recherche d'images.

Tester les changements avant de les déployer

Traitez d'abord 5 produits, publiez-les et vérifiez les pages sur un vrai téléphone avant de lancer tout le catalogue. Une erreur de paramétrage appliquée à 500 produits coûte beaucoup plus de temps à annuler qu'à prévenir.

Vérifiez 3 choses sur les produits de test. Confirmez que les images paraissent nettes au zoom maximal, car les acheteurs utilisent beaucoup le zoom sur les vêtements et les bijoux. Confirmez que la grille de collection affiche des cadrages cohérents. Confirmez que la page se charge rapidement sur les données mobiles plutôt que sur le haut débit du bureau. Appliquez ensuite seulement les mêmes paramètres à tout le reste.

Applications d'images contre préparation avant téléversement

Les applications de compression facturent un abonnement mensuel pour résoudre un problème que vous pouvez régler une fois pour toutes avant le téléversement. Les applications sont utiles lorsqu'une boutique reçoit constamment de nouvelles images de plusieurs personnes et que personne ne contrôle ce qui est téléversé.

Une boutique avec un catalogue stable et une seule personne gérant les images n'a pas besoin de frais récurrents. Compresser la bibliothèque une fois et compresser les nouvelles photographies à leur arrivée permet d'obtenir le même résultat. Reconsidérez la question lorsque le catalogue dépasse ce que vous pouvez traiter manuellement, ou lorsque plusieurs collaborateurs téléversent des images sans suivre de spécifications.

Erreurs d'images courantes sur Shopify

Téléverser directement depuis l'appareil photo est l'erreur la plus coûteuse, car une photographie de 24 mégapixels contient 10 fois plus de données qu'une boutique ne peut en afficher. La plateforme accepte le fichier, et la page en paie le prix.

Deux autres erreurs apparaissent régulièrement. Mélanger les formats d'images au sein d'une collection produit une grille irrégulière, car les thèmes recadrent au format carré et une photographie en mode portrait perd son haut et son bas. Utiliser le PNG pour les photographies de produits multiplie la taille des fichiers par 3 à 5 sans avantage visible, car le PNG stocke chaque pixel exactement et une photographie ne présente pas de zones plates à exploiter.

Maintenir un catalogue cohérent

Traitez l'ensemble du catalogue en un seul lot afin que chaque photographie de produit partage les mêmes dimensions, compression et cadrage. Les acheteurs comparant les produits remarquent l'incohérence même s'ils ne peuvent pas la nommer.

La cohérence aide également la grille de collection, où des images de forme et de luminosité assorties se lisent comme une page conçue plutôt que comme un assemblage. Définissez les dimensions et la taille cible une fois, puis appliquez-les à chaque fichier plutôt que d'ajuster chaque produit individuellement.

Traiter un catalogue en une seule fois

Déposez jusqu'à 500 images à la fois, ou glissez une archive ZIP provenant directement de votre photographe, et chaque fichier revient redimensionné et compressé selon la même spécification. Un catalogue qui prenait un après-midi avec un logiciel de bureau se termine en quelques minutes.

Tout s'exécute dans votre navigateur sur votre propre processeur, de sorte que les produits non encore sortis, les photos de campagnes saisonnières et les photographies de fournisseurs n'atteignent jamais un serveur. Pour une boutique préparant un lancement sous embargo, garder les fichiers en local fait la différence entre une annonce contrôlée et une fuite, et cela ne coûte rien de plus.