Pourquoi optimiser ses images SEO ?

Les images représentent 60 à 80 % du poids d’une page web moyenne. Bien optimisées, elles boostent le LCP, le score Lighthouse et le ranking sur Google Images (souvent sous-estimé : c’est une 2ᵉ source de trafic gratuite).

Ce que vous saurez faire à la fin

Auditer les images actuelles de votre site et identifier les problèmes
Convertir, redimensionner et compresser toutes vos images en 1 après-midi
Écrire des balises alt qui ranquent sur Google Images
Nommer les fichiers et structurer les URLs image pour le SEO
Activer lazy loading et format moderne WebP/AVIF

Durée : 3-4 heures pour un site de taille moyenne (50-200 images). Pré-requis : accès FTP ou admin WordPress, un logiciel de compression.

Étape 1 — Audit des images actuelles

Ouvrez votre page d’accueil dans Chrome. Clic droit > Inspecter.
Onglet Réseau, filtrez par Img, rechargez la page.
Observez pour chaque image :
- Taille en KB
- Format (jpg, png, webp, avif)
- Dimensions (clic pour détails)
- Temps de chargement
Problèmes typiques à repérer :
- Images > 500 KB : à compresser
- PNG pour des photos : convertir en WebP ou JPG
- Dimensions > 2x la taille affichée : redimensionner
- Pas de alt dans le HTML : à corriger
Outil automatique : pagespeed.web.dev > saisissez votre URL. Section Opportunités : « Utiliser des formats d’image nouvelle génération » et « Images de taille appropriée » listent tout.

Étape 2 — Renommer avant d’uploader

Google Images lit le nom du fichier. Un nom descriptif + mot-clé = 20-30 % de trafic image en plus.

Règles de nommage :
- Tout en minuscules
- Tirets entre les mots, pas d’espaces ni underscores
- Pas d’accents ni caractères spéciaux
- Descriptif : sujet + contexte + type

❌ IMG_4572.JPG
❌ capture écran_2026-04-22 à 15.32.jpg
❌ DSC03482.png

✅ formation-excel-vba-dakar-groupe-stagiaires.jpg
✅ tableau-bord-financier-exemple-resultat.png
✅ logo-itskillscenter-fond-transparent.png

Renommage par lot sous Windows :
- Sélection multiple > F2 > tapez le nouveau nom > Entrée. Windows ajoute (1), (2), (3).
- Pour du renommage plus fin : Advanced Renamer (gratuit).
Mac : sélection > clic droit > Renommer X éléments > Format > appliquer un motif.
Linux / ligne de commande :

cd photos/
for f in *.JPG; do
  mv "$f" "$(echo "$f" | tr '[:upper:]' '[:lower:]' | sed 's/img_/formation-excel-/' | sed 's/ /-/g')"
done

Étape 3 — Redimensionner aux bonnes dimensions

Une image affichée en 800 px de large ne doit pas peser 4000 px.

Tailles recommandées :
- Hero/bannière grand format : 1920×1080 ou 1600×900
- Image d’article blog : 1200×800
- Miniature produit ou article : 600×400
- Avatar / logo : 300×300
- Icône : 64×64 ou 128×128
Outils :
- Squoosh (squoosh.app, gratuit en ligne, pas d’inscription)
- TinyPNG (tinypng.com, drag & drop)
- ImageMagick (ligne de commande, batch)
Avec ImageMagick, redimensionner toutes les JPG d’un dossier à 1200 px maximum en largeur :

mogrify -resize '1200x1200>' -quality 85 *.jpg

Le > signifie « ne pas agrandir si déjà plus petit ».

Étape 4 — Compresser sans perte visible

Objectif : réduire de 60-80 % le poids sans dégradation perceptible.
Réglages recommandés :
- JPG qualité : 80-85 (sweet spot poids/qualité)
- PNG : passez en PNG-8 ou mieux, convertissez en WebP
- SVG : minifiez avec SVGOMG
Batch ImageMagick :

mogrify -strip -interlace Plane -quality 85 *.jpg

