Comment Convertir une Image en WebP (et Pourquoi le Faire)

Si vous avez déjà lancé un test sur Google PageSpeed Insights et reçu l'avertissement « Diffusez des images au format nouvelle génération », Google vous demande exactement cela : convertir vos images JPG et PNG en WebP. C'est l'une des interventions ayant le plus d'impact sur la performance d'un site — et aussi l'une des plus simples à mettre en œuvre.

Pourquoi convertir en WebP ?

Le WebP est un format développé par Google et lancé en 2010, conçu spécifiquement pour le web. Il utilise des algorithmes de compression plus modernes que le JPG et le PNG et offre, pour une qualité visuelle identique :

• 25 à 35 % de poids en moins qu'un JPG en mode lossy (compression avec perte)
• 20 à 30 % de poids en moins qu'un PNG en mode lossless (compression sans perte)
• Prise en charge de la transparence (canal alpha) — contrairement au JPG, qui n'en a pas
• Prise en charge des animations — contrairement au PNG, qui n'en a pas nativement

En pratique, l'impact est réel. Une galerie de produits e-commerce avec 20 photos de 300 Ko chacune en JPG (6 Mo au total) peut descendre à 4 Mo en WebP pour la même qualité visuelle — une réduction de 33 % du poids de la page. Pour Google, cela signifie un LCP plus rapide, une meilleure note au PageSpeed et une amélioration potentielle du classement.

Quand ne pas utiliser le WebP

Bien qu'il soit le meilleur format pour le web moderne, certaines situations où le WebP n'est pas encore le bon choix :

• E-mail marketing : les clients de messagerie comme Outlook et Apple Mail ont un support inconstant du WebP. Pour les e-mails HTML, JPG et PNG restent plus sûrs.
• Impression graphique : les imprimeries et logiciels d'impression traditionnels ne prennent pas en charge le WebP. Pour les fichiers destinés à l'impression, utilisez du JPG haute qualité ou du PNG.
• Plateformes avec restrictions de format : YouTube n'accepte pas le WebP pour l'upload de miniatures (il accepte JPG et PNG). Certains formulaires de systèmes anciens exigent du JPG. Vérifiez le format accepté avant de convertir.
• Fichiers devant être ouverts par n'importe qui sur l'ordinateur : les utilisateurs finaux qui cliquent sur des liens de téléchargement et tentent d'ouvrir le fichier dans la visionneuse par défaut de Windows peuvent rencontrer des problèmes avec le WebP sur d'anciennes versions du système.

Méthode 1 — Conversion en ligne (la plus rapide, rien à installer)

Pour convertir des images ponctuelles — ou quand vous avez besoin d'un résultat rapide sans rien configurer — un convertisseur en ligne est le chemin le plus direct. Le Convertisseur d'Image d'ImageTools convertit JPG, PNG et d'autres formats en WebP directement dans le navigateur, sans envoyer les fichiers vers des serveurs externes.

1. Accédez au Convertisseur d'Image.
2. Sélectionnez ou glissez les images vers la zone d'upload.
3. Choisissez WebP comme format de sortie.
4. Téléchargez les images converties individuellement ou en ZIP si plusieurs fichiers.

Méthode 2 — WordPress (automatique pour tout le site)

Pour les sites WordPress, l'approche la plus efficace est d'utiliser un plugin qui convertit et sert le WebP automatiquement — sans avoir à retraiter chaque image manuellement.

WordPress 6.1+ (conversion native)

À partir de la version 6.1, WordPress convertit les images en WebP automatiquement lors de l'upload, à condition que le serveur prenne en charge la bibliothèque libwebp (la plupart des serveurs modernes avec PHP 8+ l'ont). Vous n'avez rien à faire — WordPress génère des versions WebP des images et sert le format approprié à chaque navigateur automatiquement.

Pour vérifier si c'est actif : allez dans Réglages → Médias et cherchez l'option de conversion WebP. Si elle n'est pas disponible, le serveur ne le supporte pas — envisagez un plugin.

Avec des plugins (versions plus anciennes ou plus de contrôle)

Les plugins les plus utilisés pour la conversion WebP sur WordPress sont :

• ShortPixel Image Optimizer — convertit les nouvelles images à l'upload et permet de retraiter toute la bibliothèque existante. Gratuit jusqu'à 100 images/mois.
• Imagify — interface simple, conversion automatique et option d'optimisation par lot. Plan gratuit disponible.
• WebP Express — plugin spécifiquement dédié au WebP, convertit et configure les règles serveur automatiquement.

Méthode 3 — Ligne de commande avec cwebp (pour développeurs)

Google distribue gratuitement l'outil cwebp — l'encodeur officiel du WebP — pour la conversion via terminal. C'est la méthode la plus rapide pour convertir de gros lots d'images sur un serveur ou dans un pipeline de build.

Installation

# Ubuntu / Debian
sudo apt-get install webp

# macOS (Homebrew)
brew install webp

# Windows — téléchargez le binaire sur : https://developers.google.com/speed/webp/download

Conversion basique

