Images SEO : 8 conseils pour optimiser votre site web (2024)

Voici les dernières techniques de SEO pour optimiser la vitesse de chargement de votre boutique en ligne et y diriger plus de trafic naturel.

Dans un monde où les clients s’attendent à une gratification instantanée, un site e-commerce qui se charge rapidement est d’une importance capitale. Les images réactives peuvent aider à améliorer les temps de chargement et augmenter les conversions.

Bien que la qualité des images soit essentielle pour garantir des taux de conversion élevés, l’optimisation des images SEO est primordiale pour l’expérience utilisateur et le référencement naturel (SEO) de votre boutique en ligne. Apprendre à optimiser les images pour le SEO peut apporter d’énormes bénéfices, allant de l’amélioration de votre marque à l’attraction de clients parcourant les images sur Google.

Qu’est-ce que l’optimisation des images SEO ?

L’optimisation des images pour le SEO consiste à s’assurer que vos images apparaissent parfaitement, aussi bien sur ordinateur que sur appareil mobile, sans nuire aux performances du site. Cela implique de modifier le format, les dimensions et la résolution de l’image pour les adapter à un appareil, tout en maintenant la qualité.

Trois éléments principaux entrent en jeu :

1. Le format de fichier de l’image
2. Les dimensions de l’image (hauteur et largeur)
3. La résolution de l’écran

Pourquoi optimiser les images SEO ?

Les images jouent un rôle crucial dans une bonne expérience d’achat en ligne. Les clients ne vont pas acheter vos produits s’ils ne peuvent pas les voir. Des données de l’HTTP Archive (en anglais) révèlent qu’en moyenne, les images non optimisées représentent un peu moins de 38 % du poids total d’une page web sur mobile.

L’optimisation des images SEO aide à réduire le poids de votre page web, un principe fondamental d’un bon web design e-commerce. En voici quelques avantages :

Équilibre entre vitesse et qualité

L’optimisation des images pour le web et pour mobile vise à équilibrer vitesse et qualité. Proposer des images attrayantes est essentiel en e-commerce. Cela crée une meilleure expérience de navigation pour les acheteurs.

Google a suggéré que la vitesse du site est un des signaux utilisés par son algorithme pour classer les pages. Si vos pages sont lentes, les moteurs de recherche peuvent indexer moins de pages avec leur budget d’indexation, ce qui peut nuire à votre indexation.

Amélioration des performances de recherche

Les images optimisées pour le référencement aident à la fois les lecteurs et les moteurs de recherche à mieux comprendre votre site et à rendre votre contenu plus visible en ligne. Suivant les périodes, les images apparaissent en moyenne dans 18 % à 25 % des requêtes de recherche sur Google.

L’optimisation des images SEO peut aider à classer vos images dans la recherche d’images de Google, ce qui peut générer plus de trafic vers votre site et développer votre marque.

Comment optimiser les images SEO pour le web

1. Utilisez des noms d’images concis et directs

Lorsque vous téléchargez des images sur votre site, vous pourriez être tenté de laisser les noms de fichiers attribués par défaut par votre appareil photo. Mais en ce qui concerne le SEO des images, il est important d’utiliser des mots-clés pertinents pour aider votre page web à se classer sur les moteurs de recherche.

Créer des noms de fichiers descriptifs et riches en mots-clés est crucial pour l’optimisation des images SEO. Les moteurs de recherche n’indexent pas seulement le texte de votre page, mais aussi les noms de vos fichiers image.

Admettons que vous ayez une image d’une Ford Mustang de 2012 de couleur rouge. Vous pourriez utiliser le nom générique que votre appareil photo a attribué à l’image (par exemple, DCMIMAGE10.jpg). Cependant, il serait bien mieux de nommer le fichier Ford-Mustang-LX-2012-Rouge.jpg.

Pensez à la manière dont vos clients recherchent des produits sur votre site. Quels schémas de nommage utilisent-ils lors de leurs recherches ? Dans l’exemple ci-dessus, les acheteurs de voitures peuvent rechercher des termes tels que :