Le -strip supprime les métadonnées (EXIF, GPS) souvent inutiles et lourdes.

Plugins WordPress automatiques :
- ShortPixel Image Optimizer : compresse à l’upload, convertit en WebP
- Smush : alternative gratuite limitée
- Imagify : bon rapport qualité/prix
- EWWW Image Optimizer : gratuit, compression en local serveur

Étape 5 — Convertir en WebP (ou AVIF)

WebP est supporté par 97 % des navigateurs en 2026 (informations vérifiées en avril 2026, susceptibles d’évoluer). AVIF est encore meilleur (~50 % plus léger) mais plus gourmand CPU à l’encodage.

Installation ligne de commande :

# Debian/Ubuntu
sudo apt install -y webp libheif-examples

# macOS
brew install webp libavif

Convertir un fichier :

cwebp -q 82 original.jpg -o original.webp
avifenc -q 55 original.jpg original.avif

Tous les JPG d’un dossier :

for f in *.jpg; do cwebp -q 82 "$f" -o "${f%.jpg}.webp"; done
for f in *.png; do cwebp -q 90 "$f" -o "${f%.png}.webp"; done

Dans WordPress : activez la conversion WebP automatique dans ShortPixel (Réglages > ShortPixel > Advanced > WebP).
Une fois converti, comparez : une image JPG de 450 KB devient typiquement un WebP de 90-180 KB, soit 60-80 % d’économie.

Étape 6 — Balise alt qui fonctionne en SEO

L’attribut alt sert deux objectifs : accessibilité (lecteurs d’écran) et SEO (Google Images).

Règles :
- Décrivez le contenu factuellement (ce qu’on voit)
- Incluez le mot-clé principal si naturel
- 60-125 caractères
- Une seule fois par page un alt identique si plusieurs images différentes
- Images purement décoratives : alt="" (vide)

<!-- Mauvais -->
<img src="IMG_4572.jpg" alt="photo">
<img src="excel.png" alt="excel excel excel tableau tableur formule">
<img src="logo.png">

<!-- Bon -->
<img src="formation-excel-vba-dakar-stagiaires.webp" 
     alt="Stagiaires en formation Excel VBA à Dakar, salle de classe ITSC">

<img src="tableau-bord-excel-resultat-marge.webp" 
     alt="Tableau de bord Excel avec marge pondérée par région">

<img src="logo-itsc.svg" alt="ITSkillsCenter">

Dans WordPress, à l’upload : remplissez le champ Texte alternatif immédiatement (rarement de retour ensuite).
Audit bulk : plugin Image SEO liste toutes les images sans alt.
Pour un site existant, script rapide :

curl -s https://example.sn/article | grep -oE '<img[^>]*>' | grep -v 'alt='
# Liste les balises img sans alt

Étape 7 — Spécifier width et height explicitement

Empêche le CLS (Cumulative Layout Shift) qui nuit au SEO.

Toujours inclure les dimensions réelles :

<img src="photo.webp" 
     width="1200" height="800" 
     alt="...">

CSS pour responsive :

img {
  max-width: 100%;
  height: auto;     /* garde le ratio */
}

WordPress ajoute automatiquement width/height depuis Gutenberg. Sur les thèmes anciens, vérifiez et patchez.

Étape 8 — Images responsive avec srcset

Servir la bonne taille selon l’appareil économise énormément sur mobile.

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

Le navigateur choisit la version adaptée à l’écran ET au device pixel ratio. WordPress génère automatiquement le srcset pour chaque image (taille thumbnail, medium, large, full).

Étape 9 — Lazy loading

Attribut natif HTML5 :

<img src="..." loading="lazy" alt="...">
<img src="hero.webp" alt="..." fetchpriority="high">
<!-- L'image hero: PAS de lazy, fetchpriority=high -->

Supporté nativement par Chrome, Firefox, Safari 15.4+.
WordPress depuis 5.5 ajoute loading="lazy" automatiquement aux images sous la ligne de flottaison.
Pour la fine optimisation : plugin WP Rocket ou a3 Lazy Load gère les itérables CSS, iframes, YouTube.

