Diffuser des images aux formats nouvelle génération :
guide WebP

Que signifie « Diffusez des images aux formats nouvelle génération » ?

Lighthouse et PageSpeed Insights affichent cet avertissement lorsqu'une page charge des images JPEG ou PNG qui seraient nettement plus légères en WebP ou AVIF. L'audit liste chaque image avec l'économie estimée. Les versions récentes regroupent ce conseil dans l'insight Améliorer la diffusion des images.

1. Lancez PageSpeed Insights et notez les URL d'images listées.
2. Créez des versions WebP (ou AVIF) : qualité 75–85 pour les photos, lossless pour les captures d'écran.
3. Servez-les via un élément <picture>, des règles serveur, un CDN ou un plugin CMS (détails ci-dessous).
4. Relancez le test. Les images converties disparaissent de la liste.

L'élément picture avec fallback JPG

L'élément HTML <picture> est la méthode la plus fiable pour servir du WebP avec un fallback pour les navigateurs anciens. Il permet au navigateur de choisir le meilleur format disponible sans JavaScript :

<picture>
  <source srcset="hero.webp" type="image/webp">
  <source srcset="hero.jpg" type="image/jpeg">
  <img src="hero.jpg" alt="Bannière hero" width="1200" height="630"
       loading="lazy" decoding="async">
</picture>

Quand le navigateur prend en charge WebP, il télécharge hero.webp. Sinon, il bascule sur hero.jpg. La balise <img> sert de fallback ultime et porte les attributs alt, width, height et de chargement.

Pour les images responsives, combinez l'élément <picture> avec srcset et sizes pour servir différentes résolutions en fonction de la largeur du viewport :

<picture>
  <source
    srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1200.webp 1200w"
    sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 600px"
    type="image/webp">
  <img
    srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
    sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 600px"
    src="photo-800.jpg" alt="Photo produit" width="800" height="600"
    loading="lazy" decoding="async">
</picture>

Négociation de contenu côté serveur

La négociation de contenu analyse l'en-tête Accept du navigateur et sert le WebP de manière transparente — sans modification du HTML. Quand un navigateur demande une image en incluant image/webp dans son en-tête Accept, le serveur répond avec la version WebP.

Configuration Nginx

Placez la directive map dans le bloc http et le bloc location dans votre bloc serveur pour servir les variantes WebP lorsqu'elles existent aux côtés des fichiers originaux :

map $http_accept $webp_suffix {
    default   "";
    "~*webp"  ".webp";
}

server {
    location ~* \.(jpe?g|png)$ {
        add_header Vary Accept;
        try_files $uri$webp_suffix $uri =404;
    }
}

Cette configuration recherche un fichier .webp à côté de l'original (par ex. photo.jpg.webp en regard de photo.jpg). Si le navigateur prend en charge WebP et que le fichier existe, Nginx le sert. L'en-tête Vary: Accept garantit que les CDN et les caches proxy stockent des versions distinctes selon les capacités du navigateur.

Règles Apache .htaccess

Pour les serveurs Apache, ajoutez ces règles de réécriture à votre fichier .htaccess :

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

Header append Vary Accept env=REDIRECT_accept

Le principe est identique : si le navigateur accepte WebP et qu'une variante .webp existe sur le disque, Apache la sert de manière transparente. Aucune modification du HTML n'est nécessaire. L'option E=accept:1 définit la variable dont la dernière ligne a besoin pour ajouter l'en-tête Vary: Accept.

Solutions de conversion automatique par CDN

La solution la plus simple pour la plupart des sites est de laisser votre CDN gérer la conversion WebP automatiquement. Vous uploadez vos originaux JPG/PNG, et le CDN sert du WebP optimisé aux navigateurs compatibles avec zéro modification de code.

Les solutions CDN gèrent automatiquement la négociation de contenu, la mise en cache et l'invalidation du cache. Elles sont recommandées pour les sites dynamiques où les utilisateurs ou les éditeurs de contenu uploadent des images — vous ne pouvez pas prévoir quelles images apparaîtront, la conversion automatique est donc indispensable.

Configuration WebP sous WordPress

WordPress 5.8+ prend en charge les uploads WebP nativement, mais vous avez besoin d'un plugin pour convertir les images existantes et les servir de manière optimale :

• ShortPixel Image Optimizer : Convertit les images existantes en WebP à la volée. Sert le WebP via l'élément <picture> ou une réécriture .htaccess. Niveau gratuit : 100 images/mois
• Imagify : Conversion en lot avec trois niveaux de qualité (normal, agressif, ultra). S'intègre avec WP Rocket pour la mise en cache. Niveau gratuit : 20 Mo/mois
• EWWW Image Optimizer : Génère automatiquement des copies WebP lors de l'upload. Réécrit les URLs d'images via le plugin ou un CDN. Optimisation locale gratuite et illimitée
• WebP Express : Plugin léger uniquement dédié à la conversion WebP. Configure .htaccess ou utilise un service PHP. Gratuit et open source

