SEO des images : WebP, AVIF, srcset, alt et Google Images

Sur la plupart des sites, les images représentent 50-70% du poids total de la page. Un JPEG non compressé de 3 Mo, une image trop grande servie sur mobile, une image LCP sans preload — ce sont les causes les plus fréquentes d'un mauvais score LCP.

Optimiser les images, c'est améliorer le LCP, réduire la bande passante, et améliorer le classement dans Google Images. Trois victoires pour un seul travail.

Formats d'images — AVIF, WebP, JPEG

Format	Compression	Support navigateurs	Idéal pour
AVIF	Excellent (30-50% mieux que WebP)	Chrome 85+, Firefox 93+, Safari 16+	Photos, illustrations complexes
WebP	Très bon (25-35% mieux que JPEG)	Chrome, Firefox, Safari 14+, Edge	Photos, images avec transparence
JPEG	Bon	Tous	Fallback universel
PNG	Lossless	Tous	Screenshots, logos avec transparence fine
SVG	N/A (vectoriel)	Tous	Icônes, logos, illustrations géométriques

Règle de base : AVIF en premier, WebP en second, JPEG en fallback. Utiliser <picture> pour le choix automatique.

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description précise de l'image" width="800" height="450">
</picture>

Conversion et compression

# Installer les outils
npm install -g sharp-cli
# Ou avec homebrew : brew install libavif webp
 
# JPEG → WebP (qualité 80, bon compromis taille/qualité)
cwebp -q 80 image.jpg -o image.webp
 
# JPEG → AVIF
avifenc --min 30 --max 63 image.jpg image.avif
 
# Script batch pour tous les JPEG d'un dossier
find . -name "*.jpg" -exec sh -c 'cwebp -q 80 "$1" -o "${1%.jpg}.webp"' _ {} \;
 
# Avec sharp (Node.js) — pour un pipeline de build
import sharp from 'sharp'
 
await sharp('input.jpg')
  .webp({ quality: 80 })
  .toFile('output.webp')
 
await sharp('input.jpg')
  .avif({ quality: 50 })
  .toFile('output.avif')

Objectifs de taille :

Image hero (1200px+) : < 150Ko en WebP/AVIF
Image de carte/thumbnail (400px) : < 30Ko
Image Open Graph (1200×630) : < 100Ko en JPEG

srcset et sizes — images responsives

Servir une image 1200px sur mobile est du gaspillage. srcset permet au navigateur de choisir la taille adaptée à l'écran.

<!-- Images responsives avec srcset -->
<img
  src="hero-800.webp"
  srcset="
    hero-400.webp 400w,
    hero-800.webp 800w,
    hero-1200.webp 1200w,
    hero-1600.webp 1600w
  "
  sizes="
    (max-width: 640px) 100vw,
    (max-width: 1024px) 80vw,
    1200px
  "
  alt="Vue aérienne du centre ville de Paris"
  width="1200"
  height="630"
>

sizes indique au navigateur quelle largeur d'affichage l'image occupera selon le breakpoint, pour qu'il choisisse la bonne variante srcset avant de charger l'image.

Sans sizes, le navigateur suppose que l'image fait 100vw — il téléchargera toujours la plus grande variante.

Lazy loading — règles précises

<!-- Images dans le viewport initial — PAS de lazy loading -->
<img src="hero.webp" alt="..." fetchpriority="high">
 
<!-- Images hors viewport — lazy loading -->
<img src="article-thumbnail.webp" alt="..." loading="lazy">
 
<!-- Règle d'or : les 2-3 premières images de la page = no lazy loading -->
<!-- Toutes les autres = loading="lazy" -->

Erreur fréquente : appliquer loading="lazy" à toutes les images sans exception. Si l'image LCP (souvent le hero ou la première image de l'article) est lazy-loaded, le LCP est catastrophique — le navigateur ne commence à télécharger l'image qu'après avoir parsé tout le HTML.

<!-- Image LCP — précharger ET pas de lazy loading -->
<link rel="preload" as="image" href="hero.webp" fetchpriority="high">
<img src="hero.webp" alt="..." fetchpriority="high" width="1200" height="630">

Attributs alt — SEO et accessibilité

L'attribut alt sert à deux choses : donner un contexte aux moteurs de recherche sur l'image, et décrire l'image aux utilisateurs de lecteurs d'écran ou dont l'image ne charge pas.

<!-- ❌ Alt vide — invalide pour le SEO et l'accessibilité -->
<img src="server.jpg" alt="">
 
