Ce que WebP sans perte vous fait réellement gagner par rapport à PNG

La version courte

WebP sans perte est souvent plus petit que PNG pour les mêmes pixels. C’est la raison pratique pour laquelle les gens l’utilisent.

Mais le mot « souvent » compte. WebP sans perte n’est pas un remplacement magique pour chaque PNG. Il tend à offrir les plus gros gains sur les images avec transparence, les captures d’écran, les captures d’interface et les contenus mêlant graphisme et photo. Il peut faire gagner peu, ou parfois perdre, sur de très petits éléments, des PNG à palette fortement optimisés et des icônes simples.

Si vous optimisez un vrai site web, la bonne question n’est pas « WebP est-il meilleur que PNG ? » C’est : « Lesquels de mes PNG deviennent significativement plus petits en WebP sans perte, sans créer de problèmes de compatibilité ou de workflow ? »

C’est une question plus précise, et beaucoup plus facile à trancher.

Ce que signifie « sans perte » ici

Sans perte signifie que les pixels décodés correspondent exactement aux pixels source. Si un PNG est converti en WebP sans perte puis décodé à nouveau, les pixels de l’image devraient être identiques.

Cela ne signifie pas que le fichier est le même. Les métadonnées, la gestion du profil colorimétrique, les chunks PNG annexes, les informations de gamma, les horodatages et les chunks propres à certains outils peuvent être modifiés, supprimés ou représentés différemment selon votre chaîne de conversion.

Cette distinction compte si vous travaillez avec des images d’archive, des workflows d’impression, de l’imagerie scientifique, des preuves juridiques ou toute situation où le conteneur du fichier transporte des informations non liées aux pixels mais importantes. Pour une diffusion web ordinaire, la plupart des équipes se soucient principalement des pixels visibles, de la transparence, des dimensions et de la cohérence des couleurs.

Si vous publiez des images fournies par les utilisateurs, les métadonnées posent aussi une question de confidentialité. Nous avons traité ce sujet plus largement dans comment supprimer les métadonnées EXIF avant de partager des photos en ligne, mais le même principe s’applique ici : l’optimisation d’image doit expliciter ce qu’elle préserve et ce qu’elle supprime.

Pourquoi PNG se compresse bien, et où il atteint ses limites

PNG est un très bon format. Il est devenu un standard du web pour de bonnes raisons :

• Il est sans perte.
• Il prend en charge la transparence alpha.
• Il est largement pris en charge.
• Il est prévisible et simple à manipuler.
• Il est excellent pour les aplats graphiques, les captures d’écran, les logos et les éléments d’interface.

La compression PNG fonctionne en filtrant les lignes de l’image, puis en appliquant une compression DEFLATE. Cette combinaison est efficace, surtout lorsque les pixels voisins sont similaires.

Le problème n’est pas que PNG soit mauvais. Le problème est que PNG est ancien. Son modèle de compression dispose de moins d’astuces que les formats plus récents. Une fois un PNG optimisé avec un bon encodeur, vous pouvez encore laisser des octets inutiles parce que le format lui-même ne peut pas représenter certains motifs aussi efficacement que WebP sans perte.

C’est là que WebP sans perte intervient.

Ce que WebP sans perte fait différemment

WebP sans perte utilise un système de compression conçu spécifiquement pour les images, plutôt qu’une couche de compression généraliste ajoutée à des lignes filtrées. Sous le capot, il peut utiliser des techniques comme le codage prédictif, les transformations de couleur, les palettes, les références arrière et le codage entropique pour représenter de façon compacte les motifs de pixels répétitifs ou prévisibles.

Vous n’avez pas besoin de mémoriser les détails d’implémentation. Le modèle mental utile est le suivant :

PNG compresse bien les lignes. WebP sans perte dispose de davantage de façons de décrire la structure de l’image.

Cette flexibilité supplémentaire explique pourquoi WebP sans perte peut fréquemment produire des fichiers plus petits à partir de la même image source.

