WebP pour les sites web : pourquoi passer
de JPG/PNG à WebP

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

Ajoutez ceci à votre bloc serveur Nginx 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,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.

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 le diagnostic "Serve images in next-gen formats" — il devrait disparaître. Comparez le score Performance, le LCP et le Total Blocking Time
• PageSpeed Insights : Teste mobile et desktop depuis les serveurs de Google. La section "Opportunités" ne devrait plus lister l'optimisation des images comme recommandation
• 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">