Réponse rapide : Le SEO des images sur Shopify est principalement un problème de vitesse, pas de mots-clés. Les photos de produits sont les plus grandes sur la page et généralement l'élément de Largest Contentful Paint, donc la taille du fichier image, les dimensions en pixels et la priorité de chargement influencent le classement plus que les noms de fichiers. Téléchargez à 2048 px sur le bord le plus long, gardez la première image sous environ 200 Ko, définissez la largeur et la hauteur, chargez en différé uniquement en dessous de la ligne de flottaison, et laissez le CDN de Shopify servir les variantes WebP redimensionnées. Ce guide couvre les tailles, les poids des fichiers, la résolution, le redimensionnement et les formats ; pour le texte alternatif, voir texte alternatif des images de produit, pour l'aperçu de partage, voir images de partage social.

Shopify sert les images via son propre CDN et génère automatiquement des variantes réactives, ce qui signifie qu'une grande partie des conseils génériques sur le SEO des images ne s'applique pas ici. Ce qui reste est une courte liste, et la plupart concerne le poids et les dimensions.

Pourquoi les images dominent les Core Web Vitals de Shopify

Sur une page produit typique, l'image principale est l'élément LCP — la plus grande chose dans la fenêtre d'affichage, et celle que Google chronomètre. Si elle prend 3,5 secondes à s'afficher, la page échoue au LCP, peu importe la rapidité du reste du thème.

Deux choses la ralentissent : le fichier est plus grand que l'espace dans lequel il s'affiche, et il n'est pas priorisé. Une image de 2400 px affichée à 800 px gaspille les trois quarts des octets. Le filtre image_url de Shopify avec un paramètre de largeur corrige cela, et la plupart des thèmes modernes l'utilisent déjà — mais les images insérées dans les champs de texte enrichi, les corps de blog et les sections personnalisées le contournent généralement.

Taille de l'image, poids du fichier et résolution sont trois choses différentes

La plupart des conseils sur les images échouent parce qu'ils les confondent.

  • Taille de l'image est les dimensions en pixels — 2048 × 2048. Elle détermine la netteté de l'image et sa taille d'affichage.
  • Poids du fichier est les octets sur le disque — 180 Ko. Il détermine le temps de téléchargement de l'image. Il dépend des dimensions, du format, de la compression et de la quantité de détails que contient la photo.
  • Résolution (DPI) est une instruction d'impression. Les navigateurs l'ignorent. Une image de 1600 px à 72 DPI et la même image à 300 DPI sont identiques sur le web ; la règle "enregistrer à 72 DPI pour le web" ne change que les métadonnées.

La variable qui compte avec les pixels est le ratio de pixels de l'appareil. Un téléphone avec un écran 2× a besoin d'environ deux fois la largeur CSS en pixels réels pour être net : une carte produit de 400 px de large veut une image de 800 px sur cet appareil et une image de 400 px sur un moniteur 1×. C'est pour cela que srcset et sizes existent — le thème liste les variantes que Shopify peut générer et le navigateur choisit celle qui convient. Les thèmes construits sur le filtre image_tag de Shopify les émettent automatiquement ; une balise img écrite à la main dans une section personnalisée obtient une taille pour tout le monde.

Objectifs de poids de fichier par emplacement

Une seule règle "garder les images sous 100 Ko" est fausse dans les deux sens — trop lâche pour les vignettes, trop stricte pour une bannière pleine largeur. Travaillez par emplacement :

Emplacement Largeur d'affichage typique Objectif de poids de fichier Pourquoi
Image principale de la page d'accueil / bannière pleine largeur 1600–2000 px ≤ 200 Ko (WebP), ≤ 300 Ko (JPEG) Presque toujours l'élément LCP sur la page d'accueil
Première image de produit (tête de galerie) 800–1200 px ≤ 200 Ko Élément LCP sur la page produit
Images supplémentaires de la galerie 800–1200 px ≤ 100–150 Ko Chargées à l'interaction ou en différé
Cartes de la grille de collection 300–500 px ≤ 50 Ko Des dizaines par page ; la somme est ce qui fait mal
Images intégrées dans le blog 700–900 px ≤ 100 Ko Contournent généralement la logique de variante du thème
Logos, icônes, badges ≤ 300 px ≤ 10 Ko, SVG si possible Répétés sur chaque page