Google a historiquement décrit les images WebP sans perte comme étant environ 26 % plus petites que PNG en moyenne dans ses propres études. Prenez cela comme un repère directionnel, pas comme une promesse. Vos images ne sont pas une moyenne. Votre design system, vos captures d’écran, vos photos produit, vos illustrations, vos éléments exportés et vos téléversements CMS auront leur propre comportement.

Là où WebP sans perte fait généralement le plus gagner

Images transparentes

PNG est couramment utilisé en raison de la transparence alpha. WebP sans perte prend également en charge l’alpha, et le compresse souvent efficacement.

C’est utile pour :

• Détourages de produits
• Stickers et badges
• Superpositions d’interface
• Diagrammes avec arrière-plan transparent
• Logos exportés plus grands que nécessaire

Les gains peuvent être sensibles lorsque le canal alpha contient de grandes zones prévisibles, des bords doux ou des formes répétées. Si vous avez un catalogue rempli d’images produit transparentes, WebP sans perte mérite d’être testé tôt.

Captures d’écran et captures d’interface

Les captures d’écran contiennent souvent de grandes zones plates, des composants d’interface répétés, du texte, des icônes, des ombres et quelques zones photographiques. Ce mélange peut être délicat pour PNG, surtout à grandes dimensions.

WebP sans perte gère souvent bien ces images. Une capture d’écran d’interface pleine page qui pèse 900 KB en PNG optimisé peut devenir un WebP sans perte de 500 à 700 KB. Parfois, le gain est plus important. Parfois, il est plus faible. Mais la catégorie est prometteuse.

Si ces captures apparaissent dans de la documentation, des pages marketing, des parcours d’onboarding ou des études de cas, l’effet cumulé peut être réel.

Contenu mixte illustration et image

Beaucoup de visuels web modernes ne sont ni de pures illustrations ni de pures photos. Pensez à une image hero contenant une interface produit, des dégradés, de petites icônes, des libellés de texte et des photos intégrées.

PNG peut la préserver parfaitement, mais produire un fichier volumineux. WebP avec perte ou AVIF peuvent créer des artefacts autour du texte et des contours s’ils sont poussés trop loin. WebP sans perte peut être un juste milieu pertinent lorsque la netteté des contours compte.

Pour un arbre de décision plus large sur les formats d’image, y compris AVIF et WebP avec perte, consultez Formats d’image en 2026 : quand AVIF bat WebP et quand ce n’est pas le cas.

Là où PNG peut encore être meilleur

Petites icônes et éléments simples

Pour les très petits fichiers, le surcoût du format compte. Une icône PNG de 650 octets n’est pas une candidate évidente à la conversion. WebP pourrait faire gagner 80 octets, ou devenir plus volumineux.

À cette échelle, la complexité opérationnelle peut dépasser le bénéfice. Si le fichier est déjà minuscule, ne bloque pas le rendu et reste longtemps en cache, vous avez probablement mieux à corriger.

PNG à palette soigneusement optimisés

Certains PNG sont beaucoup plus petits qu’on ne l’imagine parce qu’ils utilisent une palette limitée. Un bon PNG en couleurs indexées peut être difficile à battre pour des graphismes simples.

C’est particulièrement vrai pour :

• Petits logos
• Pixel art
• Icônes plates
• Diagrammes simples
• Graphismes avec peu de couleurs

Soyez prudent lorsque vous comparez WebP à des exports PNG négligés. Si le PNG vient directement d’un outil de design avec des métadonnées inutiles et de mauvais réglages de compression, WebP peut sembler spectaculairement meilleur. Cela ne signifie pas que WebP bat un PNG bien optimisé avec la même marge.

Un test équitable compare WebP sans perte à un PNG optimisé, pas au fichier qui se trouvait simplement avoir été téléversé.

Images qui devraient plutôt être avec perte

