Optimiser les images pour le SEO : ALT, WebP, lazy loading

Un site PME moyen pèse 70 % d’images en taille de page. Sur 4 Mo de contenu téléchargé, 2,8 Mo sont des fichiers JPEG ou PNG mal compressés. Sur mobile 4G, c’est 6 secondes d’attente avant affichage complet.

Et Google sait. Depuis 2021, les Core Web Vitals classent les sites qui chargent lentement plus bas dans les résultats. Une image hero non optimisée peut faire perdre 2 secondes sur le LCP, donc plusieurs positions sur des requêtes commerciales.

Pourtant, l’optimisation des images reste l’action SEO la moins chère à mettre en œuvre. Pas besoin d’agence, pas besoin de refonte. 4 heures de travail bien ciblé, et la majorité des PME gagnent 20 à 30 points sur PageSpeed. Voici la méthode complète utilisée chez Fix SEO sur les sites de nos clients.

Pourquoi les images plombent le SEO

Trois mécanismes jouent contre vous quand vos images sont mal optimisées.

D’abord le poids. Une image JPEG de 2 Mo en pleine résolution, c’est 12 secondes de téléchargement sur une 3G lente. Google teste vos pages dans ces conditions pour évaluer la performance mobile. Si vos visiteurs attendent, Google déclasse.

Ensuite le rendu. Une image sans dimensions spécifiées (width et height dans la balise <img>) provoque un décalage de mise en page à mesure que le navigateur découvre sa taille réelle. C’est le CLS (Cumulative Layout Shift), un Core Web Vital direct. Plus le CLS est élevé, plus votre page perd de positions.

Enfin l’accessibilité et la compréhension. Les images sans attribut alt sont invisibles pour Google. Pour un visuel produit ou un schéma technique, c’est du contenu perdu. Google Images représente 20 à 30 % du trafic SEO total pour certaines niches — décoration, mode, food, immobilier, voyage. Sans optimisation, ce trafic part chez vos concurrents.

L’enjeu n’est pas mince. Un audit que nous avons mené sur 12 sites PME en 2025 a montré une moyenne de 38 % de poids d’image économisable. Sans aucune perte visible de qualité.

Choisir le bon format

Le format conditionne 60 % du gain potentiel. Voici l’ordre de priorité.

WebP est le format de référence en 2026. Compatible 96 % des navigateurs (tous les modernes, y compris Safari depuis iOS 14). Il économise 25 à 35 % de poids par rapport au JPEG, 50 % par rapport au PNG. Aucune perte visible de qualité à compression équivalente. C’est le format à utiliser par défaut.

AVIF est encore meilleur en compression (jusqu’à 50 % de gain sur le WebP). Sa prise en charge progresse mais reste incomplète sur certains navigateurs anciens. À réserver aux sites où vous pouvez vous permettre un fallback double WebP + JPEG.

JPEG reste utile en fallback pour les très vieux navigateurs ou les workflows qui ne permettent pas le WebP. Compression de qualité 80-85 % suffit largement.

PNG ne doit servir que pour les images avec transparence ou les pictogrammes simples. Pour les photos, le PNG pèse 3 à 5 fois plus que le WebP sans bénéfice visuel.

SVG pour les logos, icônes, illustrations vectorielles. Poids souvent inférieur à 5 ko, redimensionnable sans perte. Toujours minifier le code SVG avant publication.

Le piège à éviter : laisser des PNG de 800 ko sur des photos pleine largeur quand le WebP les compresse à 80 ko. C’est l’erreur la plus fréquente, et la plus simple à corriger.

Compression et redimensionnement

Une image de 4000×3000 px affichée à 800×600 px gaspille 80 % de sa bande passante. Le navigateur télécharge tout, puis réduit. C’est du gâchis pur.

Redimensionnez avant compression. Aucune image ne doit dépasser sa taille d’affichage maximale × 2 (pour les écrans Retina). Une image hero pleine largeur sur desktop : 1920 px max. Une vignette d’article : 600 px max. Une image d’avatar : 200 px max.