# Convertir un fichier JPG en WebP avec une qualité de 80
cwebp -q 80 photo.jpg -o photo.webp

# Convertir PNG en WebP lossless (sans perte)
cwebp -lossless logo.png -o logo.webp

# Convertir tous les JPG d'un dossier (Bash)
for f in *.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; done

Le paramètre -q contrôle la qualité (0–100). Pour le web, des valeurs entre 75 et 85 offrent le meilleur équilibre entre qualité visuelle et taille de fichier. Utilisez -lossless pour les images nécessitant une compression sans perte (logos, captures d'écran avec du texte).

Méthode 4 — Node.js avec sharp (pour pipelines de build)

Pour les projets utilisant Node.js — comme des sites en Next.js, Gatsby, Nuxt ou tout build automatisé — la bibliothèque sharp est l'option la plus efficace pour la conversion WebP en pipeline :

// npm install sharp

const sharp = require('sharp');

// Convertir JPG en WebP avec une qualité de 80
sharp('photo.jpg')
  .webp({ quality: 80 })
  .toFile('photo.webp');

// Convertir PNG en WebP lossless
sharp('logo.png')
  .webp({ lossless: true })
  .toFile('logo.webp');

// Convertir tous les fichiers d'un dossier
const fs = require('fs');
const path = require('path');

fs.readdirSync('./images')
  .filter(f => /\.(jpg|jpeg|png)$/i.test(f))
  .forEach(file => {
    const input = path.join('./images', file);
    const output = path.join('./images', file.replace(/\.[^.]+$/, '.webp'));
    sharp(input).webp({ quality: 80 }).toFile(output);
  });

sharp utilise la bibliothèque native libvips et est nettement plus rapide que les solutions JavaScript pures — idéal pour générer des versions WebP lors du build de sites statiques.

Comment implémenter le WebP avec fallback pour anciens navigateurs

Bien que la compatibilité du WebP dépasse 97 % en 2026, il peut encore exister des contextes où un fallback est nécessaire — systèmes d'entreprise avec IE11, appareils très anciens, ou simplement pour une garantie maximale de compatibilité.

La solution correcte est la balise HTML <picture>, qui permet de déclarer des sources d'image alternatives par ordre de préférence :

<!-- Le navigateur utilise le WebP s'il le supporte, sinon le JPG -->
<picture>
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Description de la photo" width="800" height="600">
</picture>

<!-- Avec plusieurs tailles pour les écrans Retina -->
<picture>
  <source
    srcset="photo-800.webp 800w, photo-1600.webp 1600w"
    type="image/webp">
  <source
    srcset="photo-800.jpg 800w, photo-1600.jpg 1600w"
    type="image/jpeg">
  <img src="photo-800.jpg" alt="Description de la photo"
    width="800" height="600" loading="lazy">
</picture>

Le navigateur évalue les sources dans l'ordre déclaré : s'il supporte le WebP, il utilise le <source> avec type="image/webp". Sinon, il retombe sur le JPG dans <img>. La balise <img> finale est obligatoire — c'est elle qui définit l'alt, les dimensions et le comportement par défaut.

Configurer le serveur pour servir le WebP automatiquement (Apache)

Une alternative à <picture> consiste à configurer le serveur pour détecter si le navigateur accepte le WebP et servir automatiquement la bonne version. Sur Apache, ajoutez au .htaccess :

<IfModule mod_rewrite.c>
  RewriteEngine On

  # Sert le .webp s'il existe et si le navigateur l'accepte
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_FILENAME} \.(jpe?g|png)$
  RewriteCond %{REQUEST_FILENAME}\.webp -f
  RewriteRule ^ %{REQUEST_URI}.webp [T=image/webp,L]
</IfModule>

<IfModule mod_headers.c>
  Header append Vary Accept env=REDIRECT_accept
</IfModule>

AddType image/webp .webp

Avec cette configuration, il suffit d'avoir les fichiers .webp à côté des originaux dans le même dossier. Apache détecte si le navigateur accepte le WebP via l'en-tête Accept et sert la bonne version sans aucun changement dans le HTML.

Vérifier le résultat sur PageSpeed

Après avoir implémenté le WebP, lancez Google PageSpeed Insights (pagespeed.web.dev) sur l'URL du site. L'avertissement « Diffusez des images au format nouvelle génération » doit disparaître ou diminuer significativement. Dans le panneau des opportunités, vous verrez le gain estimé en Ko pour chaque image encore non convertie.

Autre façon de vérifier : ouvrez Chrome DevTools (F12), allez dans l'onglet Network, filtrez par « Img » et regardez la colonne « Type » des images chargées. Si webp apparaît, la conversion fonctionne.

Quel niveau de qualité utiliser pour la conversion ?

La qualité WebP suit la même logique que le JPG : des valeurs plus élevées préservent plus de détails mais produisent des fichiers plus lourds. La différence est que, pour une même qualité visuelle, le WebP utilise généralement une valeur de qualité inférieure de 10 à 15 points au JPG équivalent.

Questions fréquentes