SEO des images : texte alternatif, formats, compression et lazy load

Google Images traite des milliards de requêtes chaque mois. Selon les données de Jumpshot, environ 22 % de l'ensemble des recherches sur le web concernent la recherche d'images. Pour les sites e-commerce, les plateformes de contenu et les portfolios, c'est un canal de trafic important, que la plupart des sites ignorent complètement.

L'optimisation des images influe non seulement sur la visibilité dans Google Images, mais aussi sur la recherche organique : vitesse de chargement des pages (LCP), Core Web Vitals, expérience utilisateur et, indirectement, positionnement dans la SERP principale.

zoom_in

Pourquoi optimiser les images pour le SEO

Une bonne optimisation des images répond à plusieurs enjeux à la fois : elle améliore l'accessibilité du site pour les personnes malvoyantes, accélère le chargement des pages, donne à Google un contexte clair et ouvre un canal de trafic organique supplémentaire via Google Images.

zoom_in

Les images sont la ressource la plus lourde de la plupart des pages. Non optimisées, elles ralentissent le chargement, dégradent le LCP (Largest Contentful Paint) et pèsent directement sur les scores Core Web Vitals. Depuis 2021, Google prend en compte les CWV comme signal de classement.

Texte alternatif : règles de rédaction

L'attribut alt (alt="...") est le seul moyen d'expliquer à Google ce que montre une image. Il s'affiche aussi lorsque l'image ne se charge pas, et il est lu à voix haute par les lecteurs d'écran pour les personnes malvoyantes.

Comment bien le rédiger

Règles pour le texte alternatif : décrivez ce qui est visible sur l'image ; intégrez naturellement le mot-clé visé si c'est pertinent ; ne commencez pas par des formules comme « image de… », « photo de… » ou « illustration de… », puisque Google sait déjà qu'il s'agit d'une image. Longueur optimale : 5–15 mots.

<!-- Informative image -->
<img
  src="/images/crawl-budget-chart.webp"
  alt="Crawl budget distribution chart by page type"
  width="800"
  height="450"
/>

<!-- Decorative image -->
<img
  src="/images/divider.svg"
  alt=""
  role="presentation"
/>

<!-- Image link: alt describes the link purpose -->
<a href="/tools">
  <img
    src="/images/seo-scripts-icon.webp"
    alt="SEO Scripts: tools for technical audits"
    width="64"
    height="64"
  />
</a>

Noms de fichiers et chemins

Google analyse le nom du fichier image comme signal supplémentaire. Le nom DSC_0047.jpg n'apporte aucune information ; canonical-url-diagram.webp indique le sujet et le contexte.

Formats : WebP, AVIF, JPEG, PNG

Le choix du format est l'un des principaux leviers d'optimisation. Les formats modernes (WebP, AVIF) offrent des fichiers nettement plus légers à qualité visuelle égale.

Stratégie recommandée : utilisez le WebP comme format principal, avec un JPEG de secours via l'élément <picture>. Passez à l'AVIF lorsque votre audience utilise majoritairement Chrome 85+ et Safari 16+. Réservez le SVG à toutes les images vectorielles, sans exception.

<!-- Modern approach: AVIF → WebP → JPEG -->
<picture>
  <source srcset="/images/hero.avif" type="image/avif" />
  <source srcset="/images/hero.webp" type="image/webp" />
  <img
    src="/images/hero.jpg"
    alt="SEO audit of an online store: 340% traffic growth"
    width="1200"
    height="675"
    loading="eager"
    fetchpriority="high"
  />
</picture>

Compression sans perte de qualité

La plupart des images peuvent être compressées de 30 à 70 % sans perte visible de qualité. Outils clés : Squoosh (en ligne), ImageMagick (CLI), Sharp (Node.js), Pillow (Python).

Réglages de qualité optimaux

// Next.js: automatic optimisation via next/image
import Image from 'next/image';

// next/image automatically:
// - converts to WebP/AVIF
// - generates srcset
// - adds lazy loading
// - prevents layout shift (requires width/height)
export function HeroImage() {
  return (
    <Image
      src="/images/hero.jpg"
      alt="Organic traffic growth after SEO audit"
      width={1200}
      height={675}
      priority // disables lazy load for the hero image
    />
  );
}

Lazy load et loading='eager'

Le chargement différé (lazy loading) reporte le chargement des images situées hors écran jusqu'au moment où l'utilisateur fait défiler la page jusqu'à elles. Cela réduit le poids initial de la page et accélère le Time to Interactive.

<!-- Below-fold images: lazy loading -->
<img
  src="/images/article-thumbnail.webp"
  alt="XML sitemap audit screenshot"
  width="400"
  height="225"
  loading="lazy"
/>

<!-- Hero and LCP images: eager + fetchpriority -->
<img
  src="/images/hero.webp"
  alt="Real-time SEO analytics"
  width="1200"
  height="675"
  loading="eager"
  fetchpriority="high"
/>

Dimensions, srcset et direction artistique

Indiquez toujours les attributs width et height. Ils permettent au navigateur de réserver l'espace de l'image avant son chargement et évitent le Cumulative Layout Shift (CLS), c'est-à-dire les sauts de contenu pendant le chargement.

<!-- srcset: different sizes for different screens -->
<img
  src="/images/blog-cover.webp"
  srcset="
    /images/blog-cover-480.webp 480w,
    /images/blog-cover-800.webp 800w,
    /images/blog-cover-1200.webp 1200w
  "
  sizes="(max-width: 480px) 480px, (max-width: 800px) 800px, 1200px"
  alt="Internal linking architecture guide: site structure diagram"
  width="1200"
  height="675"
  loading="lazy"
/>

L'attribut srcset permet au navigateur de choisir la taille d'image la mieux adaptée à l'écran et à sa densité de pixels. Sur un mobile à une densité de 2x, le navigateur charge la version 800 px au lieu de la version 1200 px : moins de données transférées et affichage plus rapide.

Données structurées

Le balisage Schema.org aide Google à afficher les images dans les résultats enrichis : fiches produits, recettes, articles. Les types les plus pertinents pour les images sont ImageObject, Article, Product et Recipe.

{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Image SEO: complete guide",
  "image": {
    "@type": "ImageObject",
    "url": "https://seohead.tech/images/blog/image-seo.webp",
    "width": 1200,
    "height": 675,
    "caption": "Image optimisation for search: formats, alt text, compression"
  },
  "datePublished": "2026-05-17",
  "author": {
    "@type": "Person",
    "name": "seohead"
  }
}

Sitemap d'images

Google recommande d'inclure les informations sur les images dans votre sitemap XML : cela aide à indexer les images chargées par JavaScript et apporte un contexte supplémentaire (titre, légende, licence).

<?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://seohead.tech/blog/image-seo</loc>
    <image:image>
      <image:loc>https://seohead.tech/images/blog/image-seo.webp</image:loc>
      <image:title>Image SEO: alt text, formats, compression, and lazy load</image:title>
      <image:caption>Complete guide to image optimisation for search</image:caption>
    </image:image>
  </url>
</urlset>

FAQ