On-page

Images Shopify : texte alt, poids et nom de fichier

Mis à jour le 19 octobre 2026 · Par l’équipe Puck, éditée par Rank-Brain

Une image de produit sert d'abord à vendre, mais Google la lit aussi : son texte alternatif, son nom de fichier et le texte qui l'entoure. Sur Shopify, une partie de ce travail est déjà faite par la plateforme, l'autre vous revient.

Ce que Google lit d'une image

Le texte alternatif fait partie des balises title, meta et H1 de Shopify que nous traitons ensemble : quatre réglages simples, page par page. Les images méritent une page à part, parce qu'elles cumulent trois sujets : la description (le texte alternatif), le fichier lui-même (nom, taille, format) et la manière dont le thème l'affiche.

Le guide de Google sur les images pose quelques règles qui valent pour toute boutique :

• Google trouve les images dans l'attribut src d'un élément <img>. Il précise qu'il n'indexe pas les images placées en arrière-plan CSS. Une bannière de collection posée en image de fond n'existe donc pas pour Google Images.
• Le texte alternatif doit être utile et riche en informations, sans accumulation de mots-clés.
• Le nom de fichier doit être court et descriptif.
• L'image doit être placée près d'un texte pertinent, sur une page qui traite du même sujet.

Les formats que Google Search prend en charge sont BMP, GIF, JPEG, PNG, WebP, SVG et AVIF. WebP et AVIF, que Shopify sert aux navigateurs compatibles, figurent dans cette liste.

Dans le référencement naturel d'une boutique Shopify, les images ne remplacent pas un texte de fiche ou de collection. Elles le complètent : sur une fiche, elles montrent ce que la description dit, et leur texte alternatif le répète en peu de mots pour ceux qui ne voient pas l'image.

Écrire un texte alternatif utile

Le texte alternatif décrit l'image. Il est lu par les technologies d'assistance pour les personnes malvoyantes, et Shopify indique qu'il peut améliorer le référencement du site. Sa consigne est d'écrire un texte bref et descriptif : 512 caractères au maximum, et de préférence 125 au plus.

Google donne une gradation simple, que l'on peut transposer à un catalogue :

L'exemple de droite est générique : remplacez l'objet, la matière et l'angle par ceux de votre photo. Quelques règles pratiques pour une fiche à plusieurs images :

• Une description différente par image. Si la fiche montre le produit de face, de dos, porté et en détail, chaque texte le dit. Cinq images au même texte n'apportent rien de plus que la première.
• La couleur ou la variante visible. Si l'image montre la version bleu marine, écrivez « bleu marine ». C'est ce que l'image contient.
• Ce qui se voit, pas ce que vous vendez. « Livraison offerte » ou « meilleur prix » ne décrivent aucune image.
• Pas de liste de mots-clés. Google le déconseille expressément.

Sur une fiche produit, le chemin est : Produits, puis le produit ; cliquez sur un support multimédia pour ouvrir la page Aperçu du support multimédia, puis sur Ajouter un texte alternatif, et enfin sur Enregistrer le texte alternatif. Pour les images utilisées ailleurs (bannières, blocs du thème), la section Contenu > Fichiers permet aussi d'ajouter un texte alternatif ; Shopify précise que les modifications faites à cet endroit s'appliquent partout où le fichier est utilisé dans la boutique.

Sur un gros catalogue, Shopify permet de charger les textes alternatifs par fichier CSV. L'éditeur de supports peut aussi suggérer un texte quand le champ est vide : une suggestion acceptée est enregistrée dans le fichier, relisez-la donc avant de valider.

Que se passe-t-il quand le texte alternatif est vide ?

La réponse dépend du thème, et la documentation développeur de Shopify permet de la préciser. Le filtre Liquid image_tag, qui génère la balise <img> dans de nombreux thèmes, remplit l'attribut alt par défaut avec le texte alternatif du support. À défaut, pour les images d'article, de collection, de produit et de variante, il utilise le titre de la ressource.

Conséquence concrète : sur un thème qui s'appuie sur ce filtre, une fiche dont aucune image n'a de texte alternatif affiche le titre du produit sur toutes ses images. L'attribut n'est pas vide, un outil d'audit ne signalera peut-être rien, mais les cinq images portent la même description. Un texte propre à chaque image décrit mieux ce qu'elle montre.

Un thème peut aussi construire ses balises d'image autrement. Le seul moyen de savoir ce que produit le vôtre est d'ouvrir le code source d'une fiche et de lire les attributs alt.