Ce sont des objectifs de travail, pas des lois : un gros plan détaillé de tissu nécessitera plus d'octets qu'un produit sur fond blanc aux mêmes dimensions. Le test qui compte est de savoir si la première image de la page respecte le budget LCP.

Formats : JPEG, PNG, WebP et ce que Shopify fait pour vous

  • JPEG pour les photographies. La qualité d'exportation 75–82 est la plage où une photo de produit cesse de changer visiblement mais le fichier continue de rétrécir.
  • PNG uniquement pour les graphiques plats qui nécessitent de la transparence — logos, badges, illustrations avec des bords nets. Une photographie PNG est généralement cinq fois la taille du même JPEG.
  • WebP est plus petit que les deux pour la même qualité visuelle, et le CDN de Shopify sert automatiquement WebP aux navigateurs qui l'acceptent. Convertir avant le téléchargement ne gagne donc rien sur la vitrine ; ce qui aide, c'est qu'une application qui remplace un original surdimensionné par une version WebP réduit chaque variante que Shopify génère à partir de celui-ci.
  • SVG pour les logos et icônes : indépendant de la résolution et généralement quelques kilo-octets.

Redimensionner les images pour Shopify : où le faire

Il y a trois endroits pour redimensionner, et ils ne sont pas interchangeables.

Avant le téléchargement (préféré pour les nouvelles images). Redimensionnez à 2048 px sur le bord le plus long, puis compressez. Tout éditeur d'image ou un compresseur web gratuit le fait, et cela signifie que l'original que Shopify conserve est déjà léger. Exportez par lot toute une séance à la même taille et au même ratio d'aspect pour que la grille de collection reste uniforme.

À l'intérieur de Shopify, par le thème. Les variantes de Shopify sont la couche de livraison : le thème demande une largeur et le CDN renvoie cette taille. C'est automatique et correct, mais cela ne réduit que les dimensions — un original lourd et bruyant produit toujours des variantes plus lourdes qu'un original propre.

Par une application qui réécrit l'original. C'est la seule voie qui corrige les images déjà dans le catalogue sans les re-télécharger. L'Autopilot de RankEngine a une règle Auto Image Compression qui convertit les images de produit surdimensionnées en WebP et remplace l'original via l'API Admin (productCreateMedia, puis productDeleteMedia), et son journal d'activité enregistre chaque conversion avec la taille avant et après — voir Configuration des règles Autopilot. Re-télécharger manuellement a un coût que la voie de l'application évite : cela change l'URL de l'image, ce qui casse les liens et les références mises en cache vers l'ancien fichier.

Le compromis performance-qualité, honnêtement

Les guides de compression ont tendance à promettre aucune perte visible. La version honnête : il y a une perte, et la question est de savoir si un acheteur peut la voir à la taille à laquelle l'image est affichée. Vérifiez le résultat sur la vraie page produit à 100 %, sur un téléphone, pas dans l'aperçu zoomé de l'éditeur. Les bandes dans un dégradé lisse, les halos sur les bords durs et la texture de tissu floue sont les trois indices ; si vous les voyez, augmentez la qualité de cinq points et exportez à nouveau. Le gain de 82 à 60 est faible en octets et grand en artefacts, c'est pourquoi la plage utile est étroite.

Ce qu'il faut réellement faire

Téléchargez à 2048 px sur le bord le plus long. Shopify génère des variantes plus petites à partir de l'original, donc télécharger plus grand gaspille du stockage sans rien améliorer. Télécharger plus petit signifie que la vue zoom est floue.

