Convertir une Image en WebP : Optimiser ses Images pour le Web

Le format WebP, créé par Google, offre une compression 25 à 35 % meilleure que le JPG et le PNG. Convertir vos images en WebP est l'une des optimisations les plus efficaces pour accélérer le chargement de votre site web et améliorer votre score PageSpeed.

Pour l'opération inverse, consultez notre guide pour convertir un WebP en PNG.

Pourquoi Passer au WebP ?

Les Avantages

• Fichiers plus légers : 25-35 % plus petit que le JPG, 26 % plus petit que le PNG à qualité équivalente
• Compression avec et sans perte : combine les avantages du JPG (photos) et du PNG (graphiques)
• Transparence : supporte le canal alpha comme le PNG
• Animation : peut remplacer les GIF avec une meilleure compression
• SEO : Google favorise les sites rapides ; des images légères améliorent le Core Web Vitals (LCP)

Compatibilité Navigateurs

Le WebP est supporté par tous les navigateurs modernes :

• Chrome (depuis 2014)
• Firefox (depuis 2019)
• Safari (depuis 2020, macOS Big Sur / iOS 14)
• Edge (depuis 2018)

Seuls les très anciens navigateurs (IE11, Safari < 14) ne le supportent pas. Pour ces cas, utilisez la balise <picture> avec un fallback JPG/PNG.

Méthode 1 : Outils en Ligne

★ Recommandé : ImageConvert.to

Rendez-vous sur ImageConvert.to pour convertir vos images en WebP directement dans votre navigateur. Glissez-déposez vos images JPG, PNG, AVIF, TIFF, BMP, GIF, HEIC ou PSD, sélectionnez WebP comme format de sortie et ajustez la qualité avec le curseur de qualité pour trouver le bon compromis taille/qualité.

• Conversion par lots : traitez toutes les images de votre site en une seule opération. Glissez 50 ou 100 JPG, récupérez 50 ou 100 WebP.
• Contrôle de la qualité : un curseur permet d'ajuster la compression des formats lossy, exactement comme dans Squoosh, mais avec le batch en plus.
• 100 % local : aucune image n'est envoyée sur un serveur. Parfait si vous travaillez avec des images clients ou des maquettes confidentielles.
• Aucune limite : pas d'inscription, pas de filigrane, pas de cap journalier. Convertissez autant que nécessaire.

Squoosh (Google)

Squoosh est l'outil de référence de Google pour la compression d'images :

1. Rendez-vous sur squoosh.app
2. Importez votre image
3. Choisissez WebP comme format de sortie
4. Ajustez la qualité avec le curseur (comparaison visuelle avant/après)
5. Téléchargez

Squoosh est idéal pour trouver le meilleur compromis qualité/taille grâce à son aperçu en temps réel. Limité à un fichier à la fois.

CloudConvert

CloudConvert propose des options avancées :

• Batch : plusieurs fichiers à la fois
• Qualité configurable (1-100)
• Choix de la méthode de compression (lossy ou lossless)
• 25 conversions gratuites par jour

Convertio

Simple et rapide :

1. Importez JPG, PNG, GIF, BMP ou TIFF
2. Choisissez WebP en sortie
3. Convertissez

Gratuit jusqu'à 100 Mo.

Méthode 2 : cwebp (Outil Officiel Google)

L'outil en ligne de commande de Google pour la conversion en WebP :

Installation

# Mac
brew install webp

# Linux (Debian/Ubuntu)
apt install webp

# Windows : téléchargez depuis developers.google.com/speed/webp

Utilisation

# Conversion simple (qualité 80%)
cwebp -q 80 image.jpg -o image.webp

# Compression sans perte (lossless)
cwebp -lossless image.png -o image.webp

# Avec redimensionnement
cwebp -q 80 -resize 1200 0 image.jpg -o image.webp

Conversion par Lots

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

# Convertir tous les PNG en lossless
for f in *.png; do
    cwebp -lossless "$f" -o "${f%.png}.webp"
done

Méthode 3 : Intégration dans un Workflow Web

Avec un Bundler (Webpack, Vite)

Pour convertir automatiquement à chaque build :

Vite (avec vite-plugin-image-optimizer) :

// vite.config.js
import { ViteImageOptimizer } from 'vite-plugin-image-optimizer';

export default {
  plugins: [
    ViteImageOptimizer({
      png: { quality: 80 },
      jpeg: { quality: 80 },
      webp: { quality: 80 },
    }),
  ],
};

Webpack (avec 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 } } },
        }],
      }),
    ],
  },
};

Avec un CDN (Cloudflare, Imgix)

Les CDN modernes convertissent automatiquement en WebP :

• Cloudflare : activez "Polish" dans les paramètres Speed → Optimization
• Imgix : ajoutez ?fm=webp à l'URL de l'image
• Cloudinary : ajoutez f_webp dans la transformation

L'avantage : le CDN sert le WebP aux navigateurs compatibles et le JPG/PNG aux autres, automatiquement.

Balise HTML <picture> (Fallback)

Pour servir du WebP avec un fallback pour les anciens navigateurs :

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="Description" loading="lazy">
</picture>

Méthode 4 : Logiciels de Retouche

Photoshop

Depuis Photoshop 23.2 (2022), le WebP est supporté nativement :

• Fichier → Enregistrer sous ou Exporter → Exporter sous
• Choisissez WebP, réglez la qualité

GIMP

GIMP supporte le WebP depuis la version 2.10 :

1. Fichier → Exporter sous
2. Nommez le fichier avec .webp
3. Réglez la qualité et le type de compression (lossy/lossless)

Sharp (Node.js)

Pour les développeurs, Sharp est la bibliothèque de référence :

const sharp = require('sharp');

sharp('input.jpg')
  .webp({ quality: 80 })
  .toFile('output.webp');

Choisir la Bonne Qualité

Recommandation : commencez à 80 et ajustez visuellement. Pour les photos, 75-80 est souvent suffisant. Pour les graphiques et textes, utilisez le mode lossless. ImageConvert.to et Squoosh proposent tous deux un curseur de qualité pour ajuster ce paramètre facilement.