Optimiser vos images pour le référencement : guide et astuces

Les images sont souvent ce qu’il y a de plus lourd sur une page web. Mal préparées, elles ralentissent le site, agacent les visiteurs sur mobile et pénalisent l’expérience que Google mesure. Bien préparées, elles rendent vos pages plus agréables, plus accessibles, et peuvent même vous amener des visiteurs via Google Images.

Bonne nouvelle : l’essentiel tient en quelques réflexes, applicables même si vous gérez votre site vous-même.

Pourquoi les images comptent pour le référencement

La vitesse d’affichage

Sur beaucoup de pages, la plus grande image visible à l’ouverture (photo d’en-tête, visuel produit) est l’élément que Google utilise pour mesurer le LCP, l’un des indicateurs des Core Web Vitals. Une photo de 4 Mo sortie de l’appareil photo suffit à rendre une page lente sur un smartphone. Pour aller plus loin sur la vitesse de chargement, voir ce guide dédié.

La compréhension par les moteurs

Google ne « voit » pas une image comme un humain. Il s’appuie sur le texte autour : l’attribut alt, le nom du fichier, la légende, le contenu de la page. Ses bonnes pratiques de SEO pour Google Images recommandent d’ailleurs de placer l’image près du texte qui s’y rapporte.

La visibilité dans Google Images

Pour un artisan (photos de réalisations), un commerce (produits) ou un restaurant (plats), Google Images est une source de visites à ne pas négliger.

1. Choisir le bon format

Google accepte les formats BMP, GIF, JPEG, PNG, WebP, SVG et AVIF. En pratique :

Selon le guide des formats d’image de web.dev, la prise en charge de WebP est excellente dans les navigateurs modernes, et AVIF, plus récent, est arrivé dans Chrome vers 2020, dans Firefox en 2021 et dans Safari en 2022. Selon l’annonce de WordPress 6.5, WordPress accepte les fichiers AVIF depuis cette version, à condition que le serveur le permette (à vérifier dans Outils › Santé du site › Infos › Gestion des médias), et « les images AVIF peuvent être jusqu’à 50 % plus petites que les JPEG pour une qualité d’image équivalente ».

2. Redimensionner, puis compresser

Deux étapes distinctes, souvent confondues :

1. Redimensionner : inutile d’envoyer une photo de 6 000 pixels de large si elle s’affiche sur 1 200 pixels. Exportez-la à la taille maximale d’affichage (ou un peu plus pour les écrans haute définition).
2. Compresser : réduire le poids du fichier sans perte visible. Des outils gratuits comme Squoosh (en ligne), TinyPNG ou ImageOptim (Mac) le font très bien.

Ordre de grandeur à viser : quelques centaines de kilo-octets au plus pour une grande photo d’en-tête, beaucoup moins pour une vignette.

3. Rédiger un attribut alt utile

Précision de vocabulaire d’abord : « texte alternatif » et « attribut alt » désignent la même chose. C’est le texte placé dans l’attribut alt de la balise <img>. Selon la documentation MDN de l’élément img, il « définit une description textuelle alternative pour l’image ». Il est lu par les lecteurs d’écran des personnes malvoyantes, affiché si l’image ne se charge pas, et utilisé par Google pour comprendre l’image.

Les règles :

• Décrire ce que montre l’image, dans son contexte : « Cuisine en chêne massif réalisée dans une maison à Troyes » plutôt que « cuisine » ou « image1 ».
• Ne pas bourrer de mots-clés : Google le déconseille explicitement, car cela nuit à l’expérience des utilisateurs.
• Rester bref : une phrase suffit.
• Laisser un alt vide (alt="") pour les images purement décoratives (motifs, séparateurs) : MDN précise que cela indique aux lecteurs d’écran que l’image n’est pas importante pour le contenu.

Les textes alternatifs restent votre travail : les extensions de compression ne les rédigent pas. Un assistant IA peut proposer un premier jet, mais relisez-le, car il ne connaît pas le contexte (le lieu du chantier, le nom du produit). C’est aussi une base de l’accessibilité web.

4. Nommer les fichiers clairement

Google recommande des noms de fichier descriptifs : escalier-bois-metal-troyes.webp plutôt que IMG00023.JPG. Utilisez des minuscules, des tirets entre les mots, sans accents ni espaces. Faites-le avant l’envoi sur le site : renommer après coup change l’URL de l’image.

5. Bien intégrer l’image dans la page

• Utiliser la balise <img> : Google indique qu’il n’indexe pas les images placées en arrière-plan CSS. Une photo importante (réalisation, produit) doit donc être une vraie balise image.
• Indiquer la largeur et la hauteur (width et height) : MDN explique que cela permet au navigateur de réserver la place de l’image avant son chargement et d’éviter que la page « saute » pendant l’affichage.
• Proposer plusieurs tailles avec srcset et sizes ou l’élément <picture>, pour que le smartphone télécharge une version plus petite que l’ordinateur. Les CMS récents le font automatiquement.
• Différer le chargement des images situées plus bas avec loading="lazy", mais pas celle visible à l’ouverture. L’article de web.dev sur le chargement différé est clair : ne chargez pas en différé les images visibles au chargement de la page, en particulier l’image LCP.

6. Les outils pour automatiser sous WordPress

Plusieurs extensions automatisent la partie technique. D’après leurs fiches sur WordPress.org :

• Imagify compresse les images, les convertit en WebP ou en AVIF et redimensionne les fichiers trop grands à l’envoi.
• Smush compresse, redimensionne et active le chargement différé dans sa version gratuite ; la conversion WebP et AVIF fait partie de la version payante.

Aucune des deux ne rédige vos textes alternatifs : leur rôle est le poids et le format, pas la description.

7. Sitemap d’images et métadonnées

• Sitemap d’images : Google explique dans sa documentation sur les sitemaps d’images qu’ils aident à signaler des images qu’il ne trouverait pas autrement, par exemple celles chargées en JavaScript. Seules les balises <image:image> et <image:loc> restent prises en charge ; les anciennes balises de titre et de légende ont été abandonnées en 2022. La plupart des extensions SEO l’intègrent au sitemap principal.
• Métadonnées de crédit et de licence : selon la documentation de Google sur les métadonnées d’image, Google Images peut afficher le créateur, le crédit et la licence d’une image, à partir de données structurées ou des métadonnées IPTC intégrées au fichier. Utile si vous êtes photographe ou si vos visuels sont souvent réutilisés.

Les erreurs à éviter

• Envoyer les photos directement depuis le téléphone, sans redimensionner.
• Mettre le même alt sur toutes les images, ou y aligner des mots-clés.
• Placer les photos importantes en image de fond CSS.
• Activer le chargement différé sur l’image d’en-tête.
• Utiliser du PNG pour des photos : ce format, sans perte, donne des fichiers bien plus lourds qu’un JPEG ou un WebP.
• Oublier les images des anciennes pages lors d’une optimisation.

Pour savoir où en sont les images de votre site, vous pouvez commencer par un audit gratuit.

Questions fréquentes