Pourquoi l’optimisation des images est cruciale pour le SEO
Les images représentent souvent plus de la moitié du poids d’une page web. Une image non optimisée ralentit le temps de chargement, ce qui pénalise l’expérience utilisateur et le classement dans les moteurs de recherche. Google accorde une importance croissante à la vitesse et à l’accessibilité. Optimiser les images de son site pour le référencement ne se limite pas à réduire la taille des fichiers : il s’agit d’une stratégie globale qui inclut le format, le nommage, les attributs alt, le chargement paresseux et le balisage structuré.
Dans cet article, nous allons voir étape par étape les bonnes pratiques pour que vos images soient à la fois légères, pertinentes et bien indexées.
Choisir le bon format d’image
Tous les formats ne se valent pas pour le web. Le choix dépend du type d’image : photo, illustration, icône ou graphique.
JPEG vs PNG vs WebP vs AVIF
- JPEG : idéal pour les photos, bon compromis qualité/poids. Évitez le PNG pour les photos, car il est plus lourd.
- PNG : parfait pour les images avec transparence ou du texte (logos, captures d’écran).
- WebP : format moderne développé par Google, offre une compression 25-35 % supérieure au JPEG sans perte de qualité. Recommandé pour la plupart des cas.
- AVIF : encore plus performant que WebP, mais moins supporté par les navigateurs anciens. À utiliser en complément avec un fallback.
Conseil pratique : utilisez WebP comme format principal, avec un fallback JPEG ou PNG via la balise <picture>.
Compresser les images sans perte visible
La compression réduit le poids du fichier tout en maintenant une qualité acceptable. Deux approches :
- Compression avec perte : supprime des données pour réduire le poids. Pour les photos, un niveau de qualité 80-85 % est souvent suffisant.
- Compression sans perte : réduit la taille sans altérer les pixels. Utile pour les graphiques et les screenshots.
Outils recommandés
| Outil | Type | Particularité |
|---|---|---|
| TinyPNG / TinyJPG | En ligne | Gratuit, compression intelligente |
| ImageOptim | Desktop (Mac) | Sans perte, interface simple |
| Squoosh | En ligne / CLI | Comparaison avant/après |
| ShortPixel | Plugin WordPress | Compression automatique |
Pour un site WordPress, un plugin comme Smush ou EWWW Image Optimizer peut automatiser la compression dès l’upload.
Redimensionner les images à la bonne taille
Une image 4000×3000 pixels affichée dans un carrousel de 800 pixels de large est un gaspillage. Redimensionnez toujours vos images à la taille d’affichage maximale nécessaire. Par exemple, pour un article de blog, une largeur de 1200 px est généralement suffisante.
Utilisez des outils comme Photoshop, GIMP ou des plugins WordPress qui génèrent automatiquement plusieurs tailles (thumbnail, medium, large).
Astuce : pour les images responsives, utilisez l’attribut srcset pour indiquer au navigateur quelle taille charger selon l’écran.
Nommer les fichiers images de façon optimisée
Le nom du fichier est un signal SEO pour Google. Évitez les noms automatiques comme IMG_20250301.jpg ou photo123.png. Utilisez des mots-clés pertinents séparés par des tirets.
Exemple : optimiser-images-seo-guide.jpg plutôt que DSC001.jpg.
Règles :
- Utilisez des tirets entre les mots
- Gardez le nom court mais descriptif
- Intégrez le mot-clé principal si naturel
- Évitez les caractères spéciaux, accents, espaces
Rédiger des balises alt pertinentes
L’attribut alt est essentiel pour l’accessibilité et le SEO. Il décrit le contenu de l’image pour les lecteurs d’écran et aide Google à comprendre le contexte.
Bonnes pratiques :
- Décrivez précisément ce que montre l’image
- Incluez le mot-clé principal si pertinent, mais sans bourrage
- Restez concis (moins de 125 caractères)
- Ne commencez pas par “image de” ou “photo de”
- Pour les images décoratives, laissez alt vide (alt=””)
Exemple : Pour une photo d’un ordinateur portable avec un graphique SEO, écrivez : “Ordinateur portable affichant un graphique de performance SEO”.
Utiliser le chargement paresseux (lazy loading)
Le lazy loading retarde le chargement des images jusqu’à ce qu’elles soient sur le point d’apparaître dans la fenêtre d’affichage. Cela réduit le temps de chargement initial et économise de la bande passante.
En HTML, ajoutez l’attribut loading="lazy" à vos balises <img>. Les navigateurs modernes le supportent. Pour les anciens, des bibliothèques JavaScript comme lazysizes peuvent être utilisées.
Attention : ne mettez pas en lazy loading les images visibles dès le chargement (hero image, première image de l’article) car cela peut nuire au Largest Contentful Paint (LCP).
Ajouter des données structurées pour les images
Les données structurées aident Google à afficher vos images dans les résultats enrichis (Google Images, carrousels). Utilisez le schéma ImageObject ou Product si applicable.
Exemple de balisage JSON-LD pour une image :
{
"@context": "https://schema.org",
"@type": "ImageObject",
"contentUrl": "https://example.com/photo.jpg",
"description": "Description de l'image",
"name": "Titre de l'image"
}
Pour les pages de produits, le schéma Product inclut une propriété image. Assurez-vous que l’URL de l’image est absolue et accessible.
Optimiser le texte alternatif et les légendes
Les légendes (balise <figcaption>) sont souvent lues par les utilisateurs et peuvent contenir des mots-clés. Elles ne remplacent pas le alt, mais ajoutent du contexte.
Exemple :
<figure>
<img src="optimiser-images-seo.jpg" alt="Graphique montrant l'impact de l'optimisation des images sur le temps de chargement">
<figcaption>Impact de l'optimisation des images sur le temps de chargement (source : étude 2024)</figcaption>
</figure>
Utiliser un CDN pour servir les images
Un Content Delivery Network (CDN) distribue vos images sur des serveurs proches de vos visiteurs, réduisant la latence. Des services comme Cloudflare, BunnyCDN ou ImageKit offrent aussi des fonctionnalités d’optimisation automatique (conversion WebP, redimensionnement).
Pour les sites WordPress, des plugins comme Jetpack ou Optimole intègrent un CDN et l’optimisation des images.
Éviter les erreurs courantes
- Ignorer les balises alt : chaque image doit en avoir une, sauf si décorative.
- Utiliser des images trop lourdes : visez moins de 100 Ko par image, idéalement 30-50 Ko.
- Oublier le responsive : utilisez srcset et sizes pour adapter la résolution.
- Négliger le sitemap images : ajoutez un sitemap spécifique pour que Google découvre toutes vos images.
- Utiliser des images sans droit : privilégiez des banques libres de droits (Unsplash, Pexels) ou vos propres créations.
Vérifier l’optimisation avec des outils
Après avoir optimisé vos images, testez le résultat :
- Google PageSpeed Insights : vérifie la compression et le lazy loading.
- GTmetrix : analyse les tailles d’images et propose des améliorations.
- Google Search Console : rapport sur les images dans les résultats de recherche.
- Lighthouse : audit intégré au navigateur Chrome.
Corrigez les alertes liées aux images (formats obsolètes, images non compressées, absence de dimensions).
Checklist finale pour optimiser les images de son site pour le référencement
- Choisir le bon format (WebP + fallback)
- Compresser sans perte visible
- Redimensionner à la bonne taille
- Nommer les fichiers avec des mots-clés
- Rédiger des balises alt descriptives
- Activer le lazy loading
- Ajouter des données structurées
- Utiliser un CDN
- Créer un sitemap images
- Tester avec PageSpeed Insights
En suivant ces étapes, vos images contribueront à un meilleur classement, une meilleure expérience utilisateur et une accessibilité renforcée. L’optimisation des images est un investissement durable pour la performance de votre site.
Photo by Paige Cody on Unsplash
12 Comments
Super guide ! J’ai remarqué que beaucoup de sites oublient l’attribut alt. Mais est-ce qu’il faut vraiment décrire l’image en détail ou un simple mot-clé suffit ?
Bonjour, l’attribut alt doit avant tout décrire le contenu de l’image de manière précise et concise pour l’accessibilité. Un simple mot-clé n’est pas suffisant pour les utilisateurs de lecteurs d’écran. Par exemple, pour une photo de chaussures de course, écrivez « Paire de chaussures de running rouges sur un sentier forestier » plutôt que « chaussures running ». Le contexte compte aussi : si l’image est décorative, laissez alt vide (alt=””).
Merci pour cet article très complet. J’utilise déjà WebP mais je ne connaissais pas AVIF. Est-ce que ça vaut le coup de migrer maintenant ou vaut-il mieux attendre que le support soit plus large ?
Bonjour, merci pour votre retour. AVIF offre une meilleure compression que WebP, mais son support n’est pas encore universel (Chrome et Firefox récents, mais pas Safari ni certains navigateurs mobiles). Nous recommandons d’utiliser AVIF comme format avancé avec une balise et un fallback WebP ou JPEG. Pour l’instant, WebP reste le meilleur compromis pour la majorité des sites.
Je viens de lire votre article et je me demande si l’optimisation des images est vraiment si importante pour le SEO. J’ai un petit blog et mes pages se chargent en moins de 3 secondes, est-ce que ça vaut le coup de passer du temps là-dessus ?
Bonjour, même avec un temps de chargement correct, l’optimisation des images reste bénéfique. Google utilise la vitesse comme facteur de classement, et des images plus légères améliorent l’expérience utilisateur, surtout sur mobile. De plus, le nommage des fichiers et les attributs alt aident à l’indexation. Vous pouvez commencer par des actions simples : redimensionner les images à la bonne taille, compresser avec TinyPNG et ajouter des alt textes pertinents. Cela ne prend que quelques minutes par image et peut faire la différence à long terme.
Article très clair, merci. Une question sur le chargement paresseux (lazy loading) : est-ce que cela a un impact négatif sur l’indexation des images par Google ?
Bonjour, merci. Le lazy loading n’est pas un problème pour l’indexation si vous utilisez l’attribut loading=”lazy” natif. Googlebot charge les images jusqu’à un certain point de défilement, donc les images en haut de page sont indexées normalement. Pour les images plus bas, assurez-vous qu’elles sont accessibles via le HTML (pas chargées par JavaScript uniquement). En cas de doute, vous pouvez utiliser le test d’optimisation mobile de Google.
Bonjour, j’essaie d’optimiser les images de mon site e-commerce. Pour les fiches produits, j’ai plusieurs tailles d’image (vignette, zoom, etc.). Comment gérer ça avec srcset ?
Bonjour, pour le e-commerce, srcset est très utile. Définissez les tailles dont vous avez besoin (par exemple 150w, 300w, 600w, 1200w) et ajoutez l’attribut sizes pour indiquer au navigateur la largeur d’affichage selon le viewport. Exemple : sizes=”(max-width: 600px) 100vw, 50vw”. Ainsi, le navigateur choisira la meilleure image. Pensez aussi à générer des WebP pour chaque taille. Un plugin comme WooCommerce peut automatiser cela.
J’utilise ShortPixel pour la compression automatique sur WordPress, mais je me demande si le réglage par défaut est optimal. Avez-vous des recommandations de niveaux de compression pour les photos ?
Bonjour, ShortPixel est un excellent choix. Pour les photos, nous conseillons une compression avec perte à 85 % (ou niveau « Glossy ») qui offre un bon équilibre qualité/poids. Pour les graphiques ou logos, préférez la compression sans perte. Vous pouvez également tester Squoosh pour comparer visuellement l’impact avant d’appliquer les réglages.