En une phrase
WebP est un format d'image moderne développé par Google qui pique des astuces à la compression vidéo pour ratatiner les images dans des fichiers beaucoup plus légers que les JPEG ou les PNG, tout en gardant exactement la même qualité visuelle.
Le problème qu'il résout
Pendant très longtemps, l'aspect visuel d'Internet reposait sur une trêve fragile et tendue entre deux factions rivales : le JPEG et le PNG. (Le GIF était là aussi, à faire du bruit dans son coin, mais on y reviendra).
Si vous aviez une photo avec des millions de couleurs, vous utilisiez le JPEG. Le JPEG est lossy (avec perte), ce qui veut dire qu'il jette les données que vos yeux sont censés ignorer pour gagner de la place. Si vous aviez un logo, du texte net ou besoin d'un fond transparent, vous utilisiez le PNG. Le PNG est lossless (sans perte) : il garde chaque pixel intact, mais en contrepartie, le poids du fichier peut vite devenir astronomique. Et pour de l'animation ? Vous preniez le GIF, une antiquité de 1987 atrocement inefficace et limitée à 256 couleurs.
Le problème, c'est que les images ont fini par représenter plus de 60 % du poids moyen d'une page web téléchargée. Quand le monde est passé des PC fixes fibrés aux smartphones sur des réseaux 3G capricieux, ces formats obèses sont devenus un énorme fardeau. Des images lentes à charger signifiaient des utilisateurs frustrés, des paniers abandonnés et un web qui donnait l'impression de nager dans la mélasse.
Vers 2010, Google s'est dit que ce système à deux vitesses était pété. Ils venaient de racheter On2 Technologies, une boîte qui développait un format de compression vidéo appelé VP8. Les ingénieurs de Google ont eu une illumination : une vidéo n'est rien d'autre qu'une succession très rapide d'images fixes. Et s'ils arrachaient la partie "image fixe" de leur codec vidéo ultra-moderne VP8 pour l'empaqueter sous forme de fichier image autonome ?
WebP était né. Sa mission : devenir "l'Anneau Unique" des formats. Il gérait la compression lossy mieux que le JPEG, la compression lossless mieux que le PNG, la transparence (le canal alpha), et même l'animation pour enfin envoyer le GIF à la retraite.
Comment ça marche sous le capot
Pour comprendre pourquoi WebP est si performant, il faut regarder comment il triche. Il ne stocke pas vraiment votre image pixel par pixel ; il stocke des instructions pour deviner mathématiquement à quoi elle ressemble.
Compression Lossy : le codage prédictif
Quand WebP fonctionne en mode "lossy" (le remplaçant du JPEG), il utilise le codage prédictif, une astuce héritée directement du codec vidéo VP8.
WebP découpe votre image en "macroblocs", des grilles de 16x16 ou 4x4 pixels. Au lieu de sauvegarder indépendamment la couleur de chaque pixel d'un bloc, l'encodeur WebP regarde les blocs juste au-dessus et à gauche du bloc actuel. Il se demande : "En me basant sur les pixels que j'ai déjà dessinés, est-ce que je peux prédire à quoi ressemble ce bloc ?"
Vu que la plupart des photos ont des zones de couleur continues (comme un ciel bleu, une joue lisse ou une ombre), la prédiction tape souvent dans le mille. WebP ne sauvegarde alors que le résidu : la différence mathématique entre sa prédiction et la vraie image.
En ne sauvegardant que ces minuscules différences plutôt que les données complètes des pixels, WebP fait fondre la taille du fichier.
Compression Lossless : un autre délire
Le WebP lossless (le remplaçant du PNG) n'utilise pas VP8. Il utilise un ensemble de techniques complètement différent, conçu par Google spécialement pour le WebP. Il s'appuie sur une approche en plusieurs étapes :
- Prédiction spatiale : Comme son frangin lossy, il essaie de deviner les pixels en fonction de leurs voisins.
- Transformation des couleurs : Il sépare les données de couleur pour trouver les redondances.
- Le Vert est roi : Il utilise le canal vert comme base de référence, et prédit les valeurs de rouge et de bleu en fonction du vert (parce que l'œil humain est particulièrement sensible au vert).
- Compression LZ77 : Pour finir, il prend toutes ces données optimisées et les passe à la moulinette d'une version avancée de l'algorithme de compression à dictionnaire LZ77.
La structure du fichier (RIFF)
Tout au fond, WebP est emballé dans un conteneur léger appelé RIFF (Resource Interchange File Format). RIFF est une structure de fichier balisée, ce qui veut dire qu'un fichier WebP est organisé en "chunks" (morceaux). Ça permet au format d'ajouter facilement des métadonnées (comme les données EXIF de votre appareil photo) ou des profils colorimétriques ICC sans péter l'image de base.
| Fonctionnalité | JPEG | PNG | GIF | WebP |
|---|---|---|---|---|
| Compression Lossy | Oui | Non | Non | Oui |
| Compression Lossless | Non | Oui | Oui | Oui |
| Transparence (Alpha) | Non | Oui | 1-bit | Oui (Lossy & Lossless) |
| Animation | Non | Non | Oui | Oui |
| Gain moyen | Référence | Référence | Référence | ~25 à 34% plus léger |
Sur le terrain
L'avalanche du e-commerce
Un site de e-commerce de fringues de taille moyenne a remarqué que son taux de rebond crevait le plafond sur mobile. Un audit a révélé que les pages de leur catalogue téléchargeaient près de 15 mégaoctets de JPEG haute résolution. Le navigateur mobile passait tout son temps à parser des images géantes de gilets en laine.
L'équipe d'ingénierie a mis en place une pipeline automatisée pour servir des images WebP aux navigateurs compatibles. En ajustant la compression lossy, ils ont gardé la netteté visuelle exacte nécessaire pour montrer les textures des tissus, mais ont fait chuter le payload de la page à 3,5 mégaoctets. Le temps de chargement s'est effondré de 4 secondes. Conséquence : les taux de conversion sur mobile ont bondi de 18 %.
La morale : Le poids des images est inversement proportionnel au chiffre d'affaires. Quand vous servez des fichiers plus petits, les utilisateurs restent assez longtemps pour acheter un truc.
La Hero Image transparente
Un web designer a pondu une superbe landing page pour un nouveau produit SaaS. La section hero mettait en avant une illustration 3D complexe d'une baie de serveurs flottant au-dessus d'un fond en dégradé dynamique animé en CSS. Pour que ça marche, l'image du serveur devait avoir un fond transparent.
Le designer l'a exportée en PNG-24 avec un canal alpha. À cause des ombrages complexes et des millions de couleurs du rendu 3D, le PNG pesait un bon gros 2,2 mégaoctets. Le charger donnait l'impression de retourner en 2004 en 56k.
Le développeur a pris ce PNG et l'a converti en WebP. Il a utilisé un super-pouvoir spécifique au WebP : le RGB lossy avec un canal alpha lossless. Ça voulait dire que les couleurs étaient compressées comme un JPEG, mais que la transparence restait parfaite au pixel près, sans le moindre effet d'escalier. Le fichier WebP résultant pesait 210 kilo-octets — une réduction de 90 % sans aucune perte de qualité visible.
La morale : Vous n'avez plus besoin de choisir entre des couleurs riches façon photo et un fond transparent. WebP gère les deux en même temps.
Le blog bourré de mèmes
Un blog de pop-culture très lu s'appuyait massivement sur les GIF animés pour montrer des extraits de films et des réactions. Un seul article pouvait contenir cinq GIF, siphonnant 20 mégaoctets de données et transformant les vieux PC portables en réacteurs d'avion parce que le CPU galérait à décoder ce format préhistorique.
Ils ont migré leur bibliothèque de médias vers du WebP animé. Parce que les GIF stockent chaque frame comme une image complète, alors que le WebP animé utilise une compression de type vidéo pour ne stocker que les différences entre les frames, les économies ont été colossales. Un GIF de 5 Mo devenait un WebP de 800 Ko. L'utilisation du CPU a chuté en piqué.
La morale : La place du format GIF est dans un musée. Pour des animations courtes tournant en boucle sur le web, les formats modernes comme le WebP (ou de vraies vidéos MP4/WebM) sont largement supérieurs.
Erreurs courantes et pièges à éviter
- Le piège du Double-Lossy : Convertir un JPEG archi-compressé et bourré d'artefacts en WebP lossy est une très mauvaise idée. L'algorithme de WebP va carrément essayer de préserver parfaitement les gros blocs baveux du JPEG en considérant qu'ils font partie de l'image, ce qui peut vous donner un fichier plus lourd ou une image encore plus floue. Convertissez toujours depuis la source de la meilleure qualité possible (comme un fichier RAW, un PNG haute def ou le JPEG non compressé d'origine).
- Oublier la balise HTML
<picture>: Même si WebP profite d'un support mondial d'environ 97 % aujourd'hui, ça a longtemps été une fête réservée à Google. Safari chez Apple a traîné des pieds pour gérer le WebP jusqu'à fin 2020. Si vous devez supporter des navigateurs du paléolithique, vous ne pouvez pas juste jeter un.webpdans une balise<img>. Vous devez utiliser l'élément<picture>pour offrir un fallback :<picture> <source srcset="image.webp" type="image/webp"> <img src="image.jpg" alt="Un fallback fiable"> </picture> - Croire que le WebP sera toujours le plus léger : Le WebP est fantastique, mais ce n'est pas magique. Pour des formes vectorielles ultra-simples avec des aplats de couleur (genre un logo minimaliste), un SVG sera presque toujours plus léger et évolutif à l'infini. Dans le même style, les formats next-gen plus récents comme l'AVIF battent souvent le WebP sur les purs ratios de compression, même si l'AVIF demande beaucoup plus de puissance de calcul pour l'encodage.
- Ignorer le temps d'encodage côté serveur : WebP demande nettement plus de ressources CPU pour la compression qu'un JPEG. Si vous générez des images WebP à la volée quand l'utilisateur les demande, le temps CPU requis pour l'encodage de l'image peut carrément créer un délai qui ruine le gain de bande passante. La conversion WebP doit se faire en amont (pendant le build ou à l'upload), et pas dynamiquement lors du premier rendu.
Pourquoi vous devez l'avoir dans votre radar
Si vous codez des trucs pour Internet, la perf web n'est plus un luxe ; c'est un besoin fondamental. Les moteurs de recherche comme Google pénalisent activement les sites lents dans leurs classements, en accordant un gros poids à des métriques comme les Core Web Vitals (en particulier le Largest Contentful Paint, ou LCP). Vu que le "contenu le plus grand" à l'écran est souvent une image, optimiser cette image est le moyen le plus rapide d'améliorer votre SEO.
En plus, la bande passante coûte de l'argent — autant pour vous (les frais d'egress de données chez AWS sont notoirement exorbitants) que pour vos utilisateurs avec des forfaits data limités dans les pays en développement.
Dès que vous gérez des avatars uploadés par les utilisateurs, des landing pages marketing massives, des galeries photos ou des catalogues e-commerce, WebP est le choix par défaut le plus pragmatique des années 2020. Il offre le meilleur compromis entre un support navigateur généralisé, une excellente qualité visuelle et une réduction spectaculaire du poids des fichiers.
Pour aller plus loin
- Google Developers: An Image Format for the Web - La documentation et la référence officielle ultra-technique du format WebP, directement par ses créateurs.
- MDN Web Docs: Image file type and format guide - L'excellente analyse de Mozilla pour savoir quand utiliser WebP face aux autres formats d'images du web.
- RFC 6386: VP8 Data Format and Decoding Guide - La spec fondatrice de l'IETF pour le codec vidéo VP8, le moteur de base qui propulse la compression WebP lossy.
- CanIUse: WebP image format - Le tracker de référence pour la compatibilité des navigateurs, montrant exactement quelles versions supportent WebP à l'échelle mondiale.