Les images sont partie intégrante du message qu’un site web communique avec ses utilisateurs. Elles rendent le contenu plus intéressant et allègent la lecture, mais elles ont aussi un impact important sur le référencement naturel et la performance de votre site web. C’est pourquoi il est important de savoir comment les chercher, les nommer, les optimiser et les référencer.
Pour chaque site web que nous concevons, nous (ou le client) préparons les images. Voici donc notre liste des 5 étapes à suivre pour la préparation de vos images.
Étape 1 : Choisir vos images
Sur quoi baser le choix de vos photos? La pertinence. Les images servent d’abord et avant tout à accompagner vos paragraphes, elles doivent donc imager vos propos et/ou être au service du design de votre site web. Choisissez aussi en fonction du format: si l’emplacement de l’image est très étroit sur la largeur, il vaudra peut-être mieux choisir un format plus en mode portrait que paysage, par exemple. Il faut aussi s’assurer d’avoir des images de bonne qualité. Vous comprendrez qu’une photo prises avec votre flip phone en 2012, ce n’est pas l’idéal.
Ensuite, priorisez les photos personnalisées. Des images qui vous appartiennent et qui vous représentent sont beaucoup mieux. L’intégration de photos uniques est un gros plus pour la personnalité de votre site web (et l’intérêt des utilisateurs). Les stock photos c’est cool, mais on fait rapidement le tour et on les reconnaît de site en site. Si vous n’avez vraiment pas de photos à vous, alors on vous conseille d’aller fouiller sur Unsplash, un site web montréalais dédié au partage de photos libres de droits. Leur site web compte plus de 120 000 photographes contributeurs et dispose de plus de 1 million de photos. C’est très bien et ça dépanne. Sinon, faire affaire avec un photographe peut être très intéressant. On en connait des bons, si jamais! ????
Finalement, évitez les images avec du texte. La raison est simple, le texte sur une image est illisible par les moteurs de recherche, c’est donc un gros 0 pour le référencement naturel et en plus, ça crée souvent des problèmes en responsive. Bien sûr, il y a des exceptions et parfois les images avec du texte sont nécessaires au contenu d’un site web, mais règle générale, on évite ce type d’images.
Étape 2 : Formater vos images
Il existe plusieurs formats d’images et ils ont chacun leur spécialité.
Le format JPEG
C’est le format le plus commun et le plus optimisé. On s’en sert dans la majorité des cas, surtout pour les photos, que ce soit pour les photos de l’équipe comme les images de bannières, celles qui accompagnent le contenu, etc.
Le format PNG
C’est le format magique qui permet une qualité supérieure, mais surtout, qui supporte la transparence. On l’utilise surtout pour les logos et les animations. Pour les manipuler, il faut aller jouer dans Photoshop ou un logiciel semblable.
Le format SVG
C’est un format vectoriel, donc un format qui peut s’adapter à toutes les grandeurs sans jamais devenir pixelisé . On utilise souvent les SVG pour les icônes, car c’est adaptatif et la qualité du rendu est excellente. C’est un format qui se travaille sur Illustrator ou un logiciel compétitif.
La liste des formats est longue, mais si vous savez faire la différence entre ces trois formats, c’est une très bonne base pour formater vos images. Il est aussi intéressant de noter que le format WebP, mis sur pied par Google, est bien à la mode et que les développeurs web tendent à l’utiliser de plus en plus, en raison de ses performances en terme de compression des images.
Étape 3 : Optimiser vos images
Une fois sélectionnées et du bon format, comment optimiser vos images? Une grande partie de l’optimisation est gérée par le site web (s’il est bien construit), mais c’est quand même utile de savoir repérer les images non optimisées. Souvent, il est possible de repérer les images trop lourdes en fonction de leur temps de chargement. Si toutes les pages de votre site web se chargent en 0,5 seconde, mais que la page de votre dernier article de blogue prend 8 secondes à charger, il y a de fortes chances qu’elle contienne des images trop lourdes.
Un long temps de chargement ralentit non seulement la navigation sur votre site, mais offre une mauvaise expérience à vos utilisateurs et affecte du même coup votre référencement naturel. À l’inverse, il faut aussi s’assurer que vos photos soient d’assez bonne qualité pour le format généré sur votre page, sinon elles pourraient être étirées et floue, ce qui n’est pas mieux pour l’expérience utilisateur.
Étape 4 : Nommer vos images
Avant d’intégrer vos images à votre site, les titres de celles-ci doivent être pertinents. Règle d’or : ne jamais mettre d’accents, de caractères spéciaux, de majuscules et d’espaces à vos titres, car ce sont des éléments qui peuvent causer des problèmes, dépendamment de la configuration de votre serveur. Par exemple :
❌ Photo 001 de la crémaillière.jpg
✔️ machine-arcade-treize.jpg
En nommant vos images de la bonne manière, vous décrivez du contenu qui, sans cette étape, serait inexistant aux yeux des moteurs de recherche, puisque ceux-ci sont très limités dans leur analyse des images.
Étape 5 : Rédiger la balise Alt text
C’est facile pour nous, les humains, de regarder une photo et de comprendre ce que c’est, mais pour les moteurs de recherche, comme on le mentionnait ci-dessus, il est difficile de se faire une idée de ce que l’image contient. Il faut donc leur décrire ce qu’il y a sur la photo pour qu’ils répertorient l’image et c’est cette description qu’on appelle dans notre jargon, la balise Alt text (pour texte alternatif).
Votre 5e étape pour chaque image consiste à rédiger une description courte et précise de votre photo qui inclue des mots-clés en lien avec votre contenu. Si vous ne savez pas trop quoi écrire comme résumé, cet arbre décisionnel va vous aider.
En plus d’aider à l’accessibilité de votre site web, vous augmentez les chances que vos photos soient bien référencées par les robots. Vous récolterez aussi le fruit de votre travail dans les recherches Google Images. Combien de fois êtes-vous tombé sur un site web par l’entremise d’une photo que vous trouviez intéressante? Trop de fois pour ne pas écrire de balise Alt text à vos images.
–
Finalement, les images sont beaucoup plus importantes qu’on le pense et si elles ne sont pas bien choisies, formatées, optimisées et référencées, elles peuvent vous nuire. Bien gérer vos images prend un peu plus de votre temps, mais au final, vous en sortirez avec un site web qui offrira une bien meilleure expérience à vos utilisateurs en plus de grandement aider votre référencement naturel.
Maintenant que vous êtes un/une pro pour préparer les images de votre site web, je vous invite à découvrir pourquoi investir dans des photos pour votre site web.
