WebP produit des fichiers 25 à 35 pour cent plus petit que la PNG pour la même image, et il conserve l’arrière-plan transparent pour lequel PNG est célèbre. Ce simple fait explique pourquoi Google a créé WebP et pourquoi la plupart des sites Web modernes le proposent désormais. Le contre-argument de PNG est la portée : il s'ouvre dans tous les programmes jamais écrits, y compris les logiciels qui n'ont jamais entendu parler de WebP. Le choix ne porte donc pas sur le format qui est techniquement supérieur, car WebP l'est clairement. Il s’agit de savoir si vous optimisez pour un site Web moderne ou pour une compatibilité garantie partout. Ce guide compare les deux en profondeur en termes de compression, de transparence, de modes de qualité, de prise en charge du navigateur, d'animation et de vitesse de page, puis vous donne une règle claire pour choisir.

Qu'est-ce que WebP et pourquoi Google l'a créé

WebP est un format d'image lancé par Google en 2010, basé sur la technologie de compression de son codec vidéo VP8. L’objectif était simple : réduire la taille des images Web pour que les pages se chargent plus rapidement. Google disposait des données nécessaires pour savoir que les images dominent le poids des pages et que réduire d'un tiers chaque image accélérerait considérablement le Web. WebP a été conçu dès le départ pour remplacer trois formats à la fois, correspondant La transparence du PNG, la compression photographique du JPG et l'animation du GIF dans un seul contenant. Cette ambition est la raison pour laquelle elle peut faire des choses que la PNG ne peut pas faire.

Qu'est-ce que la PNG et pourquoi elle perdure

PNG est arrivé en 1996 en remplacement sans brevet du GIF, utilisant la compression DEFLATE sans perte et ajoutant un canal alpha complet. C'est devenu la norme pour les logos, les icônes, les captures d'écran et tout graphique nécessitant un arrière-plan transparent. Près de trois décennies de soutien universel constituent son fossé. Chaque navigateur, système d'exploitation, client de messagerie, suite bureautique et éditeur d'images lit PNG sans configuration. Lorsqu’une image doit absolument s’ouvrir dans un endroit inconnu, PNG est le format qui n’échoue jamais.

Taille du fichier : WebP gagne clairement

WebP se compresse mieux que PNG dans pratiquement tous les scénarios. Pour un logo typique ou un graphique d'interface utilisateur avec transparence, attendez-vous à un 25 à 35 pour cent de réduction passer de PNG à WebP sans perte. Passez en mode avec perte de WebP et les économies augmentent considérablement, souvent de 60 à 70 %, tout en conservant le canal alpha. La PNG n’a aucune option avec perte, elle ne peut donc pas rivaliser sur le bas de gamme. Sur un site contenant des dizaines d’éléments d’image, cette différence se chiffre en centaines de kilo-octets par chargement de page.

L'écart vient d'une compression plus intelligente. L'algorithme DEFLATE de PNG est une méthode à usage général empruntée à ZIP, efficace pour trouver une répétition littérale. WebP utilise un codage prédictif spécialement conçu pour les images, devinant chaque bloc de ses voisins et stockant uniquement la différence. Cette approche basée sur l'image permet de réaliser des économies que DEFLATE ne peut pas voir, c'est pourquoi un format de 2010 bat si systématiquement celui de 1996.

Transparence : les deux l'ont, WebP fait plus

Contrairement au JPG, les deux formats comportent un canal alpha complet, de sorte qu'un logo reste transparent dans l'un ou l'autre. Mais WebP ajoute quelque chose que PNG ne peut pas correspondre : transparence en mode avec perte. La transparence du PNG n'est fournie qu'avec une compression sans perte, donc un graphique semi-transparent doit être stocké avec un poids total sans perte. WebP vous permet d'avoir à la fois un arrière-plan transparent et une compression agressive, ce qui est exactement ce dont un logo PNG lourd a besoin. Pour les actifs de l'interface utilisateur et les découpes de produits qui doivent rester transparents tout en pesant moins, cette combinaison est l'argument le plus fort de WebP.

Qualité : modes sans perte et avec perte