• 2012 Ford Mustang LX Rouge
• Ford Mustang LX Rouge 2012
• Ford Mustang LX 2012 Rouge

Consultez les analyses de votre site pour voir quels mots-clés vos clients utilisent pour vous trouver. Déterminez les schémas de nommage les plus courants et appliquez cette formule à votre processus de nommage de fichiers image.

Si vous ne souhaitez pas aller aussi loin dans les données, veillez à utiliser des mots-clés pertinents et utiles lors de la nomination de vos images SEO (autrement dit, essayez de les décrire).

Non seulement ce type de nom sera plus clair pour vous et vos clients, mais c’est aussi un excellent moyen d’améliorer votre SEO on-page. Cela peut également aider vos pages et images à se classer plus haut dans les pages de résultats des moteurs de recherche (SERP).

2. Optimisez soigneusement vos attributs alt

Les attributs alt indiquent le texte alternatif qui doit apparaître à la place des images lorsqu’un navigateur ne peut pas les afficher correctement. Ils ont aussi un objectif d’accessibilité web. Même lorsque l’image est affichée, si vous passez la souris dessus, vous pourrez voir le texte de l’attribut alt (selon vos paramètres de navigateur).

L’attribut alt ajoute également de la valeur SEO à votre site. Ajouter des attributs alt qui incluent des mots-clés pertinents aux images de votre site peut vous aider à mieux vous classer dans les moteurs de recherche. Il est possible que les attributs alt soient le meilleur moyen pour vos produits e-commerce d’apparaître dans la recherche d’images et web de Google.

Dans le cas de votre image de voiture rouge, le code source pourrait ressembler à ceci :

<img src="Ford-Mustang-LX-2012-Rouge.jpg" alt="Ford Mustang LX 2012 Rouge">

La priorité numéro un en matière d’optimisation des images SEO est de remplir l’attribut alt pour chaque image de produit sur votre site.

Voici quelques règles simples pour les attributs alt :

• Décrivez vos images en langage clair, tout comme vous l’avez fait pour vos noms de fichiers image.
• Si vous vendez des produits avec des numéros de modèle ou de série, utilisez-les dans vos attributs alt.
• N’abusez pas des mots-clés dans vos attributs alt de mots-clés (par exemple, alt="ford mustang muscle car acheter maintenant pas cher meilleur prix en solde").
• N’utilisez pas d’attributs alt pour les images purement décoratives. Les moteurs de recherche peuvent vous pénaliser pour sur-optimisation.

Enfin, faites un contrôle de temps en temps. Consultez le code source de vos pages web et vérifiez si vos attributs alt sont toujours là et encore pertinents. Vous serez surpris de ce que vous pouvez manquer à la vitesse où une entreprise se développe.

3. Choisissez judicieusement les dimensions de vos images et vos angles de produit

Il est courant de montrer plusieurs angles de votre produit. Pour revenir à l’exemple de la Ford Mustang, montrer un seul côté de la voiture ne suffirait pas, surtout si vous essayez de la vendre. Il serait dans votre intérêt de montrer des prises de vue :

• De l’intérieur
• De l’arrière (surtout son aileron)
• Des jantes
• Du moteur (c’est une Mustang, quand même)

Ajouter des attributs alt pour chaque photo supplémentaire est le meilleur moyen d’en tirer parti. Profitez-en pour créer des attributs alt uniques pour chaque prise de vue de produit :

• Ford-Mustang-LX-2012-Rouge-Intérieur-Cuir.jpg → avec l’attribut alt="Ford Mustang LX 2012 Rouge Intérieur Cuir"
• Ford-Mustang-LX-2012-Rouge-Vue-Arrière-Aileron.jpg → avec l’attribut alt : alt="Ford Mustang LX Rouge 2012 Vue Arrière Aileron"

L’essentiel ici est d’ajouter des descriptions à votre attribut alt de base, afin que les potentiels intéressés atterrissent sur votre site. C’est un effort supplémentaire de votre part, et Google vous récompensera avec des visiteurs.

