Améliorez le positionnement de votre site web grâce aux images : les bonnes pratiques.

Comment optimiser les images et leur intégration dans votre site web ? Temps de chargement, poids, taille, découvrez les bonnes pratiques à travers un exemple concret : Vicomte Arthur.

Votre entreprise dispose d’un site internet et vous souhaitez en améliorer le positionnement sur Google, Google Images et les autres moteurs de recherche ? L’optimisation du temps de chargement de son site, qui est un des nombreux facteurs de positionnement de Google, passe notamment par l’optimisation du poids et de la taille des images ajoutées sur son site internet.

Dans cet article nous allons vous présenter comment concrètement optimiser ces éléments et plus largement les images et leur intégration dans un site en prenant l’exemple concret de Vicomte Arthur, une PME qui dispose de boutiques et d’un site e-commerce pour vendre en ligne.

Bien optimiser ses images pour le web : quelques pistes et points clés

• Bien renommer ses images : Google favorise les images correctement nommées dans les résultats de recherche Google Images.
• Optimiser les dimensions des images : il est généralement recommandé d’intégrer des images de grande taille sur son site mais il faut faire attention à ce que leur poids reste le plus faible possible et que les dimensions restent raisonnables (inutile d’intégrer une image de plus de 3000 pixels de large sur un site web par exemple).
• Optimiser le poids et le format de ses images : pour optimiser le poids des images, une fois ces dernières bien redimensionnées, il existe des outils en ligne capables de compresser jusqu’à 20 images à la fois, c’est notamment le cas de TinyPNG qui compresse à la fois des images .png ou .jpg.
• Optimiser l’attribut alt de la balise img : l’attribut alt des images est utilisé par les moteurs de recherche pour comprendre les images, il est donc important de le renseigner avec une courte description de l’image. Cet attribut est également utile pour les malvoyants qui peuvent se voir décrire à l’oral les images intégrées sur les sites web via des logiciels de TTS (Text To Speech).
• Optimiser le texte autour des images : le context dans lequel une image est intégrée est indispensable pour que les moteurs de recherche puissent comprendre de quoi il s’agit, il est donc recommandé d’ajouter une légende à chaque image intégrée dans un contenu et de soigner le texte situé autour de cette dernière.
• Optimiser l’intégration HTML des images : il est recommandé d’intégrer les images dans un site via la balise html img et de préciser les attributs width et height afin d’informer le moteur de recherche dans quels dimensions s’affiche l’image.

Cas concret : comment Vicomte Arthur optimise ses images pour le web et quels axes pourraient permettre une meilleure optimisation

Vicomte Arthur est une marque Française de prêt à porter haut de gamme. Disposant des quelques boutiques en France, l’entreprise est aussi présente sur internet avec une boutique en ligne.

Comment Vicomte Arthur optimise actuellement ses images pour le web ? Qu’optimisent-ils déjà bien et que pourraient-ils améliorer ?
Décryptage d’une page de catégorie.

Exemple d’une catégorie de produits sur le site internet de Vicomte Arthur.

Ce qui est déjà bien optimisé :

• Vicomte Arthur renomme bien ses fichiers images avant de les intégrer sur son site web.

• Le poids des images est globalement bien optimisé dans les catégories avec un poids qui dépasse très rarement les 100 Ko et est souvent proche des 80 Ko.

Ce qui pourrait être amélioré :

• Les balises alt des images indiquent des références produit incompréhensibles pour les personnes aveugles et Google : il serait préférable de décrire le type de vêtement et sa couleur par exemple.

• La balise title de l’image intègre exactement la même référence que la balise alt : l’utilisation de la balise title n’est pas indispensable pour optimiser le référencement. Il est par ailleurs inutile de mettre une référence dans cette dernière qui s’affichera au survol de la souris, ce qui, niveau expérience utilisateur, n’apporte pas grand-chose à l’internaute.

• Dans ses catégories de produits, les images chargées disposent de dimensions plus importantes que les images affichées : ex : pour une personne navigant sur un grand écran d’ordinateur (supérieur à 15 pouces), les images sont chargées en 900 x 800 pixels mais sont affichées en 440 x 391 pixels. Autrement dit, la taille chargée est quasi deux fois plus importante que la taille affichée à l’internaute. En chargeant directement les images en 440 x 391 pixels, Vicomte Arthur pourrait ainsi diviser par deux le poids actuel de ses images, ce qui participerait au chargement plus rapide de ses pages.

• Les attributs « width » et « height » ne sont pas renseignés dans la balise img (balise image) : il est recommandé d’indiquer dans le code HTML les dimensions des images intégrées.

• Actuellement, quand un internaute arrive sur la page, toutes les images sont chargées avant même que ce dernier n’ai scrollé : il est recommandé de mettre en place le lazy loading afin de charger les images au fur et à mesure du scroll de l’internaute.

S’il n’est pas toujours évident d’optimiser au mieux ses images pour le web et les moteurs de recherche, ces quelques bonnes pratiques permettent à n’importe quel site d’optimiser l’expérience utilisateur ainsi que les probabilités que ses images se retrouvent dans les résultats de recherche de Google.