WebP est un format d’image créé par Google qui, à qualité visuelle équivalente, produit généralement des fichiers 25 % à 35 % plus légers que le JPEG, et nettement plus légers que le PNG lorsque l’image contient de la transparence. Convertir une image en WebP consiste à la réencoder avec un encodeur WebP (depuis le navigateur, le terminal ou du code) et à la servir avec <picture> ou directement avec <img>, puisque tous les navigateurs actuels le prennent en charge.
Dans cet article, vous verrez ce qu’est exactement WebP, trois façons de convertir des images, comment les servir correctement en HTML et dans quels cas il vaut mieux s’en passer.
Ce qu’est WebP
WebP est un format d’image à compression avec perte (comme le JPEG) et sans perte (comme le PNG), qui prend aussi en charge la transparence (canal alpha) et l’animation (comme le GIF). Google l’a publié en 2010 et la documentation officielle se trouve toujours sur developers.google.com/speed/webp.
Ce qui compte pour un site est simple : avec WebP, vous pouvez remplacer JPEG, PNG et GIF par un seul format plus efficace, sans changer l’aspect visible de l’image.
Quel gain réel attendre
Google indique dans sa documentation que les images WebP avec perte sont 25 % à 34 % plus petites que le JPEG à indice de qualité équivalent, et que les WebP sans perte sont environ 26 % plus petites que le PNG. Le gain concret dépend de l’image : une photographie très détaillée se compresse moins bien qu’une capture d’écran avec des aplats.
À titre de référence pratique, en préparant cet article, l’image de couverture de l’article lui-même (un graphique PNG de 1200×630 pixels avec du texte et des dégradés) a été convertie avec sharp. Voici les tailles obtenues :
| Format et réglage | Taille |
|---|---|
| PNG d’origine | 35 Ko |
| WebP sans perte | 28 Ko |
| WebP avec perte, qualité 80 | 24 Ko |
| JPEG qualité 85 (même image) | 50 Ko |
| WebP qualité 85 (à partir du JPEG) | 30 Ko |
C’est un exemple unique, pas une statistique, mais il illustre deux choses : le WebP sans perte allège déjà un PNG, et pour un graphique avec du texte, le JPEG est de loin la pire option.
Trois façons de convertir des images en WebP
1. Depuis le navigateur, sans rien installer
Si vous n’avez que quelques images à convertir, l’option la plus rapide est un outil en ligne qui travaille dans votre navigateur. Sur AIMRAN Tools, vous pouvez convertir des images en WebP (et en AVIF, PNG ou JPG) en glissant le fichier ; la conversion se fait sur votre appareil, l’image n’est envoyée à aucun serveur.
C’est l’option adaptée aux images d’un article, à un logo ou à une capture ponctuelle.
2. Depuis le terminal avec cwebp
cwebp est l’encodeur officiel. Il s’installe avec le gestionnaire de paquets de votre système (apt install webp sur Debian/Ubuntu, brew install webp sur macOS) et s’utilise ainsi :
# Qualité 80 (bon équilibre pour les photographies)
cwebp -q 80 photo.jpg -o photo.webp
# Sans perte (captures, graphiques, logos avec transparence)
cwebp -lossless logo.png -o logo.webp
# Convertir toutes les images JPG d’un dossier
for f in *.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; doneLe paramètre -q va de 0 à 100. Entre 75 et 85 est généralement la plage raisonnable pour les photographies ; en dessous de 60, des artefacts apparaissent dans les dégradés et les contours.
3. Depuis Node.js avec sharp
Si vous générez des images dans un processus de build (par exemple pour un site statique), sharp est la bibliothèque la plus utilisée :
import sharp from 'sharp';
await sharp('entree.jpg')
.resize({ width: 1200, withoutEnlargement: true })
.webp({ quality: 80 })
.toFile('sortie.webp');L’avantage de le faire au build est de pouvoir redimensionner et convertir en une seule étape, et de générer plusieurs largeurs pour srcset. Des frameworks comme Astro, Next.js ou Nuxt intègrent déjà sharp dans leurs composants d’image.
Comment servir du WebP en HTML
Option simple : <img> directement
Selon Can I use, WebP est pris en charge par Chrome, Edge, Firefox, Safari (depuis la version 14, de 2020) et les principaux navigateurs mobiles. Si vous n’avez pas besoin de prendre en charge des navigateurs antérieurs à 2020, vous pouvez utiliser <img> directement :
<img src="/img/photo.webp" alt="Description de la photo" width="1200" height="800" loading="lazy" decoding="async" />Remarquez width et height : les déclarer permet au navigateur de réserver l’espace avant de télécharger l’image et évite les sauts de mise en page, l’un des problèmes mesurés par les Core Web Vitals.
Option avec alternative : <picture>
Si vous voulez aussi proposer de l’AVIF (encore plus efficace) ou conserver un JPEG de secours, utilisez <picture> :
<picture>
<source srcset="/img/photo.avif" type="image/avif" />
<source srcset="/img/photo.webp" type="image/webp" />
<img src="/img/photo.jpg" alt="Description de la photo" width="1200" height="800" loading="lazy" decoding="async" />
</picture>Le navigateur choisit la première source dont il prend en charge le type. L’<img> final est obligatoire : c’est lui qui s’affiche et qui porte l’alt, les dimensions et le loading.
Quand il vaut mieux ne pas convertir en WebP
- Si vous servez déjà de l’AVIF. L’AVIF compresse mieux que WebP pour la plupart des photographies. WebP reste utile comme alternative intermédiaire dans
<picture>. - Images que l’utilisateur va télécharger et modifier. Si vous proposez une ressource à ouvrir dans un éditeur, PNG ou JPEG est plus compatible avec les logiciels de bureau.
- Images minuscules. Une icône de 2 Ko ne justifie pas un format de plus ; un SVG est souvent la meilleure option.
- Recompresser un JPEG très compressé. Si l’original a déjà des artefacts, le recompresser en WebP avec perte les cumule. Partez toujours du fichier de meilleure qualité disponible.
Erreurs fréquentes
- Convertir sans redimensionner. Un WebP de 4000 pixels de large reste énorme. Réduisez d’abord à la largeur maximale d’affichage.
- Utiliser le sans perte pour des photographies. Le mode lossless sur des photos produit des fichiers plus lourds que le JPEG d’origine. Réservez-le aux graphiques, captures et logos.
- Oublier l’
alt. Changer de format ne change pas l’obligation de décrire l’image pour qui ne la voit pas. - Supprimer les originaux. Gardez les fichiers sources : si vous passez un jour à l’AVIF ou à un autre format, vous aurez besoin de la meilleure qualité possible comme point de départ.
Conclusion
Convertir des images en WebP est l’une des optimisations au meilleur rapport effort/bénéfice pour un site : moins d’octets, même qualité visible et prise en charge universelle dans les navigateurs actuels. Pour quelques images, un outil dans le navigateur comme celui d’AIMRAN Tools suffit ; pour des projets avec beaucoup d’images, automatisez la conversion avec cwebp ou sharp dans le build, déclarez toujours width, height et alt, et utilisez <picture> si vous voulez ajouter l’AVIF devant.