WebP vs PNG
Les deux stockent des photographies, mais avec des compromis différents. Voici où ils diffèrent réellement, et comment trancher.
Short answer
Si l'image est une photo ou une capture de photo, WebP sera nettement plus léger. S'il s'agit de dessin au trait, d'un logo ou de texte que vous voulez garder exact au pixel, restez en PNG.
Why this comes up
La plupart des gens qui arrivent sur cette comparaison ne pèsent pas deux formats sur le fond. Ils ont un PNG qui pèse inexplicablement 4 Mo et veulent l'alléger. Ce cadrage compte, car la raison de ces 4 Mo détermine si WebP aide seulement — et parfois la bonne réponse est que PNG n'a jamais été le problème.
Comparaison directe
| Propriété | WebP | PNG |
|---|---|---|
| Compression | Avec perte | Sans perte |
| Transparence | Oui | Oui |
| Taille habituelle | 65-75% d’un JPEG équivalent | 300-500% d’un JPEG équivalent |
| Compatibilité | Pris en charge par tous les navigateurs actuels et la plupart des applications | S’ouvre partout, y compris avec des logiciels vieux de plusieurs décennies |
| Provient généralement de | Sites web optimisant leur poids de chargement | Captures d’écran, logos et graphiques |
What actually differs
PNG est sans perte par définition ; WebP, le plus souvent, non
PNG enregistre chaque pixel exactement tel qu'il lui est donné : c'est pourquoi il ne se dégrade jamais et pourquoi il est volumineux. WebP possède un mode avec perte et un mode sans perte, et les chiffres de taille cités viennent presque toujours du premier. Comparer « WebP » à PNG sans préciser le mode, c'est comparer deux choses différentes. Le WebP sans perte fait gagner environ 25 % par rapport à PNG ; le WebP avec perte peut faire gagner 80 % ou plus.
Si PNG est énorme sur les photos, c'est pour une raison structurelle
PNG compresse en repérant les répétitions dans les rangées de pixels. Une capture d'un panneau de réglages est surtout faite d'aplats répétés : elle se compresse à merveille. Une photographie n'a presque aucune répétition exacte — chaque pixel diffère légèrement de son voisin — donc PNG stocke presque tout tel quel et le fichier gonfle à trois à cinq fois un JPEG. Ce n'est pas un défaut : c'est ce que « sans perte » signifie sur des données bruitées.
Les deux gardent la transparence : ce n'est donc pas ce qui tranche
Cela mérite d'être dit, car c'est l'idée reçue qui pousse beaucoup de gens vers PNG par réflexe. WebP gère un canal alpha 8 bits complet dans ses deux modes. Un logo sur fond transparent n'a pas besoin d'être en PNG pour rester transparent : il doit être en PNG si vous le voulez exact au pixel.
Which to use
Use WebP for
Photographies, captures majoritairement photographiques, et toute diffusion web où le fichier sera regardé plutôt que retravaillé.
Use PNG for
Captures de texte et d'interface, logos et dessin au trait, tout ce qui repassera par une phase d'édition, et tout fichier devant survivre sans altération à des enregistrements répétés.
One thing that catches people out
Le WebP avec perte est une mauvaise idée pour les captures de texte
La compression avec perte est calibrée pour le détail photographique et gère mal les contours francs noir sur blanc : les lettres se parent d'un halo gris et les traits fins bavent. Une capture de terminal ou d'éditeur de code est le pire cas. Si le fichier est lourd et plein de texte, prenez du WebP sans perte ou restez en PNG : le gain est moindre mais le texte reste lisible.