Table des matières

SEO : Comment optimiser parfaitement les images web pour votre référencement naturel ?

Comment optimiser les images de vos pages web au service de votre référencement naturel ? Si vous espérez générer du trafic et réaliser de bonnes performances sur la grande toile, décorer votre site internet avec de belles photos et illustrations ne suffit pas.

Chaque image doit être choisie, formatée, paramétrée et utilisée dans le respect des meilleures pratiques SEO en la matière pour vous aider à marquer de précieux et nombreux points en référencement naturel.

Savez-vous comment vous y prendre ? Connaissez-vous les meilleures pratiques graphiques et visuelles du web professionnel ? À la fin de ce guide détaillé et complet, l’optimisation SEO de vos images web n’aura plus de secret pour vous !

Comment optimiser les informations associées à chaque image web ?

Comment optimiser le titre et la légende de votre image web ?

Commençons par le plus facile : les informations associées à chaque image. La bonne pratique en SEO consiste à renseigner tous les champs et fournir toutes les renseignements que peut contenir chaque image de votre site web. Cela permet par la même occasion d’enrichir l’expérience de vos visiteurs.

Premièrement, le titre de votre image web correspond au texte qui s’affiche lorsque votre souris passe au-dessus. Bien qu’il ne soit pas pris en compte par le robot de Google et n’influe pas directement sur votre référencement, prenez soin de le renseigner.

Deuxièmement, la légende de votre image pour le web est le texte explicatif qui apparaît au-dessus ou en-dessous de votre photo, comme son nom l’indique. Cette fois, les quelques mots indiqués sont indexés par le robot de Google lors de l’exploration de votre page.

Profitez-en pour employer vos mots-clés principaux ou le champ lexical correspondant dans ce champ de texte, afin de marquer des points SEO grâce à ce simple détail. En supposant que votre site web contienne de nombreuses pages et que chacune contienne une ou plusieurs illustrations, expliciter la légende à chaque fois que vous le pouvez représente une opportunité supplémentaire et non-négligeable de placer vos mots-clefs.

Comment optimiser l’attribut « alt » de votre image web ?

En HTML, l’attribut « alt » d’une image indique ce qu’elle contient, ce qu’elle illustre. En particulier, l’attribut « alt » permet au Googlebot de savoir quel est le contenu d’une image et de la référencer parmi les milliards d’images du web. Remplir le champ « alt » de chacune de vos images web est donc absolument indispensable en matière de SEO, car c’est l’occasion d’y placer vos mots-clés.

En choisissant des images correspondant aux mots-clés de chaque page web et en utilisant le champ « alt », vous renforcez votre référencement naturel dans Google et dans Google Images. D’autre part, pensez aux personnes malvoyantes qui visitent votre site web à l’aide. Le contenu du champ « alt » est automatiquement lu à haute voix par leur navigateur afin de leur indiquer ce que représente vos images, au-delà du contenu rédactionnel.

Aussi, en cas de problème de chargement de vos images, la balise « alt » permet d’afficher alternativement les mots décrivant le contenu des images qui auraient dû être affichées. Pour toutes ces raisons, saisir systématiquement les mots-clés correspondant à chaque illustration doit être pour vous un automatisme.

Comment optimiser le nom de fichier de chaque image web ?

De la même manière que le titre ou la légende, il est recommandé de nommer le fichier de chaque image à publier sur votre site web en utilisant les mots-clés pertinents pour chaque page de votre site internet.

Le robot de Google tient compte de ces mots dans son exploration de vos pages web, ce qui signifie que des noms de fichiers intelligemment formulés pour vos images contribue à l’optimisation de votre référencement naturel, de la plus évidente des manières.

Cette bonne pratique vous aide également à ranger et retrouver plus facilement vos fichiers, surtout si les pages et les photos se multiplient sur votre site web. Aussi, inutile de rappeler que des mots-clés ou du contenu correspondant à votre champ sémantique sont préférables à des numéros pour identifier vos images.

Comment optimiser le temps de chargement d’une image web ?

Si vous voulez gagner en référencement naturel tout en fluidifiant l’expérience utilisateur de votre audience cible sur internet, l’un des problèmes principaux à traiter est celui du temps de chargement de vos images, et donc de vos pages web.

Pour cela, un travail préparatoire doit être effectué pour calibrer correctement le format, les dimensions et la résolution de vos photos et illustrations. Afin d’offrir à vos internautes la meilleure expérience utilisateur possible, vous devez viser le meilleur équilibre entre la qualité visuelle d’une image à l’affichage et le temps de chargement de la page web qui la contient.

Quelles sont les mauvaises pratiques SEO à éviter en matière de chargement de vos images web ?

Proposer les images de la plus haute résolution et aux plus grandes dimensions n’est pas du tout une bonne pratique SEO ! Cela peut être tentant pour quiconque part de la bonne intention de fournir à ses visiteurs les plus belles images possibles, même sur grand écran. Pourtant, cela engendre de lourdes pertes en temps de chargement d’une page, ce qui est l’un des critères majeurs du référencement naturel par les moteurs de recherche.

