Référencement, accessibilité et ergonomie : 10 actions pour optimiser les images de votre site internet

Illustrer son site internet ou son blog à l'aide d'images est aujourd'hui presque indispensable. Pourtant, cela peut vite se retourner contre vous si les images que vous uploadez sur votre site ne sont pas ou mal optimisées pour le web.

Les risques :

• surcharger votre espace de stockage
• dégrader le temps de chargement de vos pages
• ne pas profiter du trafic que peut vous apporter la recherche d'images
• limiter ou empêcher l'affichage de votre site sur terminaux mobiles

Voici donc quelques conseils à mettre en œuvre pour optimiser l'utilisation de vos images à chaque étape.

Utiliser un format compatible avec le web

Certains formats sont plus lourds que d'autres, et moins adaptés au web. Veillez donc à employer uniquement ces extensions compatibles avec le web : jpeg, png ou gif dans le cas d'illustrations contenant un nombre limité de couleurs (un logo par exemple). Pour en savoir plus sur les formats d'images, consultez cet article consacré à l'optimisation des images pour le web.

Optimiser la taille des images

Pour éviter de ralentir inutilement le chargement de vos pages, pensez à retailler au préalable vos illustrations aux dimensions nécessaires, et à supprimer l'excès d'espace blanc (à remplacer par des marges en CSS). Cette action préalable aura le double avantage d'épargner de l'espace de stockage et de préserver la qualité de l'image. En effet, les images redimensionnées par le navigateur seront de moins bonnes qualités que si elles ont été retaillées par un logiciel de retouche.

Définissez également la hauteur et la largeur de cette image dans le code source dans le but de permettre au navigateur de commencer à afficher le contenu avant même que les visuels ne soient complètement chargés. Le fait d'indiquer ces dimensions permet donc d’accélérer le temps de chargement de la page. Un bon point pour vos visiteurs et pour Google !

Préserver leur qualité

Rien de plus frustrant que de retrouver une image floue ou pixelisée sur un site internet. Cela peut nuire grandement au professionnalisme de vos articles, même si ces derniers sont bien rédigés. Tout est question de compromis entre la lourdeur de l'image et son rendu et il n'est pas conseillé de privilégier l'un au détriment de l'autre. De plus, lors d'une recherche sur Google Images, l'internaute aura plus tendance à cliquer sur une belle image, vous fournissant ainsi un point d'entrée supplémentaire sur votre site.

Ne pas intégrer pas de texte dans les images

Il est aujourd'hui impensable d'utiliser une image à la place d'un texte, notamment lorsqu'il s'agit de titres. Vous y perdriez énormément en termes de visibilité et de référencement. Si vous souhaitez afficher du texte dans une police particulière, c'est aujourd'hui possible grâce aux nouvelles propriétés de CSS et aux Google fonts par exemple, plus besoin donc de recourir à ce type de procédés.

Contextualiser les visuels

Afin de garder une certaine cohérence entre les contenus textuel et visuels de votre page, utilisez des photos ou des illustrations en rapport avec votre texte. Hors de question d'employer une image sans aucun rapport avec l'article qu'il accompagne, vous transmettriez ainsi un signal confus, à la fois pour vos visiteurs et pour les moteurs de recherche.

Donner un nom pertinent à l'image

Cette action possède un double avantage : celui de vous permettre de vous y retrouver plus facilement dans votre bibliothèque de médias (surtout si celle-ci a préalablement été structurée à l'aide de sous-dossiers), mais surtout de renseigner les moteurs de recherche sur le contenu de cette image. Dans l'idéal, utilisez des mots clés descriptifs, séparés à l'aide de traits d'union (-) de préférence, ou d'underscores (_). Ne collez pas les mots les uns aux autres, les moteurs de recherches ont plus de mal à les déchiffrer. Enfin, si le moteur de recherche ne trouve aucun texte descriptif associé à l'image, c'est bien le nom de fichier qui sera utilisé en tant qu'aperçu pour les internautes.

Renseigner les attributs alt, title et longdesc pour le référencement et l'accessibilité

Cet attribut est particulièrement utilisé pour le référencement, puisque c'est lui qui va fournir à Google les informations nécessaires pour qu'il détermine quelles sont les images pertinentes à afficher lors d'une requête. Renseignez donc votre attribut alt à l'aide de 3 ou 4 mot-clés importants, ainsi que Google le préconise. Inutile de multipliez les mots-clés (plus d'une dizaine), votre site pourrait être considéré comme du spam.

Gardez aussi à l'esprit que les personnes souffrant d'un handicap visuel et utilisant un lecteur d'écran n'auront à leur disposition que l'information contenue dans cet attribut. Optimisez-le afin de leur permettre de comprendre le contenu de l'image.

Pour optimiser vos attributs alt, consultez cette vidéo de Matt Cutts :

Dans le cas où l'image que vous présentez sur votre site est significative et contient des informations primordiales, et dont la description sera supérieure à 10 mots, il peut être utile d'avoir recours à l'attribut longdesc. Cet attribut permet de créer un lien vers cette description, afin d'indiquer, aux lecteurs d'écran par exemple, où la récupérer.

Enfin, l'attribut Title permet quant à lui d'apporter une information supplémentaire à l'internaute : c'est ce message qui apparaît dans l'infobulle, lorsqu'il positionne son curseur sur la photo, ou qui sera lu par le logiciel d'un utilisateur malvoyant.

Utiliser les sitemaps pour images

Les sitemaps pour images permettent de fournir au moteur de recherche des informations supplémentaires concernant les images proposées sur votre site ou votre blog. Cela vous permettra d'indiquer à Google quelles sont les images les plus importantes, pour qu'il les mette en avant, ou encore celles qu'il n'est pas nécessaire d'indexer (des images génériques, souvent répétées, qui n'apportent aucune information essentielle par rapport au contenu de votre site). Il suffit dans ce cas de ne pas répertorier ces images dans votre sitemap. Grâce à elle, vous pourrez répertorier jusqu'à 1000 images par page, en indiquant pour chacune d'entre elles, à l'aide de balises, des informations supplémentaires telles que la légende de l'image ou son emplacement géographique. Une donnée fort utile quand on sait que les résultats de recherche sont toujours plus localisés.

Adapter automatiquement leur taille au format de l'écran de l'internaute

Le design responsif est en passe de devenir un véritable standard. Idéal pour rendre votre site consultable et ergonomique sur n'importe quel terminal, il implique non seulement d'adapter le design, mais aussi les tailles des images, à n'importe quel format d'écran. Il s'agit toujours d'un point technique délicat, dont nous vous parlerons plus en détail dans un prochain article.

Ne pas abuser des images

Enfin, s'il est indispensable d'illustrer son site internet ou son blog pour le rendre plus attractif, évitez cependant de multiplier à outrance leur utilisation. Cela alourdit les pages, ralentit votre site et énerve l'internaute qui aura l'impression que l'information est délayée de manière artificielle. De même, si vous souhaitez réutiliser une image, ne la ré-uploadez pas sur votre site, mais réutilisez-la depuis votre bibliothèque de médias.

Stéphanie M.