Optimiser les images web : WebP, lazy loading et compression

Pourquoi les images sont votre premier levier performance

Selon HTTP Archive, les images représentent en moyenne 1,2 Mo sur les 2,4 Mo d'une page web médiane en 2025. C'est votre premier levier d'optimisation, avec un ratio effort/impact imbattable.

Une bonne optimisation des images peut vous faire gagner :

• 0,5 à 2 secondes sur le LCP (Core Web Vitals)
• 20 à 40 points sur votre score Lighthouse
• 30 à 60% de bande passante économisée

Choisir le bon format

WebP — le standard moderne

WebP offre une compression 25 à 35% meilleure que JPEG à qualité équivalente, avec support transparent (comme PNG). Supporté par 97%+ des navigateurs en 2025.

<!-- Avec fallback pour vieux navigateurs -->
<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description de l'image" width="800" height="600">
</picture>

AVIF — encore mieux, avec précautions

AVIF compresse encore 20% mieux que WebP, mais l'encodage est lent et le support reste à 90%.

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description" width="800" height="600">
</picture>

SVG pour les icônes et logos

Toujours utiliser SVG pour les illustrations vectorielles : taille réduite et rendu parfait à toutes les résolutions.

Conversion en masse avec Sharp (Node.js)

const sharp = require('sharp');
const fs = require('fs');
const path = require('path');

async function convertirDossier(dossierSrc, dossierDest) {
  const fichiers = fs.readdirSync(dossierSrc)
    .filter(f => /\.(jpg|jpeg|png)$/i.test(f));

  for (const fichier of fichiers) {
    const src  = path.join(dossierSrc, fichier);
    const dest = path.join(dossierDest, fichier.replace(/\.[^.]+$/, '.webp'));

    await sharp(src)
      .resize(1200, null, { withoutEnlargement: true }) // Largeur max 1200px
      .webp({ quality: 82 })                            // Qualité 82 = bon compromis
      .toFile(dest);

    const avant = fs.statSync(src).size;
    const apres = fs.statSync(dest).size;
    console.log(`${fichier}: ${(avant/1024).toFixed(0)}KB → ${(apres/1024).toFixed(0)}KB (-${Math.round((1-apres/avant)*100)}%)`);
  }
}

convertirDossier('./images-source', './images-optimisees');

Ou en PHP avec la bibliothèque Intervention Image :

composer require intervention/image

use Intervention\Image\ImageManager;
use Intervention\Image\Drivers\Gd\Driver;

$manager = new ImageManager(new Driver());

$image = $manager->read('photo.jpg')
    ->scale(width: 1200)
    ->toWebp(quality: 82);

$image->save('photo.webp');

Lazy loading natif

<!-- loading="lazy" : le navigateur charge l'image quand elle approche du viewport -->
<img src="image.webp" 
     alt="Description"
     width="800" height="600"
     loading="lazy">

<!-- loading="eager" pour les images above-the-fold (visible sans scroll) -->
<img src="hero.webp"
     alt="Image principale"
     width="1200" height="600"
     loading="eager"
     fetchpriority="high">

Règle d'or : les 2 premières images d'une page doivent avoir loading="eager" (ou ne pas avoir loading="lazy"). Pour toutes les autres : loading="lazy".

Images responsive avec srcset

<!-- Fournir plusieurs tailles, le navigateur choisit la meilleure -->
<img
  src="photo-800.webp"
  srcset="photo-400.webp 400w,
          photo-800.webp 800w,
          photo-1200.webp 1200w,
          photo-1600.webp 1600w"
  sizes="(max-width: 640px) 100vw,
         (max-width: 1024px) 50vw,
         800px"
  alt="Description"
  width="800" height="533"
  loading="lazy">

Compression sans perte de qualité perceptible

Niveaux de qualité recommandés :

Dimensionner côté CSS

Évitez les images redimensionnées par CSS — c'est du poids téléchargé inutilement :

/* ❌ Image de 2000px affichée en 200px = 10x plus lourd que nécessaire */
.thumbnail {
  width: 200px;
  height: 200px;
  object-fit: cover;
}

/* ✅ Servir directement une image de 400px (x2 pour les écrans Retina) */

Vérifier l'impact avec Lighthouse

npx lighthouse https://votresite.fr --only-audits=uses-optimized-images,uses-webp-images,uses-responsive-images,efficient-animated-content --output=json

Les 4 audits images à viser au vert avant de passer à autre chose.

Bilan : une checklist images web pour chaque déploiement

Avant chaque mise en ligne, vérifiez : format WebP ou AVIF utilisé, attributs width/height présents sur toutes les images web, loading=lazy sur les images hors écran, et fetchpriority=high sur l'image principale. Ces quatre points suffisent à éliminer 90 % des problèmes de performance liés aux images web.