Les images qui habillent votre site web ont un fort impact sur la perception de votre marque. En coulisses, elles jouent un rôle tout aussi essentiel. La manière dont vous les intégrez dans votre CMS* influe sur le référencement et la vitesse de chargement de vos pages. Google se base ̶ entre autres ̶ sur ce critère pour proposer les pages les plus pertinentes dans les premières positions de son moteur de recherche. Car au-delà de trois secondes de chargement, un internaute sur deux les quitte. C’est dire à quel point tout le travail investi dans un site peut s’avérer contre-productif !
Ne passez pas à côté de ce formidable levier SEO*. Optimisez vos images grâce à quelques actions simples à mettre en place et comparez !
Objectif SEO 1 : améliorez la vitesse de votre site
Google recommande de ne pas dépasser trois secondes de chargement pour les pages. Notamment sur mobile, première source de trafic des sites. Or, les images comptent parmi les éléments qui pèsent le plus sur les pages. Plus la résolution* des images est importante, plus il y a de pixels, plus leur poids est important.
Sur quelle dimension se baser pour recadrer vos images ?
La plupart des CMS* recadrent les images. Pour autant, ne les téléchargez pas dans votre back-office avec une définition* au-delà de 1200 px de large, ni en deçà pour garantir leur qualité. Essayez de charger une image de la même taille que l’emplacement qui lui est réservé sur votre site, surtout si elle n’est pas affichable en grand.
Comment réduire le poids des images sans affecter leur qualité ?
Il existe de nombreux outils qui permettent de compresser les images de 60 à 80 % sans que cela se perçoive. La plateforme gratuite SQUOOSH dispose d’une option compression sans perte de qualité. L’objectif ? Un poids final de 100 ko et inférieur pour chaque fichier. Astuce : redimensionnez l’image en 1200 px avant de la charger dans SQUOOSH, la qualité de compression sera meilleure.
Quel est le format d’images le plus indiqué ?
SQUOOSH redimensionne également les images au format WebP. C’est le format d’image nouvelle génération jusqu’à cinq fois plus léger que JPEG. Bien qu’il ait les faveurs de Google en matière de SEO, le WebP est peu répandu. Lancé par Google dès 2010, il lui a fallu quelque temps avant d’être compatible avec les autres navigateurs, ce qui explique les réticences de départ.
Où mesurer le temps de chargement de votre site ?
La vitesse de chargement de votre site est un critère essentiel de référencement. Pour la mesurer, faites-le test avec PageSpeed Insight, accessible à tous via Google. Il analyse à la fois vos interfaces mobile et desktop. Vous serez donc en mesure de comparer les données SEO après avoir modifié le poids et le format de vos ressources visuelles.
Pour aller plus loin : la mise en cache et les Content Delivery Networks
Vous avez optimisé vos images, mais les améliorations ne sont pas suffisantes ?
Vérifiez que la mise en cache est activée. Cette solution permet de stocker, pendant une période définie, les éléments d’une page que le navigateur affiche lors d’une première visite. Elle évite à l'internaute de tout recharger lors de sa prochaine visite. Si ce n’est pas déjà configuré automatiquement dans votre CMS, pensez à vider le cache à chaque fois que vous mettez une page à jour. À défaut, les internautes ne pourront pas consulter les derniers changements. Autre option supplémentaire pour gagner en vitesse d’affichage : les Content Delivery Networks (CDN). Ce service va démultiplier l’hébergement de tes fichiers, dont les images, sur autant de serveurs que de pays. Le temps d’échange entre le navigateur et le serveur est réduit car ils se trouvent dans la même région. Dans ce cas, nous parlons de sites à portée internationale. Si votre marché est domestique et que votre serveur est localisé dans votre pays, le nécessaire est déjà fait. Peut-être faut-il juste augmenter la capacité de votre serveur en passant à une offre supérieure ?
Objectif SEO 2 : amplifier la portée de vos images
Saviez-vous que Google ne visualise pas les images ?
Le moteur de recherche fait appel à des robots chargés d’explorer les pages présentes sur la toile et de les répertorier dans son index. Le moment venu, Google propose les pages qui lui semblent les plus à même de répondre aux requêtes des internautes.
En adoptant quelques rituels sémantiques, vous pouvez faire en sorte que Google indexe vos images. Le bénéfice est double : vous améliorez leur visibilité dans les résultats de recherche et leur accessibilité auprès des personnes en situation de handicap.
Pourquoi c’est important de bien nommer vos fichiers images ?
Avec plus de 25 % de trafic organique sur Google, la recherche d’images est le deuxième usage de recherche des internautes sur Google. Prendre le temps de nommer un fichier image avec des mots clés de recherche, c’est démultiplier vos chances de visibilité sur Google, via l’entrée Images.
Les noms de fichiers doivent refléter à la fois le contenu de l'image et le contenu de la page dans laquelle elle se trouve pour de meilleurs résultats.
Mettez-vous à la place de votre prospect. Demandez-vous quels termes de recherche devraient le mener jusqu’à vous. Pour ce faire, cinq termes en bas de casse suffisent, exempts d’accents et de déterminants.
N’oubliez pas de séparer chacun d’eux par un trait d’union (tiret de la touche « 6 » du clavier et non « 8 » de l’underscore). Et de faire correspondre l’extension du nom de fichier avec le format utilisé.
Admettons que vous publiez une page de recettes de tarte aux pommes amandine sur le site du pâtissier Lenôtre. Le nom de fichier image SEO friendly pourrait ressembler à « recette-tarte-pommes-amandine-lenotre.webp »
Où faut-il positionner vos images sur une page web ?
Les pages structurées, organisées à la façon d’une table des matières, facilitent l’exploration et la compréhension de leur contenu. De même, les images mises en contexte sont mieux appréhendées par les robots d’indexation de Google. C’est pourquoi, il faut veiller à les encapsuler dans le corps du texte. En d’autres termes, ne placez pas vos images en header de page ou en bas de page, sans texte au-dessus ni en dessous.
Pourquoi faut-il décrire vos images dans votre CMS ?
Lors de l’intégration de vos images dans votre site, renseignez la balise alt. Ce texte alternatif décrit à Google ce qu’il se trame sur votre image. Le moteur de recherche en tiendra compte dans l’évaluation de la page. Si une image ne parvient pas à se charger, le navigateur présentera ce bref descriptif à la place de l'image.
De plus, les lecteurs d'écran annoncent le texte alternatif à la place de l’image. Ils aident les utilisateurs souffrant de déficiences visuelles à percevoir leur contenu et leur fonction au sein d’une page.
Comment renseigner les balises alt ?
Comme le nom de fichier, l’attribut alt contextualise le contenu de l'image. Il consiste en quelques mots excluant la casse et la ponctuation.
Inutile de répéter les informations déjà fournies dans le texte entourant l'image ou la légende photo qui est plus complète (balise title de l’image). Essayez plutôt d’apporter des informations complémentaires puisque les lecteurs d’écrans dictent les légendes et les balises.
Ne remplissez pas les attributs des images qui n’ont pas d’autre rôle que de décorer votre site. Vous éviterez aux lecteurs d’écrans de les décrire aux internautes concernés.
N'indiquez pas « image de », « photo de » ou « photo de » (un lecteur d'écran le dira déjà ) ni d’éléments qui n’apparaissent pas dans l’image.
Ajoutez des mots-clés, mais l’emplacement et le nom de votre entreprise UNIQUEMENT lorsque cela est pertinent pour l’image.
Enfin, écrivez un texte alternatif unique pour chaque image.
Quid des images graphiques et textuelles en matière d’accessibilité ?
Les balises alt apportent des informations essentielles pour décrypter vos images. Or, avant même de concevoir votre design, vous pouvez adopter le réflexe « accessibilité ».
Selon l’OMS, 253 millions de personnes présentent un handicap visuel dans le monde. 237 millions d'entre elles sont concernées par d'une affection modérée à sévère et 36 millions souffrent de cécité ou quasi cécité. Une approche inclusive peut nettement améliorer le confort de lecture des internautes. Et jouer positivement sur votre référencement. Comment élaborer vos graphiques et vos images textuelles ? Choisissez soigneusement vos combinaisons de couleurs. Aidez-vous de l’extension Google Chrome lighthouse ou des nombreux d’outils gratuits en ligne en conformité avec la norme WCAG 2 AA. Elle vise à garantir un contraste de couleurs de 4,5:1 pour un texte de 14 points et moins (19 pixels CSS) et de 3:1 pour un texte de 18 points (24 pixels CSS) et plus.
Comment mesurer vos efforts en matière d’indexation ?
La Google Search Console est le service de prédilection pour suivre les résultats de votre site sur le moteur de recherche.
Rendez-vous dans l’onglet « Performances », type de recherche « Image ».
Puis comparez les positions de vos images dans la recherche au fil de vos actions correctives.
Pour aller plus loin : faut-il créer un fichier sitemap pour images ?
Si la recherche par images est primordiale dans le cadre de votre activité, il peut être intéressant de créer un sitemap pour vos images. C’est valable pour les sites marchands qui vendent des produits et services. Un fichier sitemap images liste les visuels que vous souhaitez faire indexer par Google. De nombreux outils proposent de générer ce type de fichier, avec des formules gratuites ou payantes selon le nombre d’images à traiter. Adressez-le à Google afin de faire indexer vos visuels dans la recherche d’images.
GLOSSAIRE
*CMS
C’est l’acronyme de Content Management System. En d’autres termes, un logiciel de gestion de contenus web grâce auquel on peut créer et personnaliser un site sans avoir recours à du développement web. Le plus connu est Wordpress.
*SEO
*Définition d’une image
*Résolution d’une image
Vous êtes arrivés jusqu'à la fin de cet article, vous êtes motivés ! Vous aimeriez que l'on creuse la question ensemble ?