4. Redimensionnez vos images

Vous devez gérer les images sur votre site pour vous assurer qu’elles rendent bien sur tous les appareils, en particulier sur mobile et sur écran haute définition.

Pour s’adapter aux écrans à densité plus élevée, qui contiennent plus de pixels que les traditionnels alors qu’ils font la même taille, il vous faudra du x2 pour que les images apparaissent nettes et non floues. Autrement dit, si votre site a un emplacement d’image de 200 pixels x 200 pixels, vous aurez besoin d’une image de 400 pixels x 400 pixels pour qu’elle reste nette sur un écran haute définition. Presque tous les téléphones mobiles ont désormais des définitions d’écran en x2, voire plus.

Le moyen le plus simple d’y parvenir est d’utiliser un réseau de diffusion de contenu (CDN, pour content delivery network). Un CDN décharge le travail de redimensionnement des images et d’envoi du meilleur format d’image pour l’appareil d’un utilisateur. Il améliore également la vitesse de chargement du fichier image lui-même, car il dispose de serveurs plus proches de l’utilisateur final.

5. Choisissez le bon format d’image

Le format d’image est l’un des éléments les plus importants à bien gérer sur votre site. Certains formats de fichiers sont de meilleure qualité que d’autres. Certains sont aussi plus ou moins volumineux, ce qui impacte le temps de chargement de votre site.

Pour commencer, il existe deux principaux types de formats : les images matricielles et vectorielles.

Les images vectorielles sont basées sur des formules mathématiques. Si vous avez besoin de visuels pouvant être redimensionnés sans sacrifier la qualité, privilégiez des graphiques vectoriels. Le format d’image vectoriel le plus courant est le fichier Scalable Vector Graphics (SVG). C’est un choix idéal pour les logos, les icônes et d’autres graphiques simples pour lesquels vous avez besoin de clarté et de netteté, peu importe le redimensionnement.

Les images matricielles sont composées de pixels qui peuvent former des images très détaillées, comme des photographies. Plus une image contient de pixels, plus elle sera grande et en haute définition.

Au fil du temps, de nouveaux codecs améliorés ont été développés pour les images matricielles. Par exemple, le GIF était une version précoce d’un codec d’image pour le web, mais la qualité était médiocre car la technique de compression affectait les pixels voisins. Les techniques plus récentes cherchent à coder et à compresser les fichiers de manière moins détectable pour l’œil humain. Cela signifie que nous pouvons proposer des images de meilleure qualité, avec des fichiers de plus petite taille, grâce à ces formats d’image plus récents. Les formats suivants sont les plus couramment utilisés sur le web aujourd’hui :

• JPG : Un format d’image largement utilisé pour les photos. Il utilise une compression avec perte pour réduire la taille du fichier, ce qui sacrifie une partie de la qualité.
• PNG : Un format populaire pour les designers web car il prend en charge les arrière-plans transparents. Ce type de fichier conserve toutes ses données d’origine lorsqu’il est compressé, ce qui en fait un bon choix pour les diagrammes et les graphiques sur un site web.
• WEBP : Un format moderne conçu pour le web. Il prend en charge la compression avec et sans perte, offrant de plus petites tailles de fichiers que les formats JPG et PNG, tout en maintenant une qualité similaire, voire meilleure.
• AVIF : Le format d’image le plus récent. L’AVIF compresse bien les images avec moins de dégradation.

Les formats pris en charge pas chaque navigateur varient. C’est là qu’un CDN d’images peut être utile, car il peut automatiquement sélectionner le meilleur format et convertir votre image d’origine en fonction du navigateur utilisé. Si vous n’utilisez pas de CDN avec cette capacité, vous devrez utiliser l’élément <picture> dans votre code HTML.

💡Remarque : Le CDN de Shopify détecte automatiquement quels formats de fichiers sont pris en charge par un navigateur et affiche la meilleure option. Par exemple, il peut convertir des images en WebP ou AVIF, lorsque cela est pris en charge, et afficher des images PNG ou JPEG en tant que solution de repli pour les navigateurs plus anciens.