WebP propose les deux modes, ce qui le rend flexible, contrairement à PNG :

WebP sans perte correspond exactement au PNG, pixel pour pixel, tout en produisant un fichier plus petit. Il n’y a pas de compromis sur la qualité, seulement un gain de taille.
WebP avec perte supprime les détails comme le fait JPG, réduisant considérablement les fichiers et contrairement à JPG, il peut toujours conserver la transparence.

PNG propose uniquement du sans perte, c'est pourquoi il reste important. Si vous avez besoin d'une copie parfaite, WebP sans perte vous la donne en plus petit. Si vous pouvez accepter une perte invisible, WebP avec perte vous donne une fraction de la taille. Quoi qu'il en soit, il existe un paramètre WebP qui bat le PNG.

Prise en charge du navigateur et des logiciels

C'est le seul véritable avantage de la PNG, et il se rétrécit. Chaque navigateur moderne prend en charge WebP, y compris Chrome, Firefox, Safari et Edge, donc sur le Web ouvert, la question de compatibilité est essentiellement réglée. Les lacunes résident ailleurs : certains anciens logiciels de bureau, certains clients de messagerie, les anciennes versions d'Office et les plates-formes héritées rejettent toujours WebP. Les formulaires de téléchargement sont l’autre piège, car beaucoup n’acceptent que les formats JPG et PNG et refusent catégoriquement un fichier WebP.

Le résumé honnête est donc que WebP est sans danger pour votre site Web et risqué pour les fichiers que vous transmettez à des systèmes inconnus. Le PNG reste la solution de repli universelle pour tout ce qui échappe à votre contrôle.

Animation : WebP remplace également le GIF

Une capacité qui manque tout simplement à PNG est l’animation. Le PNG standard contient une seule image et, bien que l'extension APNG existe, la prise en charge a toujours été incohérente. WebP prend en charge animation nativement avec alpha complet, produisant des fichiers beaucoup plus petits que le GIF équivalent tout en affichant des millions de couleurs au lieu des 256 du GIF. Si vous choisissez entre des formats pour un graphique en boucle courte, WebP bat de manière décisive le PNG et le GIF.

Pourquoi WebP accélère les sites Web

Le poids de la page alimente directement La plus grande peinture de contenu, l'un des Core Web Vitals de Google et un signal de classement confirmé. Les images sont généralement l'élément le plus lourd d'une page, donc les couper d'un tiers a un effet mesurable sur le temps de chargement, sur le score LCP et sur le taux de rebond. Les pages plus rapides se convertissent également mieux, c'est pourquoi le travail de performance est récompensé deux fois.

Le modèle pratique utilisé par la plupart des sites est progressif : servez WebP aux navigateurs qui le prennent en charge et revenez au PNG ou au JPG pour le reste. Le HTML moderne gère cela automatiquement avec l'élément image, et la plupart des systèmes de gestion de contenu et services d'images le font pour vous. Vous obtenez la rapidité sans rien casser pour les clients plus âgés.

Quand utiliser chaque format

Utiliser WebP pour les images de sites Web, en particulier les logos et les icônes transparents, où des fichiers plus petits signifient des pages plus rapides.
Utiliser WebP lorsque vous avez besoin de transparence et de petite taille, car c'est le seul format courant offrant les deux.
Utiliser PNG lorsque l'image doit s'ouvrir dans n'importe quel programme, y compris les anciens logiciels et clients de messagerie.
Utiliser PNG pour les formulaires de téléchargement et les systèmes qui répertorient explicitement les formats acceptés et omettent WebP.
Utiliser PNG en tant que maître des archives, car le support universel compte plus que la taille d'un fichier que vous conservez pour toujours.

Comment convertir PNG en WebP

La conversion ne nécessite aucune installation. Ouvrez notre convertisseur, ajoutez votre PNG et choisissez l'option qui conserve la transparence, qui exporte WebP. Le traitement s'exécute localement via l'API HTML5 Canvas, donc rien n'est téléchargé et vous pouvez regrouper plusieurs fichiers à la fois. L'arrière-plan transparent reste intact tandis que le fichier devient nettement plus léger. La procédure complète est dans le Guide PNG vers WebP.

