Optimiser les images Shopify : dimensions, formats et compression

Exemple : préparer la photo principale d'un produit

Imaginons une photo nette de 3600 × 2400 pixels et une boutique utilisant des images principales carrées. Les étapes illustrent une méthode, pas des résultats de compression mesurés ni une promesse de taille téléchargée.

1. Choisissez le recadrage. Essayez un carré de 2400 × 2400 pixels montrant le produit entier. S'il ne tient pas, changez la composition plutôt que de couper une partie importante.
2. Vérifiez la cohérence. Comparez avec deux cartes existantes. Ajustez l'espace autour du produit pour obtenir une échelle comparable.
3. Préparez un original adapté. Comparez une copie de 2048 × 2048 pixels au recadrage pleine taille. Gardez assez de détails pour la vue produit et le zoom. N'agrandissez pas un petit original uniquement pour atteindre ce chiffre.
4. Choisissez le format. Utilisez un JPG net pour une photo sur fond uni, ou PNG si la transparence est nécessaire. Faites les essais de compression à partir de l'original de qualité.
5. Importez et inspectez. Vérifiez fiche produit, collection et affichage mobile. Aucun contour important ne doit manquer et le zoom doit montrer des détails utiles.
6. Vérifiez la version diffusée. Si la page est floue ou lente, examinez la version chargée par le thème avant un nouvel export.

Une fois la méthode validée sur quelques images, appliquez-la aux produits similaires. Vérifiez les exceptions une par une. Des bijoux brillants et une boîte en carton simple peuvent demander des choix de qualité différents malgré les mêmes dimensions et la même composition.

Ce que Shopify fait déjà automatiquement

Distinguez le fichier importé de la version téléchargée par le navigateur du client. Réduire votre fichier de 4 Mo à 1 Mo ne réduit pas forcément le téléchargement du client dans les mêmes proportions.

Shopify crée plusieurs tailles d'image et peut servir du WebP ou de l'AVIF si le navigateur les accepte. Sa documentation sur les images du thème précise qu'une compression manuelle avant importation n'est pas nécessaire. L'original conserve sa qualité dans l'administration, tandis que la boutique peut afficher une version optimisée.

Un original net et bien composé vaut donc mieux qu'un fichier réduit à tout prix. Shopify ne peut pas recréer les détails supprimés par une compression excessive. Si le thème étire une toute petite version d'une photo nette, le problème ne vient pas de l'original.

Commencez par le problème visible. Un produit mal recadré nécessite un ajustement de la composition ou du thème. Un original flou demande une meilleure photo. Si une image nette tarde à charger, examinez la version envoyée au client. Recompresser le fichier n'est pas la première solution dans tous les cas.

Choisir les dimensions selon l'emplacement

Prévoyez les dimensions pour la plus grande vue utile, pas seulement pour une petite carte produit. Une miniature nette peut être trop petite pour la galerie ou le zoom. Les pixels indiquent largeur et hauteur ; la taille en Ko ou Mo correspond à la quantité de données.

Shopify accepte les images de produits et de collections jusqu'à 5000 × 5000 pixels, soit 25 millions de pixels, avec un fichier inférieur à 20 Mo. Il propose 2048 × 2048 pixels pour les photos carrées, sans en faire une obligation pour toutes les boutiques. Consultez les exigences relatives aux médias produits avant de préparer un grand lot.

Les limites varient selon l'endroit où vous ajoutez l'image. La documentation de la section Fichiers indique 20 Mo et 25 millions de pixels pour les images ; celle des images du thème mentionne 20 millions de pixels pour d'autres importations. Suivez les consignes et le message d'erreur du champ utilisé plutôt qu'une limite supposée identique partout.

Une photo affichée sur 700 pixels de large peut bénéficier d'une version de 1400 pixels sur un écran utilisant deux pixels d'image par pixel d'affichage. C'est un exemple de préparation, pas une règle pour doubler tous les fichiers. Le zoom peut demander davantage de détails ; une petite carte doit toujours recevoir une version adaptée.

Ne rendez pas toutes les photos carrées uniquement parce que les cartes carrées sont courantes. Une bouteille haute, un vêtement et un paysage peuvent demander des compositions différentes. Harmonisez les formes là où cela facilite la comparaison des produits.

Une bannière de 1200 × 600 pixels a un rapport de 2:1. Un fichier de 2400 × 1200 garde cette forme et apporte plus de détails sur un écran haute résolution. Ce sont des exemples, pas des dimensions imposées par Shopify. Une zone mobile étroite et haute peut couper largement les côtés. Une image mobile distincte aide si le thème le permet.

