L'optimisation des images pour le SEO couvre quatre dimensions : un nommage de fichier descriptif, un texte alternatif (alt text) pertinent, une compression efficace pour réduire le poids et un format moderne comme WebP ou AVIF. Les images représentent en moyenne 50 % du poids d'une page web et sont donc le premier levier pour améliorer la vitesse de chargement et les Core Web Vitals.
Pourquoi l'optimisation des images est cruciale
Les images sont partout sur le web : photos de produits, illustrations d'articles, captures d'écran, infographies. Mal gérées, elles deviennent le principal frein à la performance de votre site. Bien gérées, elles deviennent un atout SEO.
L'impact sur la vitesse
Une image de 2 Mo sur votre page d'accueil peut à elle seule faire passer votre temps de chargement de 2 à 5 secondes. Multipliez cela par le nombre d'images sur votre site et vous comprenez pourquoi la vitesse est souvent le premier problème identifié dans un audit technique SEO.
L'impact sur le trafic via Google Images
Google Images représente environ 20 % de toutes les recherches Google. Des images correctement optimisées (nommage, alt text, données structurées) peuvent apparaître dans les résultats de Google Images et amener du trafic supplémentaire vers votre site.
L'impact sur l'accessibilité
Le texte alternatif rend vos images accessibles aux personnes malvoyantes qui utilisent des lecteurs d'écran. C'est une obligation légale dans de nombreux pays et un signal de qualité pour Google.
Le nommage des fichiers image
La règle de base
Le nom de fichier doit décrire le contenu de l'image avec des mots séparés par des tirets.
| Mauvais nommage | Bon nommage |
|---|---|
| IMG_20260404_1234.jpg | audit-seo-checklist-technique.jpg |
| photo1.png | equipe-dwenola-nantes.jpg |
| DSC_0042.jpeg | creation-site-internet-responsive.jpg |
| Capture d'écran 2026-04-04.png | google-search-console-rapport-indexation.png |
Les bonnes pratiques
- Utilisez des tirets (-) comme séparateurs, pas des underscores (_) ni des espaces
- Écrivez en minuscules uniquement
- Incluez le mot-clé principal de la page si l'image l'illustre
- Soyez descriptif mais concis : 3 à 5 mots suffisent
- Évitez les caractères spéciaux et les accents dans les noms de fichier
Le texte alternatif (alt text)
Qu'est-ce que l'attribut alt ?
L'attribut alt (alternative text) est un texte invisible qui décrit le contenu d'une image. Il est lu par les lecteurs d'écran pour les personnes malvoyantes et par les robots de Google pour comprendre ce que l'image représente.
<img src="audit-seo-technique.jpg" alt="Checklist d'audit SEO technique avec 20 points de contrôle">
Comment rédiger un bon alt text
1. Décrivez ce que montre l'image
Écrivez comme si vous décriviez l'image à quelqu'un qui ne peut pas la voir.
| Image | Mauvais alt | Bon alt |
|---|---|---|
| Photo d'un graphique de trafic | "image" | "Graphique montrant l'évolution du trafic organique de 0 à 50 000 visiteurs en 12 mois" |
| Capture de Google Search Console | "screenshot" | "Rapport de couverture de l'index dans Google Search Console montrant 150 pages indexées" |
| Photo d'équipe | "photo" | "L'équipe Dwenola dans ses bureaux de Nantes" |
2. Incluez le mot-clé quand c'est naturel
Si l'image illustre le sujet de la page, intégrer le mot-clé dans l'alt text est pertinent et naturel. Mais ne forcez jamais un mot-clé dans un alt text si cela ne correspond pas à ce que montre l'image.
Bon : alt="Les trois piliers du SEO illustrés : technique, contenu et autorité"
Mauvais : alt="SEO référencement naturel Google optimisation site web agence Nantes" (bourrage de mots-clés)
3. Gardez une longueur de 5 à 15 mots
Soyez descriptif mais concis. Un alt text de 50 mots est excessif. Un mot unique est insuffisant.
4. Ne commencez pas par "Image de" ou "Photo de"
Les lecteurs d'écran annoncent déjà qu'il s'agit d'une image. Écrire "Image de la page d'accueil" est redondant. Écrivez simplement "Page d'accueil du site Dwenola en version mobile".
5. Laissez l'alt vide pour les images décoratives
Les images purement décoratives (bordures, arrière-plans, séparateurs) doivent avoir un attribut alt vide (alt="") pour que les lecteurs d'écran les ignorent.
La compression des images
Pourquoi compresser
Une photo sortie d'un appareil photo ou d'un logiciel de design peut peser 3 à 10 Mo. Après compression sans perte visible de qualité, elle peut peser 100 à 300 Ko. C'est une réduction de 90 à 97 % du poids, avec un impact majeur sur la vitesse de chargement.
Les deux types de compression
Compression sans perte (lossless) : réduit la taille du fichier sans aucune dégradation de qualité. La réduction est modérée (10-30 %).
Compression avec perte (lossy) : supprime des données visuelles peu perceptibles. La réduction est importante (50-90 %) avec une perte de qualité souvent invisible à l'oeil nu.
Pour le web, la compression lossy avec un niveau de qualité de 75-85 % offre le meilleur compromis entre poids et qualité visuelle.
Les outils de compression
| Outil | Type | Gratuit | Automatisable |
|---|---|---|---|
| TinyPNG / TinyJPG | En ligne | Oui (limité) | API payante |
| Squoosh (Google) | En ligne | Oui | Non |
| ShortPixel | Plugin WordPress | Freemium | Oui |
| Imagify | Plugin WordPress | Freemium | Oui |
| Sharp (Node.js) | Librairie | Oui | Oui |
| Next.js Image | Framework | Oui | Oui (automatique) |
Chez Dwenola, nos sites développés avec Next.js bénéficient d'une optimisation automatique des images grâce au composant next/image : redimensionnement adaptatif, conversion en WebP, lazy loading et compression, le tout sans intervention manuelle.
Les formats d'image modernes
Le format WebP
Développé par Google, le format WebP offre une compression supérieure de 25 à 35 % par rapport au JPEG, avec une qualité équivalente. Il est supporté par tous les navigateurs modernes (Chrome, Firefox, Safari, Edge).
Le format AVIF
Encore plus performant que le WebP (30 à 50 % plus léger que le JPEG), le format AVIF est supporté par Chrome, Firefox et Safari (depuis Safari 16). Son adoption s'accélère.
Quel format choisir ?
| Type d'image | Format recommandé | Alternative |
|---|---|---|
| Photos | WebP ou AVIF | JPEG (fallback) |
| Illustrations avec transparence | WebP ou AVIF | PNG (fallback) |
| Logos et icônes | SVG | PNG |
| Animations | WebP animé ou vidéo | GIF (à éviter, très lourd) |
| Captures d'écran | WebP | PNG |
La balise picture pour le fallback
Pour servir le format le plus performant tout en assurant la compatibilité avec les anciens navigateurs :
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Description de l'image">
</picture>
Le responsive : servir la bonne taille
Le problème
Afficher une image de 2 000 pixels de large sur un smartphone qui a un écran de 400 pixels est un gaspillage de bande passante. Le navigateur télécharge une image cinq fois trop grande.
La solution : les images responsives
L'attribut srcset permet de servir différentes tailles d'image selon l'appareil :
<img
src="image-800.jpg"
srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
sizes="(max-width: 600px) 400px, (max-width: 900px) 800px, 1200px"
alt="Description de l'image"
>
Le navigateur choisit automatiquement la taille la plus adaptée. C'est le fonctionnement natif du composant Image de Next.js et de la plupart des frameworks modernes.
Le lazy loading : charger à la demande
Le principe
Le lazy loading (chargement différé) consiste à ne charger les images que lorsqu'elles sont sur le point d'apparaître à l'écran. Les images en bas de page ne sont pas chargées tant que le visiteur n'a pas scrollé jusque-là.
L'implémentation
En HTML natif, l'attribut loading="lazy" suffit :
<img src="image.webp" alt="Description" loading="lazy">
Attention : ne mettez pas de lazy loading sur les images visibles au-dessus de la ligne de flottaison (le premier écran visible sans scroller). Ces images doivent se charger immédiatement pour un bon score LCP.
Checklist d'optimisation des images
Pour chaque image de votre site, vérifiez :
- Le nom de fichier est descriptif et en minuscules avec des tirets
- L'attribut alt est présent, descriptif et naturel
- L'image est compressée (lossy 75-85 % pour les photos)
- Le format est moderne (WebP ou AVIF avec fallback JPEG/PNG)
- La taille en pixels est adaptée à l'affichage (pas d'image 4000 px affichée en 400 px)
- Le lazy loading est activé pour les images sous la ligne de flottaison
- Les dimensions (width et height) sont spécifiées pour éviter le CLS
Cette checklist fait partie intégrante de notre audit technique SEO chez Dwenola.
FAQ
Combien doit peser une image optimisée pour le web ?
En règle générale, visez moins de 100 Ko par image pour les photos standard et moins de 200 Ko pour les images hero (plein écran). Les miniatures doivent être inférieures à 30 Ko. Le poids total des images d'une page ne devrait pas dépasser 500 Ko à 1 Mo.
Le texte dans les images est-il lu par Google ?
Google peut extraire du texte à partir des images grâce à la reconnaissance optique de caractères (OCR), mais ce n'est pas fiable. Le texte important pour le SEO doit toujours être en HTML, jamais uniquement dans une image. Si vous avez une infographie avec du texte, transcrivez les informations clés dans le corps de la page.
Les images de stock nuisent-elles au SEO ?
Les images de stock ne nuisent pas directement au SEO, mais elles n'apportent aucune valeur ajoutée. Google valorise l'originalité et l'authenticité (signaux E-E-A-T). Des photos originales, des captures d'écran, des schémas créés sur mesure sont toujours préférables. Si vous utilisez des images de stock, complétez-les avec des visuels originaux.
Le CDN est-il utile pour les images ?
Oui. Un CDN (Content Delivery Network) sert vos images depuis des serveurs proches géographiquement de vos visiteurs, réduisant le temps de chargement. C'est particulièrement utile si votre audience est répartie sur un large territoire. Des services comme Cloudflare, Cloudinary ou Imgix proposent des CDN spécialisés pour les images avec compression et redimensionnement automatiques.
Votre site est invisible sur Google ? On fait un diagnostic gratuit en 30 minutes. On en discute ?
ChatGPT
Claude
Gemini
Perplexity