Compressez à qualité 80-85 %. En dessous de 70 %, les artefacts deviennent visibles. Au-dessus de 90 %, le gain en qualité est invisible mais le fichier double. La zone 80-85 % est le sweet spot.

Outils gratuits efficaces : Squoosh (Google), TinyPNG, ImageOptim (Mac), FileOptimizer (Windows). Pour des workflows automatisés, sharp (Node.js) ou Pillow (Python) en CLI.

Sur un site Astro ou Next.js, utilisez le composant <Image> natif. Il génère automatiquement les variantes WebP, AVIF et JPEG dans les bonnes tailles, et ajoute les attributs srcset et sizes qui demandent au navigateur de télécharger la version la plus adaptée à l’écran. C’est un gain énorme pour zéro effort.

Un audit récent sur le site d’un client e-commerce nous a permis de passer de 5,2 Mo de poids moyen par page à 1,1 Mo, simplement en redimensionnant et compressant 380 visuels produit. Le LCP est passé de 4,8 s à 1,9 s. Trois positions gagnées sur 14 mots-clés commerciaux en six semaines.

L’attribut alt — la règle d’or

L’attribut alt sert trois publics : Google, les lecteurs d’écran, les utilisateurs en cas d’échec de chargement.

Bonne pratique en 6 règles :

1. Décrivez l’image, ne la commentez pas. « Plombier réparant un robinet sous évier » plutôt que « Image plombier ».
2. 80 à 125 caractères suffisent. Au-delà, vous bourrez et Google le détecte.
3. Intégrez le mot-clé principal si c’est naturel — jamais en force.
4. Une image décorative (séparateur, ornement) prend alt="". Ne mettez pas alt="décoration", c’est pire.
5. Ne commencez pas par « Image de » ou « Photo de » — c’est implicite.
6. Variez les alts si plusieurs images se ressemblent — éviter les duplications.

Cas concret pour une PME plombier :

• Mauvais : alt="plombier"
• Mauvais : alt="plombier Lyon dépannage chauffe-eau urgent 24h7j artisan"
• Bon : alt="Plombier inspectant un chauffe-eau gaz dans une cuisine"

L’attribut title est secondaire — il affiche une infobulle au survol, mais Google n’en tient quasi pas compte. Concentrez-vous sur le alt.

Pour les images produit en e-commerce, l’alt doit inclure : type de produit + caractéristique distinctive + marque si pertinent. Exemple : alt="Tapis berbère Beni Ourain laine 200×300 cm crème losanges".

Lazy loading natif

Le lazy loading retarde le chargement des images hors écran jusqu’à ce que l’utilisateur scrolle. Pour une page longue avec 30 images, c’est 2 Mo économisés au premier affichage.

Implémentation moderne : loading="lazy" sur la balise <img>. Aucun JavaScript nécessaire, supporté par 95 % des navigateurs depuis 2020.

<img src="produit.webp" alt="Tapis berbère crème" loading="lazy" width="600" height="400">

Exceptions importantes :

• L’image principale au-dessus de la ligne de flottaison (image hero, photo de couverture d’article) ne doit JAMAIS être en lazy loading. Sinon vous dégradez le LCP. Utilisez loading="eager" ou laissez vide.
• Les 2 ou 3 premières images visibles sans scroll doivent charger immédiatement.

Sur WordPress, le lazy loading est natif depuis la version 5.5. Sur Shopify, depuis 2021. Sur Astro / Next.js, c’est par défaut dans les composants Image. Si vous êtes sur un site ancien, ajoutez l’attribut manuellement — 5 minutes par template.

Pour aller plus loin sur les Core Web Vitals impactés, lisez notre article sur l’optimisation de la vitesse du site.

Dimensions explicites et CLS

Une image sans width et height explicites provoque un saut de mise en page au moment où le navigateur découvre sa taille. C’est le CLS, et Google le sanctionne durement.

Solution : toujours spécifier les dimensions intrinsèques.

<img src="image.webp" alt="..." width="1200" height="800" loading="lazy">

Le navigateur réserve la place avant le chargement. Pas de saut, CLS proche de 0.

Pour les images responsives, combinez avec aspect-ratio en CSS :