Choisir JPG ou PNG selon le contenu

Essayez JPG pour une photo ordinaire sans transparence. Essayez PNG pour un fond transparent ou une illustration dont les textes et lignes fines se dégradent en JPG. Comparez les fichiers au lieu d'imposer le même format à tout le catalogue.

Une photo PNG peut peser bien plus qu'une JPG, mais la conversion n'est utile que si le produit reste fidèle. Examinez tissus, bijoux, veinures du bois et petits marquages. Un fichier léger qui masque ces détails n'est pas une bonne photo produit.

Importer du WebP est une option, pas une condition pour une diffusion moderne. Shopify choisit le format envoyé indépendamment de celui de l'original. Voir une image AVIF dans le navigateur ne signifie pas non plus qu'il faut importer de l'AVIF. Vérifiez les formats acceptés par le champ concerné.

Un fond blanc n'est pas transparent : enregistrer en PNG ne supprime pas le rectangle blanc déjà présent derrière le produit. Vérifiez les images transparentes sur le vrai fond de la page, notamment les bords clairs et les ombres. Notre guide des formats d'image explique dans quels cas utiliser chaque format.

Harmoniser les photos sans couper les détails

Le rapport d'aspect est le rapport entre largeur et hauteur. Les images de 2000 × 2000 et de 1000 × 1000 pixels sont toutes deux carrées, mais contiennent des niveaux de détail différents. La forme ne suffit pas : le produit doit aussi occuper une proportion similaire de chaque image principale.

Regardez une rangée de cartes. Une chaussure remplissant le cadre et une autre entourée de blanc donnent un ensemble irrégulier malgré des dimensions identiques. Ajustez la composition pour faciliter la comparaison. Conservez assez d'espace pour montrer tous les contours du produit.

Le recadrage enlève une partie de l'image ; le redimensionnement change ses dimensions ; l'étirement déforme ses proportions. Utilisez l'outil de recadrage pour la composition et l'outil de redimensionnement pour réduire les dimensions proportionnellement. Étirer une bouteille pour remplir un carré donne une fausse idée de sa forme.

Pour préparer une série, utilisez l’outil d’optimisation des photos produit : choisissez un fond et des marges communs, recadrez ou positionnez chaque photo, puis comparez l’ensemble dans Toutes les images. Vérifiez que les produits similaires occupent une place comparable dans le cadre. Un fond de mêmes dimensions ne corrige pas automatiquement les différences de cadrage. Exportez un JPG de bonne qualité, ou un PNG si la transparence est nécessaire, et vérifiez le résultat dans votre thème. L’outil prépare les fichiers ; Shopify gère toujours leur diffusion et le thème leur affichage.

Selon le thème, les réglages Shopify permettent un point focal pour garder une zone importante visible lors du recadrage. Il aide à conserver un visage ou un produit dans la bannière, sans garantir que toute une composition large tienne sur un écran étroit. Vérifiez les deux tailles d'écran.

Placez autant que possible titres promotionnels et boutons dans les champs de texte du thème. Un texte intégré à une bannière peut devenir minuscule ou disparaître sur téléphone. Un vrai texte peut revenir à la ligne et être sélectionné ; un vrai bouton fonctionne comme un lien plutôt que comme sa simple image.

Quand compresser avant l'importation ?

La compression aide si l'original est inutilement lourd, lent à importer ou dépasse une limite. Elle apporte moins si le fichier est déjà net et raisonnable et que Shopify sert une taille adaptée. Ne sacrifiez pas la qualité pour imposer à toutes les photos une cible arbitraire, comme 100 Ko.

Gardez une copie intacte. Si les dimensions sont excessives pour l'usage prévu, réduisez d'abord une copie, puis testez sa compression. Pour un petit bloc de contenu, cela peut économiser plus qu'une compression répétée d'un immense original. Le zoom produit peut toutefois justifier plus de détails.

Pour comparer une copie compressée, utilisez le compresseur d'images de Pixilo. Il accepte jusqu'à 20 images JPG, PNG ou WebP à la fois, de 25 Mo maximum chacune, en gardant format et dimensions. Ses limites diffèrent de celles de Shopify. Commencez par quelques exemples représentatifs et vérifiez-les avant le reste.

La compression PNG est ici sans perte : les pixels ne changent pas. Un PNG déjà bien compressé peut ne diminuer que légèrement. JPG et WebP peuvent modifier les détails fins ; inspectez la copie téléchargée. Si la compression ne réduit pas la taille, Pixilo conserve l'original.