N’oublions pas que la navigation mobile est en train de prendre le dessus sur la l’ordinateur de bureau et son écran de 20 pouces. Inutile, donc, de publier une photo de plus de 2000 pixels de longueur sur la version mobile de votre page web ! En matière de SEO, un temps de chargement réduit prime sur la résolution d’une image.

Une autre erreur commune rencontrée sur internet, y compris sur des sites de grandes enseignes, consiste à charger des images volumineuses et ajouter des lignes de code pour demander au navigateur de vos visiteurs de les redimensionner. En d’autres termes, cela revient à perdre en temps de chargement de manière inutile et évitable.

Pire, selon le code employé en CSS pour redimensionner les images, il est possible qu’une photo en haute résolution produise un rendu visuel de moins bonne qualité qu’une image pré-formatée bien moins volumineuse.

La bonne pratique SEO est beaucoup plus simple et efficace. Pré-formatez vos images pour le web et pour la navigation mobile, afin que celles-ci soient directement chargées dans le bon format et aux bonnes dimensions une bonne fois pour toutes lorsque les internautes chargent vos pages web sur leur navigateur.

Comment optimiser le format de vos images web ?

Afin de réduire au maximum le temps de chargement de vos pages web, il est capital de choisir le bon format pour vos images. Sachez notamment qu’une photo est bien plus volumineuse en PNG qu’en JPEG optimisé. Surtout, privilégiez le format compressé pour internet WebP, ainsi que le format WebM pour la vidéo.

PNG, BMP, SVG ou JPEG ?

Plus précisément, le format PNG propose une haute qualité de résolution d’image et aucune perte à la compression. En 24 bits, le PNG convient pour de la photographie ou des images contenant du texte, afin de conserver toute la qualité des traits, des nuances de couleurs et d’éviter un effet flou en cas de redimensionnement. Néanmoins, le PNG n’est pas optimal en matière de temps de chargement.

Pour votre logo ou des formes géométriques, le format SVG est très intéressant, surtout pour des images de petite taille. En produisant une image de manière vectorielle et non par pixels, le SVG ne perd jamais en netteté des traits malgré un zoom maximal (sur des formes géométriques). En revanche, l’image doit être produite en vecteurs dès le départ, comme savent le faire les graphistes. Quant au format BMP, très lourd et utilisé pour le traitement d’image, il est tout simplement à éviter pour vos pages web.

Le format JPEG, le plus répandu sur la grande toile, rencontre un tel succès depuis des années parce qu’il propose des images beaucoup moins volumineuses et donc moins gourmandes en temps de chargement que d’autres formats. Malgré une moindre qualité de résolution par rapport à du PNG, la différence n’est pas perceptible à l’œil nu, ce qui explique l’avantage du JEPG pour les images web. Par contre, pour un logo ou des formes géométriques aiguisées, le JPEG est moins performant que le SVG, surtout lorsque l’internaute zoome.

Qu’est-ce que le format WebP ?

Très prometteur, le format d’image WebP a été développé par Google pour répondre aux exigences modernes du web. Vous pouvez utiliser le logiciel WebPconv et miser sur le format WebP pour illustrer votre site web avec des images à la fois légères, d’excellente qualité et polyvalentes, selon vos besoins. En particulier, les images en WebP peuvent conserver la transparence et être compressées sans ou avec perte. À l’avenir, Google ambitionne de voir le WebP détrôner le JPEG.

Ceci dit, sachez qu’aujourd’hui, le WebP n’est pas encore universellement reconnu par tous les navigateurs, mais peut tout de même être lu sur les écrans des ¾ des internautes du monde entier. Le WebP sera certainement un format universel d’image web très bientôt. En le comparant aux autres formats déclinés dans toutes les formes d’utilisation (logo, photo, etc.), il remporte le prix des meilleures performances en moyenne en matière de poids des images et de qualité du rendu visuel.

Par ailleurs, la non-reconnaissance du WebP par certaines versions de certains navigateurs peut être contournée en proposant une version alternative de votre image dans un format universel grâce à la balise HTML <source> et son attribut « type », de la manière suivante :

Comment optimiser les dimensions et la résolution d’une image web ?

Avant tout, n’oublions pas que les résolutions des écrans de vos visiteurs peuvent être très variables. Comment savoir quelle résolution convient le mieux à votre audience cible ? En utilisant Google Analytics, vous avez accès à un rapport spécifique sur les résolutions d’écrans de vos visiteurs. Grâce à ces informations, vous pouvez ensuite pré-dimensionner vos images en fonction des largeurs et résolutions d’écrans les plus courantes dans votre audience cible. Des balises et attributs HTML sont mêmes prévus à cet effet.

Comment utiliser « source media » et « srcset » en HTML pour vos images web ?

