WebP, PNG ou JPG : bien choisir son format d'image
Le JPG sert aux photos qui doivent s'ouvrir partout, le PNG aux pixels exacts, et le WebP fait les deux sur le web avec des fichiers plus légers.
Le choix d'un format d'image se résume à trois questions : l'encodeur a-t-il le droit de supprimer des détails, l'image a-t-elle besoin de zones transparentes, et où le fichier sera-t-il ouvert ? JPG, PNG et WebP y répondent chacun à leur manière. Le WebP est en général le meilleur choix pour les images d'un site web, mais le PNG et le JPG gardent l'avantage dans certains cas. Savoir lesquels vous évite les logos flous, les cadres blancs autour des détourages et les formulaires d'envoi qui refusent votre fichier.
Les formats côte à côte
| JPG (JPEG) | PNG | WebP | |
|---|---|---|---|
| Compression | Avec perte | Sans perte | Avec ou sans perte |
| Transparence | Non | Oui, canal alpha complet | Oui, dans les deux modes |
| Animation | Non | Via APNG | Oui |
| Profondeur de couleur | 8 bits par canal en pratique | Jusqu'à 16 bits par canal | 8 bits par canal |
| Taille maximale | 65 535 × 65 535 pixels | Plus de 2 milliards de pixels par côté | 16 383 × 16 383 pixels |
| S'ouvre dans | Pratiquement tout | Pratiquement tout | Tous les grands navigateurs actuels, mais pas toutes les applications ni tous les formulaires d'envoi |
| Idéal pour | Les photos qui doivent fonctionner partout | Captures d'écran, interfaces, graphismes aux contours nets | La plupart des images d'un site web |
Avec ou sans perte : la vraie différence
La compression avec perte élimine les détails que l'œil a peu de chances de remarquer, et un réglage de qualité décide de la quantité supprimée. Elle convient aux photographies, où le bruit et les dégradés masquent les petites modifications. Elle abîme en revanche le texte, les traits fins et les aplats de couleur, qui se retrouvent avec des contours adoucis et de légères taches. Chaque nouvel enregistrement perd un peu plus : convertissez donc toujours à partir de l'original plutôt que d'un ancien JPG.
La compression sans perte conserve chaque pixel à l'identique. C'est le bon choix pour les captures d'écran, les schémas, le pixel art et tout ce que vous retoucherez plus tard. Pour une photographie, elle produit un fichier bien plus lourd, car le bruit de l'appareil photo coûte cher à stocker à l'identique.
Le JPG est uniquement avec perte et le PNG uniquement sans perte. Le WebP réunit les deux modes dans un seul format, et c'est son principal avantage pratique : une photo comme une capture d'écran peuvent être en WebP, chacune compressée de la manière qui lui convient.
De combien le WebP est-il plus léger ?
Google, qui a développé le format, publie cette comparaison : les images WebP sans perte sont 26 % plus petites que les PNG, et les images WebP avec perte sont 25 à 34 % plus petites que des JPEG comparables, à qualité SSIM équivalente. Ce sont des moyennes calculées sur les images de test de Google, pas une promesse valable pour chaque fichier.
Vos propres résultats peuvent être meilleurs ou moins bons. La FAQ WebP de Google indique qu'un WebP peut être plus lourd que son fichier source, typiquement lorsqu'un PNG ne comportant que quelques couleurs est converti en WebP avec perte, ou lorsqu'une image déjà compressée avec perte est enregistrée en WebP sans perte. Le WebP avec perte utilise aussi toujours le sous-échantillonnage de chrominance 4:2:0, qui stocke la couleur à la moitié de la résolution horizontale et verticale de la luminosité : dans un graphisme, les bords rouges ou bleus saturés peuvent donc paraître légèrement baveux là où un PNG reste net. La méthode fiable consiste à convertir puis à comparer. Le convertisseur d'images affiche la taille d'origine et la nouvelle taille de chaque fichier, pour que vous voyiez le gain réel avant de le conserver.
Transparence et animation
Le JPG n'a pas de canal alpha. Convertir un logo transparent en JPG remplit la zone transparente d'une couleur unie, du blanc dans le convertisseur de ce site. Le PNG stocke un canal alpha complet sans perte, ce qui alourdit les photos transparentes comme les détourages de produits. Le WebP gère aussi l'alpha en mode avec perte : une photo détourée peut ainsi garder ses bords adoucis pour une fraction de la taille du PNG. C'est dans ce cas que la conversion PNG en WebP fait gagner le plus.
Côté animation, le JPG n'en propose aucune, le PNG dispose de l'extension APNG, et le WebP intègre l'animation. Selon Google, un WebP animé peut être plus léger que la même animation en GIF ou en APNG. Pour des séquences longues ou complexes, une vidéo MP4 ou WebM sans son est en général plus légère que n'importe quel format d'image.
Quel format utiliser
| Image | Format | Pourquoi |
|---|---|---|
| Photos sur un site web | WebP avec perte | L'option la plus légère parmi les formats largement pris en charge |
| Photos pour un e-mail, l'impression ou un formulaire d'envoi | JPG | S'ouvre dans tous les logiciels et passe tous les formulaires |
| Captures d'écran avec du texte, maquettes d'interface | PNG ou WebP sans perte | Le texte reste net, rien ne bave |
| Logos et icônes | SVG si vous avez des vecteurs, sinon PNG ou WebP | Conserve les contours nets et la transparence |
| Photo de produit sur fond transparent | WebP avec perte et alpha | Bords adoucis pour une fraction de la taille du PNG |
| Animation courte | WebP animé, ou MP4/WebM pour les séquences plus longues | Bien plus léger que le GIF |
| Originaux que vous retoucherez | PNG, ou le fichier d'origine de l'appareil photo | Aucune perte de génération |
Migrer des images existantes va vite : JPG en WebP pour les photos, PNG en WebP pour les graphismes et les détourages. Quand un WebP refuse de s'ouvrir dans un logiciel ancien, WebP en JPG règle le problème, et PNG en JPG allège les photos enregistrées en PNG par erreur.
Compatibilité des navigateurs et repli avec picture
Les versions actuelles de Chrome, Edge, Firefox et Safari affichent toutes le WebP : pour la plupart des sites, un WebP dans une balise <img> ordinaire suffit. Si vous devez aussi prendre en charge d'anciens navigateurs, ou si vous voulez proposer d'abord un format plus récent, utilisez l'élément <picture>. Le navigateur retient la première <source> dont il prend en charge le type et se replie sinon sur l'<img>, qui porte aussi le texte alternatif et les dimensions :
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="Port au coucher du soleil" width="1600" height="900">
</picture>Un serveur ou un CDN peut faire le même travail sans balisage supplémentaire, en examinant l'en-tête Accept de la requête d'image et en renvoyant du WebP lorsqu'il y figure. Dans ce cas, envoyez Vary: Accept pour que les caches gardent les versions séparées.
La place de l'AVIF
L'AVIF repose sur le codec vidéo AV1 et il est pris en charge par les versions actuelles de Chrome, Edge, Firefox et Safari. Il produit souvent des fichiers plus petits que le WebP à qualité visuelle similaire, mais son encodage est plus lent, et moins d'outils, d'éditeurs et de formulaires d'envoi l'acceptent. Une configuration courante place l'AVIF en premier, le WebP en second et le JPG en dernier, comme dans l'exemple ci-dessus. Le convertisseur de ce site peut lire les fichiers AVIF lorsque votre navigateur sait les décoder, mais il écrit du WebP, du PNG, du JPG et de l'ICO, pas d'AVIF.
Convertir dans le navigateur : la limite de Safari
Les convertisseurs qui fonctionnent dans le navigateur dessinent l'image sur un canvas et demandent au navigateur de l'encoder. Chrome, Edge et Firefox savent encoder du WebP de cette manière. Safari affiche le WebP mais ne sait pas l'encoder depuis un canvas et renvoie discrètement un PNG à la place : le convertisseur de ce site s'arrête donc avec un message plutôt que d'enregistrer un PNG portant l'extension .webp. Sur Mac, faites vos conversions en WebP dans Chrome, Edge ou Firefox. Sur iPhone ou iPad, les autres navigateurs utilisent en général eux aussi le moteur de Safari : convertissez sur un ordinateur, ou choisissez PNG ou JPG.
Deux autres points méritent d'être connus. Dans Chrome, une qualité de 100 produit un WebP sans perte, tandis que les valeurs inférieures produisent un WebP avec perte ; nous l'avons vérifié en inspectant les fichiers encodés. Par ailleurs, l'encodage via un canvas ne copie pas les métadonnées : les données EXIF, comme le modèle de l'appareil photo et la position GPS, disparaissent du fichier converti.