C’est l’erreur discrète : des équipes convertissent du PNG en WebP sans perte alors que l’image n’aurait pas dû être en PNG au départ.

Les photographies sont le cas habituel. Une photographie en couleurs complètes enregistrée en PNG peut être énorme. La convertir en WebP sans perte peut réduire le fichier, mais il restera généralement beaucoup plus volumineux qu’un WebP avec perte de haute qualité ou qu’un AVIF.

Si l’utilisateur ne peut pas percevoir la différence, le sans perte est souvent le mauvais objectif. La photographie produit, les images éditoriales, les arrière-plans et les portraits relèvent généralement d’un format avec perte avec des réglages de qualité raisonnables.

Le sans perte devrait être réservé aux cas où les pixels exacts comptent : captures d’écran d’interface, diagrammes, graphismes riches en texte, transparence, graphiques générés et ressources qui se dégradent visiblement sous compression avec perte.

Ce que cela économise en plus des octets

Le gain évident est la taille de transfert. Des fichiers image plus petits signifient généralement moins de bande passante, des téléchargements plus rapides et un meilleur comportement sur les connexions lentes.

Mais il existe des bénéfices secondaires :

• Moins de données utilisées par les visiteurs sur des forfaits mesurés
• Remplissage plus rapide du cache image
• Bande passante CDN réduite
• Volume de stockage et de sauvegarde plus faible à grande échelle
• Moins de pression sur les budgets de performance

Ces économies ne sont pas réparties uniformément. Un seul PNG de 2 MB converti en WebP de 900 KB compte plus que cinquante icônes réduites de 100 octets chacune.

C’est pourquoi l’optimisation d’image doit être priorisée selon l’impact sur la page, pas selon une idéologie de format. Si Lighthouse signale la diffusion des images, lisez-le comme un indice, pas comme un verdict. Notre guide sur comment lire un rapport Lighthouse sans paniquer explique comment séparer les vrais problèmes de performance des diagnostics bruyants.

Le compromis du coût de décodage

Des fichiers plus petits ne sont pas la seule variable de performance. Les navigateurs doivent aussi décoder les images avant de les peindre.

Le décodage PNG est mature et généralement rapide. Le décodage WebP est également largement pris en charge et efficace, mais il peut coûter davantage de CPU dans certains cas. Sur les appareils modernes, c’est rarement un blocage, mais sur les téléphones d’entrée de gamme, les pages très chargées en images ou les grands éléments au-dessus de la ligne de flottaison, cela mérite d’être mesuré.

La règle pratique : si WebP sans perte réduit un gros PNG de 30 à 50 %, le gain réseau domine généralement. S’il réduit un petit PNG de 3 %, le compromis ne vaut probablement pas la peine qu’on s’en soucie.

Le travail de performance est rempli de ces décisions de seuil. N’optimisez pas chaque octet avec la même intensité.

Une méthode de test simple

Utilisez un lot représentatif, pas une seule image.

Créez un dossier avec des exemples provenant de votre site réel :

• Logos et icônes
• Captures d’écran
• Détourages de produits
• Diagrammes
• PNG téléversés dans le CMS
• Images d’aperçu social
• Grands visuels hero

Comparez ensuite trois choses :

1. Le PNG original tel que téléversé
2. Un PNG optimisé
3. Une version WebP sans perte

Pour les workflows en ligne de commande, les équipes utilisent souvent des outils comme oxipng, pngcrush, zopflipng ou cwebp -lossless. L’outil exact compte moins que la discipline consistant à comparer ce qui est comparable.

Suivez :

• Taille de fichier
• Égalité des pixels après décodage
• Rendu visuel dans les navigateurs cibles
• Exactitude de la transparence
• Apparence des couleurs
• Temps de build
• Friction avec le CMS ou le workflow de design

Un simple tableur suffit. Ajoutez la taille du fichier original, la taille du PNG optimisé, la taille du WebP sans perte, le pourcentage économisé et la page où l’image apparaît.