Étape 10 — Format moderne avec <picture>

Le tag <picture> permet de servir AVIF aux navigateurs compatibles, WebP sinon, JPG en dernier recours.

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" 
       alt="..." 
       width="1200" height="800"
       loading="lazy">
</picture>

Navigateurs récents reçoivent l’AVIF (50 % plus petit), anciens reçoivent le JPG.

Étape 11 — Servir WebP depuis .htaccess

Si vous ne pouvez pas toucher au HTML, Apache peut servir WebP automatiquement aux navigateurs compatibles.

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
  RewriteRule ^(.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1,L]
</IfModule>

<IfModule mod_headers.c>
  Header append Vary Accept env=REDIRECT_accept
</IfModule>

AddType image/webp .webp

Collez en tête de .htaccess (après RewriteEngine On s’il existe déjà).
Testez : dans Chrome DevTools, onglet Réseau, rechargez. Les fichiers .jpg renvoient maintenant des réponses avec Content-Type: image/webp.

Étape 12 — Image sitemap pour Google Images

Un sitemap image indique à Google où trouver vos images. Souvent inclus dans le sitemap général via Yoast/Rank Math.

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
  <url>
    <loc>https://example.sn/formation-excel-vba</loc>
    <image:image>
      <image:loc>https://example.sn/formation-excel-vba-dakar.webp</image:loc>
      <image:caption>Formation Excel VBA à Dakar</image:caption>
      <image:title>Stagiaires ITSC en formation Excel VBA</image:title>
    </image:image>
  </url>
</urlset>

Vérifiez dans Search Console > Sitemaps : votre sitemap image est-il soumis ?
Au bout de 2-4 semaines, vous voyez les premières impressions dans Search Console > Performances > onglet Google Images.

Étape 13 — CDN pour diffusion rapide

Activez Cloudflare Polish (plan Pro 25 USD/mo) : conversion WebP automatique côté CDN, sans changer le site.
Alternative gratuite : Cloudflare Mirage (adaptive image sizing).
Pour les gros sites : Cloudinary ou imgix — transformation à la volée avec URLs paramétrées :

<img src="https://res.cloudinary.com/itsc/image/upload/w_800,q_auto,f_auto/formation.jpg" 
     alt="...">
<!-- w_800 = largeur, q_auto = qualité, f_auto = format optimal -->

Étape 14 — Tester et mesurer

Pagespeed Insights avant/après. Notez le score Performance et la durée LCP.
GTmetrix : détaille le poids par ressource.
Dareboost : audit complet images + SEO.
Objectif réaliste après optimisation :
- Poids total page : -40 à -60 %
- LCP mobile : -1 à -2 secondes
- Score Pagespeed : +15 à +30 points
Suivi dans Search Console > Expérience > Core Web Vitals : passage du rouge/orange au vert sous 2-4 semaines.

Étape 15 — Maintenance continue

Règle d’équipe : JAMAIS uploader une image sans :
- La renommer selon la convention
- La redimensionner (max 1200 px ou 1920 px)
- La compresser (WebP si nouveau, JPG qualité 82 sinon)
- Renseigner le texte alternatif
Checklist pré-publication dans un plugin Editorial Checklist WordPress pour forcer le respect.
Audit trimestriel avec pagespeed.web.dev pour retaper les dérives.
Formez votre équipe contenu : 1 heure de formation = des années d’images correctement optimisées.

Checklist finale

✓ Toutes images renommées en tirets-minuscules descriptives
✓ Dimensions adaptées, max 1200 ou 1920 px
✓ JPG qualité 82-85, ou WebP/AVIF
✓ Tous fichiers < 200 KB idéalement
✓ Attribut alt rempli sur 100 % des images
✓ width + height spécifiés
✓ loading="lazy" sauf LCP
✓ srcset ou <picture> pour responsive
✓ Sitemap image soumis dans Search Console
✓ Pagespeed image score > 85
✓ LCP < 2,5 s sur mobile

Guide : Optimiser vos images pour le SEO