Le titre du produit, qui sert de secours ici, est aussi celui qui alimente le titre principal de la page : raison de plus pour qu'il décrive clairement l'objet.

Le nom de fichier : avant le chargement

Google recommande des noms de fichiers courts mais descriptifs. Son exemple : my-new-black-kitten.jpg vaut mieux que IMG00023.JPG, et il conseille d'éviter, quand c'est possible, les noms génériques comme image1.jpg ou pic.gif.

Le bon moment pour nommer un fichier est avant de le charger : theiere-fonte-noire-profil.jpg plutôt que le nom sorti de l'appareil photo. Après coup, la marge est plus étroite. Dans Contenu > Fichiers, Shopify permet de renommer un fichier en modifiant son ancre d'URL, mais prévient que l'URL précédente du fichier ne fonctionne plus. Si cette ancienne adresse est utilisée quelque part (un lien dans un article, un e-mail, un autre site), elle cassera. Sur un catalogue déjà en ligne, réservez le renommage aux fichiers dont le nom n'a vraiment aucun sens, et traitez en priorité les nouveaux chargements.

Taille, poids et format : ce que Shopify fait pour vous

Beaucoup de conseils sur la compression des images viennent de plateformes où le site sert le fichier tel qu'il a été chargé. Shopify fonctionne autrement, et son centre d'aide le dit clairement.

• Pas besoin de compresser avant de charger. Shopify indique qu'il n'est pas nécessaire de compresser manuellement les images, et recommande de charger la meilleure qualité possible. Les images ne sont pas compressées au chargement, pour garder leur qualité d'origine.
• Optimisation à la diffusion. Les images sont optimisées pour la boutique par le réseau de diffusion de contenu (CDN) de Shopify. Lorsque le navigateur du client prend en charge WebP ou AVIF, les images sont diffusées dans ces formats. Les GIF sont convertis en WebP animé.
• Formats acceptés au chargement : JPEG, JPEG progressif, PNG, GIF, HEIC et WebP. Les fichiers TIFF et BMP sont acceptés mais convertis en JPEG ou PNG.

Côté limites, l'aide sur les supports de produit indique que les images de produits et de collections peuvent aller jusqu'à 5 000 x 5 000 px ou 25 mégapixels, avec un fichier de moins de 20 Mo. Pour les images de produits carrées, Shopify indique qu'une taille de 2 048 x 2 048 px offre généralement le meilleur affichage. Si un chargement est refusé pour un fichier pourtant inférieur à 20 Mo, Shopify explique que le problème vient du nombre de mégapixels : réduisez les dimensions en pixels.

Ce qui reste de votre ressort : choisir le bon format à la source (Shopify conseille le JPEG pour les photos de produits, le PNG pour les logos, les icônes, les bordures et les encadrements), garder un même rapport largeur/hauteur sur les images d'une collection pour que la grille reste régulière, et ne pas charger d'images démesurées sans raison.

Le chargement différé et la première image

Le chargement différé (loading="lazy") retarde le chargement des images situées plus bas dans la page. C'est utile sous la ligne de flottaison, nuisible au-dessus. Google le formule ainsi : n'ajoutez pas de chargement différé à un contenu susceptible d'être visible dès l'ouverture de la page.

Sur Shopify, le filtre image_tag applique déjà une logique : sans l'option preload, il règle automatiquement loading sur lazy pour les images des sections situées plus bas dans la page, et la documentation rappelle qu'il ne faut pas différer les images au-dessus de la ligne de flottaison. Le même filtre génère par défaut un attribut srcset (plusieurs largeurs de la même image, pour servir la bonne taille à chaque écran) et les attributs width et height.

Tous les thèmes n'utilisent pas ce filtre, et une section ajoutée ou une application peut insérer ses propres images. Vérifiez donc sur une fiche et une collection que l'image principale ne porte pas loading="lazy". Si elle le porte, la correction se fait dans le code du thème.

Vérifier les images d'une fiche

1. Ouvrez une fiche produit en ligne et affichez le code source. Cherchez <img et lisez l'attribut alt de chaque image du produit : est-il propre à chaque image, ou répète-t-il le titre du produit ?
2. Regardez le nom des fichiers dans les adresses d'images : nom descriptif, ou suite de chiffres ?
3. Repérez l'image principale : porte-t-elle loading="lazy" ? Elle ne devrait pas.
4. Sur une collection, vérifiez que la bannière est une balise <img> et non une image de fond CSS, si vous voulez qu'elle soit trouvable dans Google Images.
5. Commencez par vos meilleures ventes, puis traitez le reste du catalogue par fichier CSV.