Et AVIF ?

À savoir pour le contexte : AVIF est un format plus récent qui se compresse encore mieux que WebP, souvent 20 % plus petit, et prend également en charge la transparence et l'animation. La prise en charge des navigateurs est désormais bonne, mais légèrement en retard sur WebP, et la prise en charge des logiciels est encore plus en retard. Pour la plupart des sites aujourd'hui, WebP constitue le choix pragmatique offrant le meilleur équilibre entre économies et support, AVIF méritant d'être surveillé à mesure que son adoption se développe. La PNG reste le pays de repli dans les deux cas.

Le jugement

WebP gagne sur le plan technique de manière globale : fichiers plus petits, transparence dans les modes sans perte et avec perte, animation et prise en charge complète des navigateurs modernes. La PNG gagne sur un point qui compte toujours : s’ouvrir absolument partout sans aucun doute. Utilisez WebP pour votre site Web et PNG pour tout ce que vous envoyez dans l'inconnu, et proposez WebP avec une solution de secours PNG lorsque vous souhaitez les deux. Pour une image au format plus large, le Guide PNG ou JPG des couvertures où les photographies s'intègrent.

Exemples de taille réelle

Les pourcentages abstraits sont moins utiles que les chiffres réels, voici donc à quoi ressemble l'écart sur les actifs typiques :

Un Logo de 500 x 500 pixels avec transparence : environ 45 Ko en PNG-24, environ 30 Ko en WebP sans perte et moins de 12 Ko en WebP avec perte avec le canal alpha intact.
Un graphique de héros pleine largeur avec des ombres douces : souvent 400 Ko ou plus en PNG, environ 260 Ko en WebP sans perte et bien moins de 100 Ko en WebP avec perte.
Un Jeu d'icônes de l'interface utilisateur de vingt petits graphiques : l'ensemble peut passer d'environ 200 Ko à 130 Ko sans perte, avant tout réglage avec perte.

Multipliez l'exemple du héros sur une douzaine de pages et l'économie devient des secondes de temps de chargement sur une connexion lente, ce qui est exactement le genre de différence que mesure Core Web Vitals.

Conversion d'une bibliothèque PNG existante

La plupart des sites ne démarrent pas proprement ; ils ont des centaines de PNG déjà déployés. Trois approches fonctionnent, en fonction de votre configuration. Si votre site fonctionne sur un framework ou un CMS moderne, le pipeline d'images convertit et sert probablement WebP automatiquement, vous modifiez donc un paramètre plutôt que des fichiers. Si vous utilisez un CDN ou un service d'image, la plupart proposent négociation automatique de format, délivrant WebP aux navigateurs qui l'acceptent et PNG à ceux qui ne l'acceptent pas, à partir du même fichier source. Et si vous gérez les fichiers à la main, la conversion par lots des actifs et la mise à jour des références fonctionnent, même si cela représente le plus de travail.

Quel que soit l’itinéraire que vous empruntez, conservez les PNG originaux. Ce sont vos maîtres et vous en aurez peut-être besoin pour un système qui rejettera WebP plus tard.

Erreurs WebP courantes à éviter

Quelques pièges surprennent les personnes qui migrent vers WebP :

Conversion de vos originaux d'archives : convertissez les copies pour la livraison et conservez les originaux PNG, car la prise en charge de WebP est plus étroite dans les logiciels de bureau.
Utilisation de WebP avec perte sur des graphiques textuels : La compression avec perte macule les lettres nettes, tout comme le fait JPG. Utilisez WebP sans perte pour les captures d’écran et les images contenant beaucoup de texte.
Ignorer la solution de secours : servir WebP sans alternative PNG ou JPG casse l'image pour les clients plus anciens et certains contextes de messagerie.
Envoi de WebP pour télécharger des formulaires : beaucoup n’acceptent que les formats JPG et PNG et rejetteront catégoriquement le fichier.

