Les visuels e-commerce déterminent souvent les décisions d'achat. Les statistiques montrent que 75 % des acheteurs se fient aux images produits lors de leur navigation. Selon eBay, les photos augmentent les conversions jusqu'à 65 %.
Il va sans dire que vos pages produits doivent être accompagnées d'images de qualité. Pourtant, l'optimisation des images soulève encore de nombreuses questions. Combien en utiliser ? Quelles sont les dimensions idéales ? Les photos ralentissent-elles le chargement ? Comment les rendre indexables par Google ? Comment améliorer le SEO de votre boutique Shopify grâce aux images ? Et bien plus encore.
Dans cet article, nous répondrons aux questions les plus fréquentes sur l'optimisation des images Shopify.
Tout d'abord, Shopify effectue déjà une grande partie du travail pour vous :
- Il utilise un CDN pour copier et distribuer les fichiers image sur des serveurs mondiaux, permettant à chaque visiteur de charger l'image depuis le serveur le plus proche.
- Il rend les images responsives, ce qui signifie que plusieurs dimensions sont définies dans le code pour adapter l'affichage à l'écran de l'utilisateur.
- Il applique une compression automatique, économisant des ressources pour un chargement plus rapide.
Ces mesures sont excellentes, mais il existe d'autres moyens d'optimiser les images de votre boutique Shopify. Voici 8 points à considérer pour rendre vos visuels attractifs, tant pour vos clients que pour les moteurs de recherche.
1. Misez sur la compression Shopify ou utilisez des outils complémentaires
Les images sont les principaux facteurs de ralentissement du chargement, alors que la vitesse est cruciale pour l'expérience utilisateur et le SEO. Pour garantir un chargement rapide, utilisez des outils de compression afin de trouver le juste équilibre entre qualité et poids du fichier.
Notez qu'il est préférable d'utiliser les formats PNG ou WebP car ils permettent une compression sans perte, contrairement au JPEG qui perd davantage en qualité lors de la réduction de taille.
Shopify propose une compression native : après l'importation, le fichier est automatiquement compressé. C'est pourquoi Shopify recommande d'importer systématiquement vos images dans la meilleure qualité possible.
Cependant, Shopify n'est pas toujours optimal et ne vous laisse pas choisir le taux de compression. Parfois, les photos paraissent floues, ou à l'inverse, la compression automatique est insuffisante. Les marchands souhaitant éviter cette compression ont trouvé une astuce : modifier le code pour définir les ratios d'image sur « master ».
Si l'affichage de vos images par Shopify ne vous convient pas, vous pouvez utiliser cette astuce. N'oubliez pas de compresser vos visuels manuellement. Il existe de nombreux outils (dont des applications d'optimisation d'images Shopify), certains permettant d'ajuster le niveau de compression et de comparer le résultat avec l'original.
Les images décoratives sans lien direct avec les produits peuvent également être lourdes et ralentir le chargement. Veillez à réduire leur poids. Parfois, il est préférable d'utiliser du CSS personnalisé plutôt que des images pour les éléments de style colorés.
2. Utilisez des noms de fichiers descriptifs et du texte alternatif
Les noms des fichiers importés sur Shopify sont analysés par les moteurs de recherche, tout comme le texte de vos pages. Si vos photos portent des noms génériques (type IMG_421.jpg), vous devez les renommer. L'idéal est de combiner le nom du produit, sa marque et/ou son modèle : par exemple, Smoothie-Blender-Blendjet-2.
Le nommage de vos images doit être cohérent avec les titres et en-têtes de vos pages produits. L'objectif est de décrire précisément ce qui est présenté sur la page, ainsi que sur chaque image. Analysez les termes de recherche utilisés par vos clients et intégrez-les dans vos noms de fichiers. Évitez toutefois le bourrage de mots-clés : privilégiez une phrase simple et lisible.
Quel est l'intérêt ? Des noms de fichiers descriptifs et riches en mots-clés vous aideront à mieux vous classer, tant dans les résultats de recherche classiques que dans Google Images.
Veuillez noter que vous ne pouvez pas modifier le nom des fichiers une fois qu'ils ont été importés. Pour modifier le nom des fichiers image sur Shopify, vous devez les importer à nouveau.
Ce qui est plus important pour le SEO, c'est ce que vous indiquez dans le texte alt. L'attribut alt de la balise img est destiné à l'accessibilité : lorsqu'un navigateur ne peut pas afficher une image ou échoue à le faire, les utilisateurs voient le texte alt. Il sert également d'explication pour les utilisateurs malvoyants.
Il est important de renseigner le texte alt pour chaque image de produit. Suivez les mêmes règles que pour les noms de fichiers : indiquez le type de produit et le modèle présents sur l'image, mais ne vous contentez pas de copier ce qui figure déjà dans le titre de la page, le nom de l'image ou ailleurs. Les analystes de Google recommandent de décrire le contenu de l'image plutôt que de répéter le nom du produit. Évitez également d'utiliser des mots-clés commerciaux (« acheter parasol de terrasse »).
Shopify facilite l'utilisation du texte alt. Dans le panneau d'administration, ouvrez une image dans la section Média de votre produit, et vous verrez le champ alt sur la droite.
En quoi cela vous aide-t-il ? Un texte alt utile facilitera le référencement de vos images et rendra vos pages plus accessibles.
3. Assurez-vous que vos images Shopify sont adaptatives (responsive)
Comme nous l'avons mentionné, Shopify utilise des images adaptatives qui s'ajustent à l'écran de chaque utilisateur. Cependant, il est possible que certains thèmes tiers ne prennent pas automatiquement en charge les visuels adaptatifs. Si vous envisagez de changer de thème Shopify, soyez vigilant à ce point lors de votre choix.
Quoi qu'il en soit, vous pouvez toujours spécifier manuellement plusieurs dimensions. Pour ce faire, vous devez modifier le code de votre thème et renseigner l'attribut srcset dans la balise img. Cela peut ressembler à ceci :
4. Affichez plusieurs photos de produits et soyez cohérent
Votre objectif avec les photos de produits sur Shopify est d'attirer davantage de clients. Ne vous limitez pas à une seule image par produit : incluez une variété de photos montrant les articles sous différents angles et dans des contextes d'utilisation réels. De cette façon, vous renforcerez la confiance envers ce que vous vendez et informerez mieux les visiteurs sur les qualités de vos produits.
Une étude sur les annonces eBay a montré que le fait d'avoir deux images de produit doublait les taux de conversion par rapport à une seule. Mais combien en faut-il au-delà de deux ? Il n'y a pas de réponse universelle au nombre d'images de produit par page. Vous pouvez effectuer des tests A/B pour voir ce qui convertit le mieux : plus d'images pour présenter les caractéristiques du produit ou moins d'images pour rendre la boutique plus rapide. Vous pouvez également utiliser des cartes de chaleur (heatmaps) pour voir avec quels types de photos de produits les visiteurs interagissent.
Il en va de même pour les pages de collection : expérimentez avec le nombre de produits affichés sur celles-ci. Notez que Shopify fixe la limite maximale à 50.
Lorsque vous utilisez plusieurs images par produit, assurez-vous que les miniatures affichées sur les pages de collection sont cohérentes. Par exemple, il n'est pas esthétique que certains produits soient présentés de face et d'autres de dos. De plus, l'ensemble paraît plus soigné lorsque tous les produits présentés sont photographiés dans le même style. Par ailleurs, si vous utilisez des vidéos ou des modèles 3D, vous pouvez créer des miniatures pour ceux-ci avec une image de haute qualité ; sinon, Shopify générera automatiquement ces miniatures.
5. Ajoutez des images zoomables
Les recherches montrent que la possibilité de zoomer sur des images de haute qualité multiplie par 3 les taux de conversion (tout comme la possibilité de voir plusieurs vues et couleurs d'un produit). Il existe plusieurs façons de rendre les photos Shopify zoomables.
Si vous avez des développeurs dans votre équipe ou si vous pouvez engager des spécialistes, ils peuvent rapidement ajouter une fonctionnalité de zoom en utilisant JavaScript, notamment la bibliothèque JS JQuery ou le framework JS Vanilla.
Vous pouvez également choisir une application de zoom d'image Shopify. Par exemple :
- Full Page Zoom ajoutera des icônes de zoom avant et arrière à vos images, permettant aux utilisateurs de profiter d'une vue plein écran d'un produit. Cela coûte 2,99 $ par mois et inclut un essai gratuit de 30 jours.
- Magic Zoom Plus permettra un aperçu du zoom au survol et une vue complète au clic. La licence à vie coûte 69 $, mais l'application peut également facturer des frais mensuels pour des fonctionnalités supplémentaires, telles que la rotation de produit à 360 degrés.
6. Créez un sitemap d'images
Un sitemap est une liste de toutes les pages de votre boutique que vous souhaitez voir apparaître dans les résultats de recherche. Comme nous l'avons abordé dans notre article sur les sitemaps Shopify, Shopify automatise le processus de création et de formatage, et la seule chose qu'il vous reste à faire est de soumettre le sitemap aux moteurs de recherche. Cependant, vous n'avez pas beaucoup de flexibilité avec un fichier généré par Shopify, et celui-ci n'inclut pas les images.
Il est judicieux de créer un sitemap d'images distinct. C'est un autre moyen d'aider les moteurs de recherche à découvrir vos photos de produits et à mieux les classer. Pour générer un tel fichier, vous pouvez utiliser une application comme Image Sitemap.
7. Mettez en place le chargement différé (lazy loading)
Si votre boutique Shopify contient de nombreuses images, il est préférable de les charger de manière asynchrone. La technique du chargement différé ne charge pas tout le contenu d'une page immédiatement, mais progressivement, au fur et à mesure que l'utilisateur fait défiler la page. C'est un excellent moyen d'améliorer la vitesse de chargement et le référencement, surtout depuis la mise à jour Core Web Vitals de 2021, qui évalue non pas la vitesse de chargement totale de la page, mais la rapidité du premier rendu (c'est-à-dire le contenu situé au-dessus de la ligne de flottaison).
Vous pouvez effectuer une vérification via Performance Insights dans les outils de développement Chrome : cela visualisera ce qui pourrait bloquer le rendu de la page et le temps nécessaire pour charger le LCP (Largest Contentful Paint, crucial pour les moteurs de recherche) et pour que la page devienne interactive (voir TTI, Time to Interactive).
Pour appliquer le chargement différé, vous devez ajouter loading: 'lazy' à la balise img. Vous pouvez automatiser cette opération à l'aide d'applications d'optimisation d'images pour Shopify comme TinyIMG (qui inclut de nombreuses fonctionnalités SEO, avec préchargement des ressources disponible dans tous les plans payants) ou Loadify (chargement différé proposé à 3,99 $ par mois).
8. Envisagez la photographie virtuelle
Avec les progrès technologiques, la demande pour des expériences d'achat innovantes et interactives augmente. Vous pouvez non seulement inclure différentes photos et vidéos pour montrer vos produits sous plusieurs angles et en situation réelle, mais aussi mettre en œuvre la photographie virtuelle.
Qu'est-ce que cela signifie ? Il existe des solutions logicielles capables de créer ou de modifier des images à partir de conceptions numériques, sans avoir à photographier physiquement le produit. De plus, elles peuvent rendre vos produits tridimensionnels afin que les clients puissent les observer sous différents angles pour une expérience plus immersive.
C'est particulièrement utile si votre boutique propose des options de personnalisation à la demande : par exemple, si vous vendez des canapés disponibles en différentes couleurs et formes. Vous n'avez pas tous les modèles en stock pour les photographier, car ils sont produits à la commande, mais vous pouvez tout de même présenter les différentes options grâce à un logiciel de photographie virtuelle. Découvrez des solutions comme Threekit pour comprendre comment cela pourrait fonctionner pour votre boutique.
Optimisez facilement vos images Shopify
En suivant ces recommandations, vous rendrez vos pages plus performantes en termes de conversion, améliorerez leur vitesse de chargement et obtiendrez un meilleur classement dans les résultats de recherche classiques et d'images. Que vous choisissiez l'optimisation manuelle ou l'externalisation, les bons outils et applications SEO vous feront gagner un temps précieux et permettront à votre boutique d'atteindre rapidement une qualité d'image optimale.
Si vous recherchez d'autres conseils SEO pour Shopify, consultez notre guide d'optimisation.