6. Utilisez des sitemaps d’images

Si votre site utilise des galeries Javascript, des pop-ups d’images ou d’autres moyens complexes pour améliorer l’expérience d’achat globale, les sitemaps d’images aideront Google à remarquer vos images SEO.

Les robots d’indexation ne peuvent pas identifier les images qui ne sont pas spécifiquement mentionnées dans le code source de la page web. Alors, pour que les robots puissent indexer vos images non identifiées, vous devez lister leur emplacement dans un sitemap d’images.

Vous pouvez insérer la ligne suivante dans votre fichier robots.txt, indiquant le chemin vers votre sitemap :

Sitemap: http://exemple.com/emplacement_sitemap.xml

Une autre option serait de soumettre le sitemap à Google en utilisant la console de recherche. Google a de nombreuses directives pour la publication d’images, qui peuvent aider votre site à se classer plus haut dans les SERP. De plus, vous pouvez utiliser les sitemaps de Google pour donner plus d’informations à Google sur les images de votre site, ce qui peut aider le moteur de recherche à trouver plus d’images sur votre site qu’il ne le ferait seul.

En tant que vendeur sur Shopify, vous obtiendrez un sitemap généré automatiquement qui inclut vos images de produit. Cela signifie que les images de vos pages produits, ainsi que toutes les autres images importantes utilisées dans votre blog ou vos collections, peuvent être indexées par les moteurs de recherche via votre sitemap. Cela augmente les chances que vos images SEO apparaissent dans les résultats de recherche et génèrent plus de trafic vers votre site.

Shopify met à jour automatiquement le sitemap chaque fois que de nouvelles pages ou produits sont ajoutés, ou que des éléments existants sont supprimés. Vous n’avez donc jamais besoin de créer ou de mettre à jour votre sitemap manuellement.

7. Utilisez un bon réseau de diffusion de contenu d’images (CDN)

Les CDN d’images spécialisés offrent des fonctionnalités de transformation d’images afin que vous n’ayez à soumettre qu’une seule image de haute qualité : ils la redimensionneront, la reformateront et mettront en cache en fonction de chaque demande. Avec le CDN d’images de Shopify, la taille du fichier est automatiquement optimisée lorsque vous téléchargez votre image. Le changement de qualité de fichier n’est pas perceptible à l’œil humain mais améliorera le temps de chargement de la page. Le CDN détecte également automatiquement quels formats de fichiers sont pris en charge côté client et offre un montage dynamique, ce qui vous permet de recadrer et de transformer votre image sans perdre le fichier original.

8. Testez vos images

L’objectif de l’optimisation des images SEO est de contribuer à augmenter votre chiffre d’affaires. Nous avons parlé de la réduction des tailles de fichiers et de l’indexation de vos images par les moteurs de recherche, mais qu’en est-il des tests d’images pour voir ce qui convertit le plus de clients ?

• Testez le nombre d’images de produit par page. Puisque les temps de chargement sont un problème pour certains sites e-commerce non hébergés, vous pourriez constater que réduire le nombre d’images sur une page augmentera les taux de clics et les ventes. Il est également possible que fournir beaucoup d’images par page améliore l’expérience utilisateur et entraîne plus de ventes. La seule façon de le découvrir est de le tester.
• Testez quels angles vos clients préfèrent. Vous pourriez constater une augmentation de la fidélité des clients en fournissant les angles de vue que vos clients souhaitent voir. Un bon moyen de le découvrir est de sonder vos clients sur ce qu’ils ont le plus aimé en voyant vos photos de produit. S’enquérir et parler à vos clients est une excellente habitude à adopter en général. Cependant, confirmez vos conclusions grâce à des tests.
• Testez combien de listings de produits vous devriez avoir sur les pages de catégorie. Vaut-il mieux montrer 10, 20 ou 100 produits ? Testez le nombre de produits que vous listez sur les pages de catégorie pour voir ce qui fonctionne le mieux pour vos clients.

