Soigner le référencement des images de son site

IMG_4087.jpg, plusieurs mégaoctets, aucune description : c'est ainsi que beaucoup de photos arrivent sur les sites de commerces, directement depuis le téléphone. Pour Google, une telle image reste muette, et sur le mobile d'un client, elle ralentit tout l'affichage. Le référencement des images repose pourtant sur trois gestes simples à répéter pour chaque photo : nommer, compresser, décrire.

Ce que Google comprend d'une image

Google sait reconnaître une partie du contenu d'une photo, mais il s'appuie largement sur ce qui l'entoure : le nom du fichier, le texte alternatif, la légende et le texte de la page. Une photo de tarte aux fraises placée sur la page « Pâtisseries » d'une boulangerie, bien nommée et bien décrite, envoie des signaux cohérents.

Des images bien préparées vous servent sur trois terrains :

dans Google Images, où des clients cherchent un plat, un bouquet ou une coiffure avant de choisir un professionnel ;
dans les résultats classiques, où une page qui s'affiche vite retient mieux le visiteur venu de Google ;
auprès des personnes malvoyantes, qui naviguent avec un lecteur d'écran, un logiciel qui lit la page à voix haute.

Nommer : un fichier qui dit ce qu'il montre

Renommez chaque photo avant de l'envoyer sur votre site. Le nom du fichier fait partie des indices que Google utilise, et le changer ne prend que quelques secondes. Entre « IMG_4087.jpg » et « tarte-fraises-pistache.jpg », seul le second dit déjà ce que montre l'image.

Écrivez en minuscules, avec des tirets entre les mots.
Supprimez les accents, les espaces et les caractères spéciaux, qui se transforment en codes illisibles dans l'adresse de l'image.
Limitez-vous à quelques mots qui décrivent le sujet, sans ajouter le nom de votre ville à chaque fichier.
Donnez un nom différent à chaque image, même pour deux vues du même produit : « vase-gres-bleu-face.jpg » et « vase-gres-bleu-detail.jpg ».

Décrire : le texte alternatif

À quoi il sert

Le texte alternatif, souvent appelé « attribut alt », est une courte description associée à l'image dans le code de la page. Les lecteurs d'écran le lisent, le navigateur l'affiche quand l'image ne se charge pas, et Google s'en sert pour comprendre le sujet de la photo. La plupart des outils de création de site proposent un champ prévu pour le saisir.

Comment l'écrire

Décrivez en une phrase courte ce que voit une personne qui regarde la photo, avec les mots qu'emploierait un client. Tenez compte du contexte : sur la page d'un restaurant, « Tartare de bœuf au couteau, frites maison et salade » renseigne bien mieux que « plat du jour ».

À éviter : « image », « photo1 », ou une suite de mots-clés comme « restaurant Lyon meilleur restaurant Lyon pas cher ».
À préférer : « Salle du restaurant avec banquettes en velours vert et grandes fenêtres sur la place ».

Les images purement décoratives, comme un motif de fond ou un trait de séparation, n'ont pas besoin de description : un texte alternatif vide indique aux lecteurs d'écran qu'ils peuvent les ignorer. Les autres règles qui rendent un site utilisable par tous sont réunies dans le guide de l'accessibilité numérique.

Compresser et alléger l'affichage

Des images trop lourdes figurent parmi les causes de lenteur les plus courantes, comme l'explique l'article sur la vitesse du site et les Core Web Vitals. Quatre réglages permettent d'alléger vos pages sans perte visible.

Le format

JPEG reste le format classique des photos.
PNG convient aux images avec transparence, mais pèse lourd pour une photo.
WebP et AVIF, plus récents, produisent des fichiers nettement plus légers à qualité comparable. Les navigateurs actuels les affichent, et certains outils de création de site convertissent vos images automatiquement.

Les dimensions

Une photo de téléphone mesure souvent 4 000 pixels de large, alors qu'elle s'affiche dans un bloc de quelques centaines de pixels. Redimensionnez-la à sa taille d'affichage, en prévoyant environ le double pour les écrans haute définition. Pour une grande image en pleine largeur, 2 000 pixels de large suffisent en général.

Le poids

La compression supprime les informations que l'œil ne remarque pas. Un logiciel de retouche, un compresseur en ligne gratuit ou une extension de votre outil de création de site font l'affaire. Baissez la qualité par paliers, comparez l'image avant et après à taille réelle, et arrêtez-vous dès que des défauts apparaissent. Une grande photo bien compressée pèse le plus souvent quelques centaines de kilo-octets.

Le chargement différé

Ce réglage, souvent appelé « lazy loading », consiste à ne charger une image qu'au moment où le visiteur s'en approche en faisant défiler la page. Réservez-le aux images situées plus bas : la grande photo d'accueil doit au contraire arriver en premier.

Vérifiez aussi que la largeur et la hauteur de chaque image sont indiquées dans le code, ce que font la plupart des outils récents. Le navigateur réserve alors sa place, et le texte ne saute plus pendant le chargement.

Vos propres photos plutôt que des images de banque

La même photo de serveur souriant ou de croissant doré, achetée sur une banque d'images, se retrouve sur de nombreux sites. Elle ne montre ni votre salle, ni vos produits, ni votre équipe, et n'apprend rien à Google sur votre établissement. Une photo prise chez vous peut au contraire apparaître dans Google Images sur des recherches liées à votre activité.

Un téléphone récent et une bonne lumière suffisent la plupart du temps : les conseils pour réussir les photos de plats valent aussi pour une boutique ou un atelier. Vérifiez enfin les droits : une image trouvée sur internet n'est pas libre d'utilisation par défaut, et une personne reconnaissable sur une photo doit avoir donné son accord.

Par où commencer

Repérez les dix images de vos pages les plus visitées et notez leur nom, leur poids et leurs dimensions.
Renommez-les, redimensionnez-les et convertissez-les en WebP si votre site l'accepte, puis remplacez les anciennes versions.
Rédigez pour chacune un texte alternatif d'une phrase qui décrit vraiment la photo.
Si vos photos datent ou manquent, prévoyez une séance professionnelle : notre agence la propose à 300 € HT, détail sur la page des tarifs.