<!-- ❌ Alt générique — inutile -->
<img src="server.jpg" alt="image">
<img src="server.jpg" alt="photo">
 
<!-- ❌ Bourrage de mots-clés — pénalisé -->
<img src="server.jpg" alt="docker kubernetes devops conteneur linux ubuntu VPS">
 
<!-- ✅ Description précise et concise -->
<img src="server.jpg" alt="Schéma d'architecture Docker avec trois conteneurs et un reverse proxy Nginx">
 
<!-- ✅ Image décorative — alt vide intentionnel -->
<!-- (Icône purement décorative, pas de valeur informationnelle) -->
<img src="decorative-line.svg" alt="" role="presentation">

Règles d'écriture des alt :

1-2 phrases maximum, 125 caractères maximum
Décrire ce que l'image montre, pas ce qu'elle illustre
Inclure le mot-clé naturellement si pertinent
Pas de "image de" ou "photo de" — le navigateur dit déjà que c'est une image

next/image — configuration optimale

Composant image optimisé avec next/image

import Image from 'next/image'
 
// Image avec dimensions connues
export function ArticleHero({ src, alt }: { src: string; alt: string }) {
  return (
    <Image
      src={src}
      alt={alt}
      width={1200}
      height={630}
      priority         // Pas de lazy loading — image LCP
      sizes="(max-width: 768px) 100vw, 1200px"
      quality={85}
      placeholder="blur" // Ou "empty"
      blurDataURL="data:image/jpeg;base64,..." // Généré par next/image si src est local
    />
  )
}
 
// Image dans une liste — lazy loading par défaut
export function ArticleCard({ image, alt }: { image: string; alt: string }) {
  return (
    <Image
      src={image}
      alt={alt}
      width={400}
      height={225}
      // loading="lazy" est le défaut — pas besoin de le spécifier
      sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 400px"
    />
  )
}
 
// Image fill — pour un conteneur de taille variable
export function HeroWithFill() {
  return (
    <div style={{ position: 'relative', width: '100%', aspectRatio: '16/9' }}>
      <Image
        src="/hero.jpg"
        alt="..."
        fill
        style={{ objectFit: 'cover' }}
        priority
        sizes="100vw"
      />
    </div>
  )
}

next/image gère automatiquement : conversion WebP/AVIF, srcset, lazy loading, et le CLS via ses dimensions.

Configurer les domaines autorisés pour les images externes :

next.config.ts

const nextConfig = {
  images: {
    remotePatterns: [
      { protocol: 'https', hostname: 'images.unsplash.com' },
      { protocol: 'https', hostname: 'cdn.monsite.fr' },
    ],
    formats: ['image/avif', 'image/webp'],
    quality: 85,
  },
}

Google Images — référencement spécifique

Google Images est un moteur de recherche à part entière. Certaines industries (recettes, mode, e-commerce) reçoivent autant de trafic depuis Google Images que depuis la recherche classique.

Pour apparaître dans Google Images :

alt descriptif et précis (voir ci-dessus)
Nom de fichier descriptif (schema-docker-nginx.webp, pas IMG_4521.jpg)
Image entourée de texte contextuel pertinent
Page indexée et accessible à Googlebot
Schema.org ImageObject si l'image est le sujet principal de la page

Schema.org ImageObject pour une page dont l'image est centrale

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "ImageObject",
  "url": "https://iducation.fr/images/schema-docker.webp",
  "width": 1200,
  "height": 630,
  "name": "Architecture Docker avec Nginx reverse proxy",
  "description": "Schéma montrant comment Nginx distribue le trafic vers trois conteneurs Docker"
}
</script>

Sitemap d'images

Pour maximiser l'indexation de vos images dans Google Images, ajoutez une extension image à votre sitemap :

sitemap-images.xml

<?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://iducation.fr/articles/docker-introduction</loc>
    <image:image>
      <image:loc>https://iducation.fr/images/docker-architecture.webp</image:loc>
      <image:title>Architecture Docker avec conteneurs et volumes</image:title>
      <image:caption>Schéma de l'architecture Docker montrant conteneurs, volumes et réseau</image:caption>
    </image:image>
  </url>
</urlset>

Les images sont la cible d'optimisation à meilleur ROI sur la plupart des sites. AVIF + srcset + loading="lazy" sauf sur le LCP + alt descriptifs — quatre règles qui résolvent 90% des problèmes d'images. Pour voir leur impact, Lighthouse mesure le gain immédiatement, et Search Console confirme l'amélioration du LCP dans les données terrain quelques semaines après déploiement.