Triez ensuite par octets totaux économisés. Cet ordre de tri vous dira généralement quoi faire.

Diffusion : ne cassez pas les anciens clients à la légère

La prise en charge de WebP est désormais large dans les navigateurs modernes. Pour la plupart des sites publics, son utilisation est sûre. Cela dit, si vous avez des webviews intégrées, des clients e-mail, des navigateurs d’entreprise hérités, des applications natives ou des crawlers inhabituels dans l’équation, testez avant de remplacer purement et simplement PNG.

Le modèle prudent consiste à conserver PNG comme fallback et à servir WebP lorsqu’il est pris en charge :

<picture>
  <source srcset="diagram.webp" type="image/webp">
  <img src="diagram.png" alt="Diagram showing the checkout flow">
</picture>

Cette approche est ennuyeuse, et c’est une bonne chose. Les utilisateurs avec prise en charge de WebP reçoivent le fichier plus petit. Tous les autres reçoivent le PNG.

Si votre système de build applique des empreintes aux ressources et que votre CDN les met correctement en cache, ce n’est pas difficile à maintenir. Si votre CMS rend les formats alternatifs pénibles, commencez par les images les plus grandes et les plus répétées au lieu d’essayer de convertir toute la médiathèque en un sprint.

Confidentialité et traitement local

La conversion d’image se fait souvent dans des pipelines de build ou des services média côté serveur. C’est très bien pour de nombreuses équipes. Mais si vous manipulez des captures d’écran sensibles, des téléversements clients ou des documents internes, soyez attentif à l’endroit où les fichiers sont traités.

Les outils d’image côté navigateur sont devenus suffisamment bons pour de nombreuses conversions simples, prévisualisations et vérifications de métadonnées. Il y a des limites, mais le traitement local peut réduire les téléversements inutiles d’images privées. Nous avons traité ces compromis dans pourquoi traiter les images dans le navigateur est un gain de confidentialité.

Pour les ressources internes, le point principal est la clarté de la politique. Sachez si les images quittent l’appareil, où les versions transformées sont stockées et si les métadonnées sont préservées.

Une règle pratique

Utilisez WebP sans perte lorsque ces trois conditions sont vraies :

• La source est actuellement en PNG.
• Des pixels exacts ou une transparence nette comptent.
• WebP sans perte fait gagner une quantité significative après comparaison avec un PNG optimisé.

Conservez PNG lorsque :

• Le fichier est minuscule.
• Le PNG est déjà optimisé par palette et compétitif.
• Les contraintes de compatibilité sont inhabituelles.
• La complexité opérationnelle ne vaut pas les octets économisés.

Utilisez WebP avec perte ou AVIF lorsque :

• L’image est photographique.
• Les pixels exacts ne comptent pas.
• Un réglage de qualité peut réduire fortement la taille sans dommage visible.

La meilleure stratégie d’image consiste rarement à utiliser un seul format partout. C’est un petit ensemble de règles appliquées de façon cohérente.

<!-- tool-cta:start -->

💡 Essayez ceci : Passez le même PNG dans Image Converter pour produire une version WebP sans perte et comparez directement les tailles de fichier.

<!-- tool-cta:end -->

Alors, que fait réellement gagner WebP sans perte ?

Il économise des octets là où PNG a épuisé ses astuces de compression. Parfois, cela signifie un modeste 10 %. Parfois, cela signifie presque diviser par deux une grande image transparente. À l’échelle d’un vrai site, les gains se concentrent généralement sur une minorité de ressources.

C’est le point important. WebP sans perte n’est pas une amélioration morale par rapport à PNG. C’est une option pratique pour un travail précis : des images web sans perte plus petites, avec transparence et une large prise en charge par les navigateurs modernes.

Utilisez-le là où les chiffres le justifient. Laissez PNG tranquille là où ce n’est pas le cas.