PNG vs WebP : le choc des générations
Pendant près de 20 ans, la règle d’or du webdesign était simple : le JPG pour les photos, le PNG pour les images nécessitant un fond transparent (canal alpha). Mais le format WebP, poussé par Google depuis 2010 et adopté massivement à partir de 2020, a rebattu les cartes.
Doit-on aujourd’hui bannir totalement le PNG de nos sites web ? Réponse nuancée — mais le verdict penche très clairement.
Le problème du PNG : un poids lourd structurel
Le PNG (Portable Network Graphics) utilise une compression lossless (sans perte). C’est parfait pour préserver la netteté parfaite des textes, des tracés vectoriels et des aplats de couleur, mais cela produit des fichiers extrêmement lourds.
Quelques ordres de grandeur observés en production :
- une bannière illustrée 1920×600 avec dégradés en PNG : 800 Ko à 1,4 Mo ;
- un logo complexe avec ombres portées : 180 à 350 Ko ;
- une capture d’écran d’interface 1440p : 2,5 à 4 Mo.
Sur un réseau 4G mobile (médian ~12 Mbps en France selon nPerf), ces poids représentent 0,5 à 2,5 secondes de chargement par image. Multipliez par 15 images sur une page produit, et votre LCP explose.
L’avantage écrasant du WebP
Le WebP fait figure de couteau suisse ultime :
- il gère la transparence (comme le PNG) ;
- il peut utiliser une compression lossy (avec pertes invisibles à l’œil nu, comme le JPG) ou lossless (au choix) ;
- il supporte l’animation (en alternative aux GIF lourds) ;
- à qualité visuelle équivalente, un fichier WebP est en moyenne 26 % plus léger qu’un PNG, et l’écart peut monter à 80 % sur des illustrations avec des dégradés complexes.
Comparatif détaillé : 1 image, 3 formats
Image source : illustration vectorielle exportée en 1200×800 pixels, avec transparence et dégradés.
| Format | Poids | Compression | Transparence | Compatibilité |
|---|---|---|---|---|
| PNG-24 | 612 Ko | Sans perte | Oui (alpha 8-bit) | 100 % |
| WebP lossless | 312 Ko | Sans perte | Oui (alpha 8-bit) | 96 % |
| WebP lossy 85 | 88 Ko | Avec perte | Oui (alpha 8-bit) | 96 % |
| AVIF 80 | 54 Ko | Avec perte | Oui (alpha 10-bit) | 92 % |
Sur cet exemple, passer du PNG au WebP lossy fait gagner 524 Ko soit 85 % — sans différence visuelle perceptible.
Compatibilité navigateurs : la fin du débat
Aujourd’hui, le WebP est supporté par 96 % des navigateurs mondiaux (source : caniuse.com, mai 2026). L’excuse de l’incompatibilité n’est plus valable :
- Chrome ≥ 32 (2014)
- Firefox ≥ 65 (2019)
- Safari ≥ 14 (macOS Big Sur, iOS 14 — septembre 2020)
- Edge ≥ 18 (2018)
Le seul cas réellement bloquant reste Internet Explorer, dont la part de marché mondiale est tombée sous 0,3 % et que Microsoft a officiellement retiré depuis juin 2022.
Le verdict : quand utiliser quoi ?
- Gardez le PNG uniquement pour :
- de très petits éléments graphiques (icônes simples en pixel art, favicons), où le poids est déjà de l’ordre de quelques kilo-octets ;
- les fichiers sources livrés à un imprimeur (qui exige souvent du PNG, du TIFF ou du PSD) ;
-
les exports de logiciels de design (Figma, Sketch) avant la publication web.
-
Passez au WebP pour tout le reste :
- logos complexes avec ombres ou détourage ;
- illustrations de blog ;
- bannières marketing ;
- photos produit (en alternative au JPG, le WebP est ~30 % plus léger à qualité égale) ;
- captures d’écran d’interface.
Et l’AVIF, alors ?
Si vous visez l’optimisation maximale, l’AVIF (~50 % plus léger
que le WebP en lossy) est le futur. Mais sa compatibilité plafonne
encore à 92 % et son encodage est nettement plus lent. La meilleure
pratique en 2026 : servir l’AVIF avec un fallback WebP via la balise
<picture> :
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="…" loading="lazy">
</picture>
Nettoyez vos assets sans fuite de données
Si vous gérez le site web d’un client, uploader ses assets graphiques (parfois sous NDA, parfois en avant-première de lancement produit) sur un convertisseur en ligne tiers est une faille de sécurité et un risque RGPD.
Convertissez vos PNG en WebP en un clic avec MediaBay. Le code s’exécute directement dans votre navigateur : le secret industriel de vos clients reste sur votre poste de travail. Aucun fichier ne touche un serveur tiers, aucune fuite possible.
Écrit par Nikola Markovic · publié le 17 mai 2026.