Pour la plupart des sites WordPress, ShortPixel ou EWWW sont les choix les plus sûrs. Ils gèrent la chaîne complète : conversion à l'upload, génération des variantes WebP, réécriture du HTML pour servir le WebP, et fallback JPG/PNG pour les navigateurs non compatibles.

Intégration dans les outils de build

Pour les sites statiques et les frameworks JavaScript (React, Vue, Next.js, Nuxt), intégrez la génération WebP dans votre pipeline de build afin que les images soient converties automatiquement à la compilation.

Webpack (image-minimizer-webpack-plugin)

const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");

module.exports = {
  optimization: {
    minimizer: [
      new ImageMinimizerPlugin({
        generator: [{
          preset: "webp",
          implementation: ImageMinimizerPlugin.sharpGenerate,
          options: { encodeOptions: { webp: { quality: 80 } } }
        }]
      })
    ]
  }
};

Vite (vite-plugin-imagemin)

import viteImagemin from "vite-plugin-imagemin";

export default defineConfig({
  plugins: [
    viteImagemin({
      webp: { quality: 80 }
    })
  ]
});

La conversion au build convient bien aux sites avec un ensemble d'images connu (pages marketing, documentation, blogs). Pour les contenus uploadés par les utilisateurs, préférez les solutions CDN qui traitent les images dynamiquement.

Réglages de qualité recommandés

Le choix du bon réglage de qualité WebP est crucial. Trop bas, des artefacts apparaissent ; trop haut, vous perdez le bénéfice en taille de fichier. Voici les réglages recommandés selon le type de contenu :

Mesurer l'impact

Après avoir implémenté WebP, mesurez l'amélioration réelle des performances avec ces outils :

• Google Lighthouse : Lancez des audits avant et après la migration. Vérifiez l'audit « Diffusez des images aux formats nouvelle génération » (dans les versions récentes, l'insight « Améliorer la diffusion des images ») ; les images converties devraient disparaître de la liste. Comparez le score Performance, le LCP et le Total Blocking Time
• PageSpeed Insights : Teste mobile et desktop depuis les serveurs de Google. Les recommandations sur les images (section Opportunités dans les anciens rapports, Insights dans les nouveaux) ne devraient plus lister les images converties
• WebPageTest : Fournit des graphiques en cascade détaillés montrant les temps de chargement individuels des images. Comparez les vues filmstrip avant et après pour visualiser les différences de rendu
• Onglet Réseau des Chrome DevTools : Filtrez par type "Img" et comparez la taille totale transférée. Vérifiez que l'en-tête Content-Type affiche bien image/webp pour les images converties
• Core Web Vitals de la Search Console : Surveillez les données de terrain sur 2–4 semaines après la migration. Recherchez des améliorations du LCP et du pourcentage global d'URLs "Bonnes"

Considérations sur le chargement différé

WebP et le lazy loading fonctionnent ensemble pour maximiser les performances, mais certains détails d'implémentation sont importants :

• Images au-dessus de la ligne de flottaison : Ne mettez PAS en lazy loading votre image hero ni aucune image visible au chargement initial. Utilisez loading="eager" (valeur par défaut) et ajoutez fetchpriority="high" pour l'image LCP
• Images sous la ligne de flottaison : Utilisez loading="lazy" sur toutes les autres images. Le navigateur diffère leur chargement jusqu'à ce que l'utilisateur fasse défiler à leur proximité
• Définissez toujours les dimensions : Incluez des attributs width et height explicites sur chaque balise <img> pour éviter le Cumulative Layout Shift (CLS)
• Décodage asynchrone : Ajoutez decoding="async" pour permettre au navigateur de décoder les images hors du thread principal

<!-- Image hero : chargement immédiat, haute priorité -->
<img src="hero.webp" alt="..." width="1200" height="630"
     fetchpriority="high" decoding="async">

<!-- Sous la ligne de flottaison : chargement différé -->
<img src="product.webp" alt="..." width="600" height="400"
     loading="lazy" decoding="async">

Pourquoi l'avertissement persiste après la conversion

• Ancien HTML ou cache : la page ou le CDN sert encore le JPEG d'origine. Videz les caches et vérifiez le Content-Type de l'image dans les DevTools.
• Arrière-plans CSS : <picture> ne couvre pas background-image. Utilisez la négociation côté serveur ou image-set() en CSS.
• Images tierces : publicités, intégrations et widgets chargent des images que vous ne contrôlez pas.
• Règle serveur qui ne s'applique pas : pour les réécritures basées sur l'en-tête Accept, la requête doit inclure image/webp et un fichier .webp doit exister à côté de l'original.