Outils d’optimisation des images SEO

Maintenant que vous connaissez certaines des meilleures pratiques d’optimisation des images pour le référencement, examinons quelques outils et plug-ins d’optimisation des images SEO que vous pouvez utiliser pour votre site.

Notez que si vous êtes sur Shopify ou utilisez un CDN d’images spécialisé, vous n’avez pas besoin d’utiliser ces outils. La seule exception est SVGOMG : la plupart des CDN d’images ne proposent pas d’optimisations pour les SVG.

Squoosh

Squoosh est une application web facile à utiliser pour la compression d’images. Il suffit de glisser-déposer votre image dans l’outil et de choisir parmi des formats d’image optimisés comme JPEG XL, WEBP, PNG, et plus encore.

TinyPNG

TinyPNG est un autre outil d’optimisation d’images populaire sur le web. Il utilise des techniques de compression avec perte intelligentes pour réduire la taille des fichiers d’image de votre page web aux formats WEBP, JPEG et PNG.

Vous pouvez réduire la taille des images pour vos applications ou votre boutique. Vous pouvez aussi compresser des images animées. Cet outil ne se concentre pas uniquement sur la compression d’image, il propose également une API et des outils pour développeurs afin d’intégrer TinyPNG dans des solutions logicielles personnalisées.

L’API de TinyPNG redimensionne automatiquement les images pour les vignettes, en supprimant les parties inutiles et en ajoutant plus d’arrière-plan si besoin. Si vous gérez votre site sur WordPress, c’est un plug-in indispensable.

SVGOMG

SVGOMG est un autre outil d’optimisation d’images simple d’utilisation. Il offre plusieurs options pour nettoyer et minimiser vos fichiers SVG. Il suffit de télécharger ou de copier la source de votre SVG pour commencer. Vous pouvez jouer avec les différents contrôles et créer une image identique à l’originale, mais plus légère.

Gardez vos photos fonctionnelles avec l’optimisation des images SEO

Optimiser vos images SEO est essentiel pour gérer une entreprise en ligne réussie. Cela améliore non seulement l’apparence de vos produits, mais contribue également à créer une expérience d’achat fluide et à vous rendre visible en ligne.

Une plateforme e-commerce comme Shopify propose automatiquement vos images dans le meilleur format possible pour les utilisateurs, vous permettant ainsi d’augmenter vos ventes et de développer votre entreprise en ligne.

FAQ sur l’optimisation des images SEO

Comment optimiser une image sans perdre en qualité ?

La meilleure façon d’optimiser une image sans perdre en qualité est d’adapter ses dimensions et son format de fichier suivant les situations. Vous pouvez utiliser des outils manuels comme ceux listés dans cet article pour générer vos fichiers, tout en écrivant le bon HTML pour que le navigateur les affiche. Sinon, utilisez un CDN d’images spécialisé comme celui de Shopify pour convertir automatiquement des images de haute qualité et les afficher sur n’importe quel appareil.

Quel est le meilleur optimiseur d’images ?

Squoosh et TinyPNG sont parmi les meilleurs outils d’optimisation d’images disponibles. Ce sont tous deux des outils en ligne qui offrent une gamme d’options de formats, comme les images JPG et PNG. Si vous avez un fichier SVG plus complexe, utilisez SVGOMG pour le compresser.

Dois-je optimiser mes images sur Shopify ?

Vous n’avez pas besoin d’optimiser les images SEO avant de les mettre en ligne sur Shopify. Si vous le faites, cela peut parfois entraîner une image de mauvaise qualité qui conduit à des conversions plus faibles et à davantage de retours. Le CDN de Shopify compresse automatiquement les images à un réglage de qualité optimisé pour l’e-commerce. Le code de votre thème doit écrit en utilisant les balises Liquid image_url et image_tag pour tirer automatiquement parti de nombreuses fonctionnalités d’images responsive.