Comparez les photos à leur taille d'affichage et dans le zoom disponible. Vérifiez textures fines, petites étiquettes, fonds uniformes et bords transparents. Revenez à l'original si des détails utiles disparaissent. Notre guide d'optimisation des photos produits détaille ces contrôles de qualité.

Rédiger des textes alternatifs utiles et des noms clairs

Le référencement des images commence par une photo qui aide à comprendre le produit. Donnez-lui un nom utile avant l'importation, par exemple sac-a-dos-toile-vert-olive-vue-avant.jpg. Évitez les longues listes de mots-clés. Le nom doit distinguer cette image d'une vue de profil ou d'un détail.

Le texte alternatif décrit l'image par écrit. Pour une photo produit utile, décrivez la vue : « Sac à dos en toile vert olive, vue de face avec deux poches extérieures. » Pour un détail, décrivez ce détail plutôt que de répéter le texte principal. N'ajoutez pas de prix, remise ou mot-clé que l'image n'explique pas.

Les conseils de Google sur le référencement des images recommandent des noms descriptifs et des textes alternatifs utiles sans accumulation de mots-clés. Le contenu voisin apporte aussi du contexte. Un nom de fichier est un petit indice, pas un substitut à une bonne fiche produit.

Ajouter un texte alternatif à une image produit Shopify

1. Dans l'administration Shopify, ouvrez Produits et sélectionnez le produit.
2. Cliquez sur l'image dans la section des médias pour ouvrir l'aperçu.
3. Sélectionnez Ajouter du texte alternatif, rédigez une brève description, puis sélectionnez Enregistrer le texte alternatif.
4. Répétez pour les autres vues utiles, en décrivant ce que chacune montre.

Ces étapes suivent les instructions Shopify sur le texte alternatif des médias produits. Les bannières du thème ont leurs propres réglages. Si l'éditeur propose une description, vérifiez-la avant validation : couleur, matière et détails doivent correspondre à la photo.

Une description dans les propriétés du fichier sur votre ordinateur ne devient pas automatiquement du texte alternatif. Le thème peut utiliser une image différemment selon la section. Une image décorative peut nécessiter une alternative vide ; une image servant de lien doit rendre sa destination compréhensible.

Notre guide du texte alternatif et des noms de fichiers explique ces cas avec des exemples. Les descriptions favorisent accessibilité et compréhension, sans garantir un classement ni remplacer des informations produit manquantes.

Vérifier la boutique publiée sur téléphone et ordinateur

L'aperçu dans l'administration ne suffit pas. Commencez par ces contrôles sur la boutique publiée ; aucun outil de développement n'est nécessaire.

• Ouvrez un produit sur téléphone. Le produit est-il entier ? Les marquages importants sont-ils lisibles et les matières reconnaissables ?
• Vérifiez une rangée de collection. Les formes et les marges des images principales sont-elles cohérentes ?
• Essayez la galerie et le zoom. Les autres photos apportent-elles des détails utiles ? La couleur ou variante sélectionnée montre-t-elle le bon produit ?
• Rechargez la page. La photo principale apparaît-elle rapidement ? Textes et boutons restent-ils en place pendant le chargement ?
• Recommencez sur un grand écran. Vérifiez les bannières larges et les grandes vues produit, pas seulement un aperçu étroit.

Examiner une image floue ou lente à charger

Si le flou persiste, vérifiez si le thème agrandit une petite version. Si une petite carte télécharge un immense fichier, vérifiez les tailles proposées. Les images responsives permettent au navigateur de choisir une version adaptée à l'écran et à la mise en page.

La documentation image_tag de Shopify explique comment le code du thème propose plusieurs tailles. En cas de correction, demandez au développeur de vérifier les dimensions demandées et les attributs srcset et sizes. Importer chaque taille de miniature séparément ne résout pas un problème de code du thème.

Si les outils de développement du navigateur vous sont familiers, le panneau Réseau montre les téléchargements réels. Sinon, envoyez la page et l'image concernées au développeur du thème.

1. Ouvrez la fiche produit, les outils de développement, puis Réseau (Network).
2. Avec le panneau ouvert, désactivez le cache du navigateur pour le test et rechargez. Vous inspecterez un nouveau téléchargement plutôt qu'une copie mémorisée.
3. Filtrez les images et trouvez la photo principale. Vérifiez l'aperçu de la requête pour ne pas la confondre avec une miniature de galerie.
4. Inspectez la taille transférée, les dimensions et l'en-tête de réponse Content-Type. Une URL ressemblant à un JPG peut livrer du WebP ou de l'AVIF.
5. Recommencez après rechargement à la largeur mobile. Vérifiez que la petite mise en page ne télécharge pas inutilement la plus grande version.