img { width: 100%; height: auto; aspect-ratio: 3/2; }

L’attribut srcset permet en plus de servir des variantes selon la taille d’écran :

<img src="image-800.webp"
     srcset="image-400.webp 400w, image-800.webp 800w, image-1600.webp 1600w"
     sizes="(max-width: 768px) 100vw, 800px"
     alt="..." width="800" height="600" loading="lazy">

Trois variantes générées automatiquement par votre framework, 60 % d’économie pour les mobiles. Sans effort supplémentaire après configuration initiale.

Nommage de fichier et URLs

Google lit le nom de fichier des images. Un fichier nommé IMG_4827.jpg ne lui dit rien. Un fichier nommé plombier-lyon-depannage-chauffe-eau.webp lui donne du contexte.

Règles de nommage :

• En minuscules, séparateurs en tirets (jamais d’underscore)
• 3 à 6 mots-clés, pas plus
• Pas d’accents ni de caractères spéciaux
• Pas de numéro de série technique du type IMG_xxxx
• Cohérence avec le sujet de la page

Le chemin d’accès compte aussi. /images/blog/optimisation-images-seo/cover.webp est plus parlant pour Google que /uploads/2024/12/. Si vous pouvez structurer vos chemins, faites-le.

Pour Google Images, le nom de fichier est l’un des trois facteurs principaux de classement (avec l’alt et le contexte textuel de la page). Sur des niches visuelles comme la décoration ou la cuisine, soigner cette dimension peut générer 15 à 25 % de trafic supplémentaire.

Sitemap images et indexation

Google peut explorer vos images sans aide. Mais sur un site qui en compte plus de 500, un sitemap images dédié accélère et fiabilise l’indexation.

Format minimum d’une entrée sitemap images :

<url>
  <loc>https://votresite.fr/article-X</loc>
  <image:image>
    <image:loc>https://votresite.fr/images/photo.webp</image:loc>
    <image:title>Titre descriptif</image:title>
    <image:caption>Légende complète</image:caption>
  </image:image>
</url>

Sur Astro, le plugin @astrojs/sitemap génère automatiquement les sitemaps images si vous lui passez les bons paramètres. Sur WordPress, l’extension Yoast SEO le fait nativement. Sur un site custom, prévoyez 2 heures de dev pour générer le fichier à la volée.

Soumettez le sitemap images dans Google Search Console au même titre que votre sitemap classique. L’indexation des images démarre alors en 2 à 5 jours.

Mesurer l’impact

Trois indicateurs à suivre avant / après optimisation.

Poids moyen de page : mesuré avec WebPageTest ou PageSpeed Insights. Objectif PME : sous 1,5 Mo en total transféré. Sous 800 ko sur mobile, c’est excellent.

LCP (Largest Contentful Paint) : dans 80 % des cas, c’est une image qui est le LCP. Optimisez cette image en priorité — réduisez sa taille, préchargez-la avec <link rel="preload">, supprimez son lazy loading. Objectif : sous 2,5 s.

Trafic Google Images : visible dans Search Console > Performances > onglet « Type de recherche » > « Image ». Suivez la courbe sur 60 jours après optimisation. Sur les niches visuelles, c’est là que le gain est le plus rapide.

Un suivi mensuel suffit. Pas besoin d’outil payant pour ces trois métriques — Search Console et PageSpeed Insights couvrent tout.

En résumé

L’optimisation des images n’est pas une option en 2026. C’est le levier SEO le plus rentable, à effort minimal pour une PME. Vous appliquez les six règles principales — WebP, redimensionnement, compression 80-85 %, alt descriptif, lazy loading, dimensions explicites — et vous gagnez 20 à 35 points sur PageSpeed mobile en une semaine.

Un audit complet de vos images prend 2 heures. Les corrections, 4 à 8 heures selon la taille du site. Le retour sur investissement se mesure en semaines, pas en mois.

Si vous voulez qu’on diagnostique vos images et qu’on livre un plan d’optimisation chiffré, contactez-nous — l’audit ciblé coûte 290 € HT, livré en 48h.

Questions fréquentes