Laissez Shopify servir WebP. Il le fait automatiquement en fonction de l'en-tête Accept du navigateur. Convertir manuellement avant le téléchargement ne gagne rien et vous coûte le retour au JPEG.

Définissez les attributs de largeur et de hauteur. Des dimensions manquantes provoquent un décalage de mise en page à mesure que l'image se charge, ce qui est une pénalité CLS directe. Les thèmes qui utilisent image_tag obtiennent cela gratuitement ; les balises img écrites à la main dans une section personnalisée ne le font généralement pas.

Chargez en différé tout ce qui est en dessous de la ligne de flottaison — et rien au-dessus. Un attribut lazy sur l'image principale retarde l'élément LCP et aggrave le score. La première image doit avoir une priorité de récupération élevée à la place.

Position de l'image Stratégie de chargement Raison
Au-dessus de la ligne de flottaison (image principale / élément LCP) fetchpriority="high", pas de chargement différé Le chargement différé déplace l'élément de peinture visible le plus grand plus tard et aggrave le score
Au-dessus de la ligne de flottaison (autres images) Eager (par défaut) Les images visibles ne doivent pas être différées
En dessous de la ligne de flottaison loading="lazy" Les images hors écran sont différées, réduisant le poids initial de la page et libérant de la bande passante pour l'élément LCP

Compressez avant le téléchargement si la source est un fichier de caméra. Le traitement de Shopify n'est pas agressif. Un JPEG DSLR de 6 Mo devient une variante de 900 Ko ; la même image passée par un compresseur d'abord devient 200 Ko sans différence visible.

Noms de fichiers et texte alternatif : la version honnête

Les noms de fichiers sont un signal faible. Renommer IMG_4821.jpg en blue-merino-scarf.jpg vaut la peine d'être fait lorsque vous téléchargez de toute façon, et ne vaut pas un projet de re-téléchargement en masse — re-télécharger casse les URL d'image existantes et tous les liens vers elles.

Le texte alternatif compte plus, principalement pour l'accessibilité et Google Images, et il est correctement couvert dans texte alternatif des images de produit. Le générateur de texte alternatif gratuit l'écrit une image à la fois dans le navigateur.

La seule chose qui vaut la peine d'être mesurée

Passez une page produit par PageSpeed Insights et regardez seulement deux chiffres : l'élément LCP (il nommera l'image) et sa taille. Si l'élément LCP est une image de plus de 200 Ko, c'est tout le projet.

Tout le reste — noms de fichiers, sitemaps, données EXIF — est une erreur d'arrondi à côté de l'image qui prend deux secondes à s'afficher.

Le faire à travers un catalogue

La version par page de cela est simple. La version catalogue ne l'est pas : sur 800 produits, les images surdimensionnées sont un sous-ensemble, généralement les plus anciennes ou un lot importé d'un flux de fournisseur.

Le rapport d'audit de vitesse de RankEngine indique le LCP par URL avec l'image incriminée nommée, et ses outils d'image signalent les fichiers surdimensionnés et les dimensions manquantes à travers le catalogue plutôt que par page ; les règles de compression et de texte alternatif les corrigent ensuite lors de l'exécution quotidienne d'Autopilot dans la limite de correction par magasin, chaque changement étant vérifié par rapport au magasin et réversible à partir du journal.

Liste de contrôle pour votre prochain lot d'images

  1. Même ratio d'aspect pour chaque image de la collection.
  2. 2048 px sur le bord le plus long, exporté à une qualité JPEG de 75–82 (ou WebP).
  3. Première image sur la page sous 200 Ko ; vignettes de grille sous 50 Ko.
  4. Nom de fichier descriptif si vous téléchargez de toute façon ; jamais un re-téléchargement juste pour renommer.
  5. Texte alternatif écrit pour le produit, pas le mot-clé.
  6. Après publication : PageSpeed Insights sur une page produit — confirmez l'élément LCP et sa taille.

Articles connexes