Ne jugez pas la diffusion uniquement au poids du fichier. Une grande version peut être justifiée pour un écran haute résolution ou le zoom. Cherchez les incohérences évidentes : une petite image étirée sur la galerie ou un original pleine résolution pour chaque petite carte.

La photo principale en haut doit être disponible rapidement. Les images plus bas peuvent généralement attendre que le visiteur s'en approche. Shopify déconseille le chargement différé des images visibles sans défilement. Si la première photo arrive tard, faites vérifier le comportement du thème ; charger immédiatement toute la galerie peut créer un autre problème.

Distinguer vitesse de chargement et mouvements de la page

Si la photo principale est le plus grand élément visible, elle peut influencer le Largest Contentful Paint (LCP), qui mesure l'apparition de la plus grande image ou du plus grand bloc de texte visible. Un fichier plus léger aide si son téléchargement contribue au délai. Une requête trop tardive peut rester lente après compression. Les conseils LCP de Google expliquent cette différence.

Si l'arrivée d'une photo pousse le prix ou le bouton d'achat vers le bas, le thème n'a peut-être pas réservé assez d'espace. Cela contribue au Cumulative Layout Shift (CLS), qui mesure les mouvements inattendus de la page. Réservez l'espace de l'image dans la mise en page plutôt que de la compresser davantage. Consultez les conseils de Google sur les décalages de mise en page et notre guide des images et des Core Web Vitals.

Comparez la même page avant et après dans des conditions similaires, avec un seul changement à la fois. Distinguez le test simulé de PageSpeed des éventuelles données de visiteurs réels. Les scores varient et les données réelles ne se mettent pas à jour immédiatement. Notez le problème résolu plutôt qu'un seul meilleur score.

Trouver la cause avant de modifier toutes les images

Les conseils Shopify sur les performances de la boutique citent aussi les thèmes, applications et ajouts de code. Les rapports utilisent les données de vrais visiteurs. Si les images sont déjà diffusées efficacement, cherchez le ralentissement restant plutôt qu'une autre application ou une compression plus forte.

Quelles images améliorer en premier ?

Commencez par la photo principale et la carte d'un produit très consulté, puis une bannière importante de l'accueil. Priorisez un problème visible : étiquette illisible, produit coupé ou photo tardive. La cinquième photo d'une galerie peu visitée passe généralement après l'image principale qui aide le client à décider de continuer.

Notez la page, les dimensions de l'original, le recadrage, le format et l'amélioration obtenue. Gardez l'original pour revenir en arrière. Appliquez une méthode validée aux produits similaires, puis vérifiez les exceptions au lieu de remplacer tout le catalogue d'un coup.

Questions fréquentes

Quelle taille choisir pour les photos produits Shopify ?

Aucune taille ne convient à tous les thèmes. 2048 × 2048 pixels est un bon départ pour une photo carrée, mais composition, thème et zoom déterminent le besoin. Utilisez un original net respectant les limites et vérifiez la page publiée. N'agrandissez pas une petite photo juste pour atteindre 2048 pixels.

Shopify compresse-t-il automatiquement les images ?

Shopify optimise la diffusion et peut envoyer différentes tailles et différents formats. Cela ne remplace pas l'original dans l'administration par une copie fortement compressée. Vous pouvez améliorer recadrage et dimensions avant l'importation, sans devoir compresser chaque image.

Toutes les photos doivent-elles rester sous 200 Ko ?

Non. Une limite arbitraire peut supprimer des détails utiles, surtout pour le zoom. Vérifiez taille et qualité de la version réellement téléchargée. Une petite carte et une grande vue détaillée ont des besoins différents.

PNG ou JPG pour Shopify ?

Essayez JPG pour les photos sans transparence et PNG pour les images transparentes ou les textes dégradés en JPG. Examinez surtout les petits détails produit. Shopify peut diffuser un autre format que celui importé.

Faut-il une application d'optimisation d'images ?

Pas uniquement pour obtenir la diffusion automatique de Shopify. Une application peut aider à gérer une grande photothèque ou un besoin précis. Identifiez d'abord ce que le thème et les outils existants ne font pas. Testez son effet sur une page avant de l'appliquer partout.

Faut-il une image différente pour chaque taille d'écran ?

Généralement non pour les photos produits : un bon thème demande plusieurs tailles du même original. Une composition mobile distincte aide si la bannière desktop coupe le sujet sur téléphone. C'est un choix de mise en page, pas une raison de multiplier chaque photo.