Lorsque vous créez un site internet, vous ne pensez probablement pas à optimiser vos images. Les tags Titre et Meta sont sans doute les premières choses qui vous viennent à l'esprit, mais l'optimisation des images peut attirer davantage de visiteurs sur votre site. Optimiser correctement les images diminuera le chargement des pages, permettra aux internautes qui n'utilisent pas des navigateurs conventionnels, les screen readers (lecteurs d'écran pour les déficients visuels), de comprendre le contenu qu'ils ne peuvent pas voir, et apporter de nouveaux visiteurs grâce à la recherche d'images. Il existe plusieurs facteurs importants à considérer lorsqu'on optimise des images sur un site web.
Le Nom des Fichiers
Donner aux fichiers images un nom approprié aidera les moteurs de recherche à déterminer leur contenu, surtout pour la recherche d'images spécifique comme Google Images. Par exemple, nommer une image de papillon "papillon.jpg" est bien mieux que "1234.jpg".
La Taille et la Qualité des Images
L'importance de la taille et de la qualité d'un image pose souvent problème aux concepteurs. Une image de faible qualité se chargera plus vite, mais n'obtiendra pas un positionnement dans la recherche d'images et décrédibilisera votre site du côté visiteur. Une image de très belle qualité peut aider à améliorer son positionnement dans les recherches d'images et son rendu est superbe côté visiteur, mais ralentit le chargement de la page, ce qui est un problème pour les internautes qui ont des connections bas débit.
J'ai trouvé que le meilleur moyen de concilier les deux était d'avoir une miniature de faible qualité sur sa page web avec un lien permettant d'agrandir celle-ci vers l'image en qualité supérieure (et taille). Ce moyen vous permet d'accélerer le chargement de la page et les visiteurs qui souhaitent voir l'image en taille et qualité réelles peuvent cliquer sur la miniature, et les moteurs de recherche d'images ont une image de haute qualité à indexer (augmentant ainsi vos chances de bien vous positionner). Par exemple, sur un site e-commerce, il est intéressant de placer sous la description du produit plusieurs miniatures cliquables permettant d'accéder aux images de meilleure qualité, augmentant également ainsi les possibilités d'achat du produit.
La Description des Images
Toutes vos images devraient inclure une courte description de leur contenu. La balise "ALT" aide les robots d'indexation à comprendre ce que contient votre image, ce qui les aidera ensuite à mieux comprendre le contexte de votre page, ce qui permettra d'obtenir un trafic plus ciblé lors des recherches d'images. Cette balise aide également les lecteurs d'écran à décrire les images aux personnes visuellement déficientes, ce qui permettra d'améliorer leur expérience sur votre site.
Une image correctement formattée en HTML avec cette balise prend la forme suivante :
<img src="titre_image.gif" alt="description de l'image">
Texte et Légendes environnantes
Il est important que le texte environnant et les légendes des images reflètent le contenu des images. Selon la FAQ de Google :
"Pour déterminer le contenu graphique d'une image, Google analyse le texte de la page qui entoure l'image, le titre de l'image et de nombreux autres critères. Google applique également des algorithmes performants pour éliminer les doublons (images identiques) et pour garantir que les résultats portent sur les images de la plus haute qualité possible."
Eviter de Mettre du Texte dans vos Images
Il est parfois nécessaire de placer du texte dans une image, mais en général cela devrait être évité à tous prix. Une pratique commune est d'utiliser des images avec du texte dans les headers (bandeaux en haut de page) ou dans d'autres parties importantes d'une page, souvent à cause du fond de la page et des logos. Malgré que la balise ALT aide dans une certaine mesure, le mieux est d'avoir un texte lisible à la fois par les moteurs de recherche et les lecteurs d'écran.
Vous trouverez un exemple d'optimisation ici. Vous remarquerez que ces deux images semblent identiques, mais dans la seconde, "Titre de la Page" est un texte faisant partie du code HTML de la page. Quand Google vient et visite cette page, il est capable de lire que "Titre de la Page" fait partie du contenu de la page et pourra l'indexer.