image/webp

Description

image/webp est un format d’image moderne développé par Google qui offre une compression nettement supérieure à JPEG (avec perte) et PNG (sans perte), avec support natif de la transparence (canal alpha) et des animations. Supporté par tous les navigateurs modernes depuis 2020, il est aujourd’hui le format de référence pour les images web.

Usage en HTML

Avec fallback pour anciens navigateurs :

<picture>
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Description de la photo">
</picture>

Image WebP simple (navigateurs modernes uniquement) :

<img src="logo.webp" alt="Logo" width="200" height="60">

Responsive avec WebP :

<picture>
  <source
    srcset="photo-800.webp 800w, photo-1600.webp 1600w"
    sizes="(max-width: 600px) 100vw, 800px"
    type="image/webp">
  <img
    src="photo-800.jpg"
    srcset="photo-800.jpg 800w, photo-1600.jpg 1600w"
    sizes="(max-width: 600px) 100vw, 800px"
    alt="Description">
</picture>

Notes

Gains de compression : WebP offre en moyenne 25–34% de réduction par rapport à JPEG à qualité équivalente, et jusqu’à 26% par rapport à PNG pour les images sans perte.

WebP vs AVIF : AVIF est encore plus efficace que WebP (gains de 20–50% supplémentaires), mais WebP reste préférable comme format universel car il a un support plus large et des temps d’encodage plus rapides.

Animations WebP : WebP supporte les animations multi-images — une alternative légère aux GIF et une alternative aux vidéos pour les animations courtes.