Aucune de ces raisons ne constitue une raison pour éviter WebP. Ce sont des raisons de l'utiliser là où il appartient, c'est-à-dire dans les navigateurs modernes, tout en conservant le PNG pour les maîtres et pour tout ce qui échappe à votre contrôle.

Comment les navigateurs choisissent réellement le format

Servir deux formats semble compliqué, mais le mécanisme est simple et automatique. Chaque navigateur envoie un en-tête Accept avec chaque demande d'image, répertoriant les formats qu'il comprend. Un serveur ou un CDN lit cet en-tête et renvoie WebP à un navigateur qui annonce la prise en charge, ou le PNG à un autre qui ne le fait pas, à partir de la même URL. En HTML, vous pouvez faire la même chose explicitement avec l'élément image, en répertoriant d'abord une source WebP et ensuite une source de secours PNG ; le navigateur choisit le premier qu'il peut lire et ignore le reste. Quoi qu'il en soit, aucun visiteur ne voit jamais une image brisée, et les navigateurs modernes obtiennent discrètement le fichier le plus petit tandis que les plus anciens obtiennent le fichier compatible.

Questions fréquemment posées

WebP est-il meilleur que PNG ?

Techniquement oui. Les fichiers WebP sont 25 à 35 % plus petits, conservez la transparence et ajoutez les modes avec perte et d'animation qui manquent à PNG. PNG ne gagne que sur la compatibilité universelle.

WebP prend-il en charge la transparence comme PNG ?

Oui, et plus loin. WebP conserve un canal alpha en modes sans perte et avec perte, alors que PNG n'offre que de la transparence avec une compression sans perte.

À quel point WebP est-il plus petit que PNG ?

Généralement 25 à 35 % plus petit sans perte, et 60 à 70 % plus petit en mode avec perte tout en conservant la transparence.

Tous les navigateurs prennent-ils en charge WebP ?

Chaque navigateur moderne prend en charge WebP, notamment Chrome, Firefox, Safari et Edge. Certains anciens logiciels de bureau et formulaires de téléchargement le rejettent toujours.

Quels formats prennent en charge la transparence et l'animation ?

WebP fait les deux. PNG a de la transparence mais pas d'animation fiable, et GIF s'anime mais est limité à 256 couleurs avec une transparence grossière.

WebP ou PNG sont-ils meilleurs pour un site Web ?

WebP, pour la rapidité. Des fichiers plus petits améliorent la plus grande peinture de contenu, un signal de classement Core Web Vitals. Servir une solution de secours PNG pour les clients plus âgés.

Dois-je utiliser WebP ou AVIF ?

WebP, pour l'instant. AVIF compresse environ 20 % mieux mais offre un support plus restreint, WebP représente donc aujourd'hui l'équilibre pragmatique entre économies et compatibilité.

Puis-je télécharger un fichier WebP vers un formulaire ?

Souvent non. De nombreux formulaires de téléchargement n'acceptent que les JPG et PNG, convertissez-le donc en l'un de ceux-ci lorsqu'un système répertorie ses formats acceptés et omet WebP.

Dois-je convertir mes fichiers PNG existants en WebP ?

Convertissez les copies pour la livraison, pas vos masters. Conserver les PNG originaux, puisque la prise en charge de WebP est plus limitée dans les logiciels de bureau et les formulaires de téléchargement.

WebP avec perte est-il bon pour les captures d'écran avec du texte ?

Non. La compression avec perte macule les lettres nettes, exactement comme le fait JPG. Utilisez WebP sans perte pour les graphiques et les captures d'écran contenant beaucoup de texte.

Ai-je toujours besoin d’une solution de secours PNG avec WebP ?

Pour une sécurité maximale, oui. Les navigateurs modernes lisent tous WebP, mais ce n'est toujours pas le cas des anciens logiciels de bureau, de certains clients de messagerie et de nombreux formulaires de téléchargement.

Comment un navigateur sait-il s’il doit charger WebP ou PNG ?

À travers le Acceptez l'en-tête qu'il envoie à chaque demande, qui répertorie les formats pris en charge. Les serveurs et les CDN le lisent et renvoient automatiquement la solution de secours WebP ou PNG.