En HTML, vous avez la possibilité d’utiliser la balise <source media> et l’attribut « srcset » afin de proposer aux navigateurs de vos internautes différentes images pré-dimensionnées en fonction de la résolution d’écran ou largeur d’écran détectée. Voici comment utiliser cet attribut HTML :

Dans cet exemple, vous proposez plusieurs choix au navigateur de chaque internaute : une image de 800 pixels, une image de 400 pixels et une image par défaut. Selon la largeur et la résolution d’écran détectées, le navigateur choisit de charger l’image la plus adaptée. D’autre part, la dimension finale d’affichage de l’image est calculée automatiquement par rapport à la largeur du « viewport » en utilisant l’attribut « style=”width:auto;” ».

De cette manière, avec ces différents attributs et images pré-dimensionnées, vous gagnez beaucoup en temps de chargement et en qualité d’affichage, en tenant compte des différences de taille d’écran et de résolution. En conséquence, en respectant cette bonne pratique SEO pour chaque image de votre site web, vous marquez de précieux points en référencement naturel, en soignant l’expérience utilisateur de vos visiteurs avec des images propres et nettes.

Faut-il optimiser le mode de chargement de vos images web ?

La manière de charger vos images dans le navigateur de vos visiteurs a une influence directe sur le temps de chargement de celles-ci, et donc sur votre référencement. Dans cette perspective, vous avez la possibilité de différer le chargement des images de votre page web.

Cependant, en procédant à une telle manœuvre, vous devez avant tout vous assurer du fait que le Googlebot reconnaisse vos images. Par exemple, le « lazy loading », consistant à charger une image au moment où l’internaute scrolle ou clique sur une zone définie de la page visitée, n’est pas pris en compte par le robot de Google, qui n’indexera pas vos images dans ce cas. À moins de maîtriser certains paramétrages avancés du lazy loading, il n’est donc pas recommandé de recourir à cette technique pour des raisons de SEO.

Le lazy loading fonctionnera sur les écrans de vos internautes et réduira le temps de chargement de vos pages web, mais Google ne référencera pas vos images et considérera vos pages comme non-illustrées. En revanche, vous pouvez employer un peu de CSS et de Javascript pour reporter le chargement de vos images. Lors de la première implémentation de la page par le navigateur côté client, « réservez » l’espace requis par vos images et lorsque le signal indiquant que la page est « prête » est émis, appelez le chargement de vos images.

Ceci dit, le report de chargement des images à des fins de réduction du temps de chargement de vos pages web n’est réellement pertinent que si les photos et illustrations sont très volumineuses sur votre site web. Dans le cas contraire, une optimisation des images telle que nous l’avons vue lors des points précédents est suffisante. Quoi qu’il en soit, si vous ne maîtrisez pas les techniques de report de chargement, ne les utilisez surtout pas, au regard du risque de perdre l’indexation de vos images par le Google Bot.

Pourquoi et comment utiliser la sitemap pour images de Google ?

Et oui ! Voici la cerise sur le gâteau parmi les astuces pour booster votre SEO grâce à une bonne utilisation de vos images web. Google vous permet de créer une sitemap pour répertorier les images de votre site web, ou de les identifier dans votre sitemap existante, de la manière suivante :

<?xml version=”1.0″ encoding=”UTF-8″?>
<urlset xmlns=”http://www.sitemaps.org/schemas/sitemap/0.9″
xmlns:image=”http://www.google.com/schemas/sitemap-image/1.1″>
<url>
<loc>http://votresite.com/votrepage.html</loc>
<image:image>
<image:loc>http://votresite.com/nom-de-votre-image-un.jpg</image:loc>
<image:title>Titre de votre image 1</image:title>
<image:caption>Légende de votre image 1</image:caption>
</image:image>
<image:image>
<image:loc>http://votresite.com/nom-de-votre-image-deux.jpg</image:loc>
<image:title>Titre de votre image 2</image:title>
<image:caption>Légende de votre image 2</image:caption>
</image:image>
</url>
</urlset>

Grâce à ces balises de sitemap dédiées aux images web, vous vous assurez de la reconnaissance et de la prise en compte de toutes vos images par le robot de Google, ce qui est capital et peut vous sauver des erreurs telles qu’un mauvais paramétrage du lazy loading (qui rendrait vos images inexistantes aux yeux de Google). Par ailleurs, vos images seront beaucoup plus faciles à trouver sur Google Images !

La sitemap pour images est donc une excellente pratique SEO afin de gagner doublement en référencement naturel, dans Google et dans Google Images. Intéressant, n’est-ce pas ? En prenant soin de mettre en place ce bout de code, vous pouvez clairement faire la différence en SEO par rapport à vos concurrents, dont la plupart ne connaissent pas même l’existence du référencement des images dans leurs sitemaps.

Notez enfin que les balises facultatives <image:geo_location> et <image:license> vous offrent la possibilité de renseigner une géolocalisation et une URL de licence de droits pour chaque image.

Comment optimiser parfaitement les images pour votre référencement ?