WebP, PNG ou JPG : quel format votre site web doit-il utiliser ?

Le choix entre WebP et PNG dépend de la destination de l'image. Sur un site web, le WebP l'emporte généralement : Google indique que le WebP sans perte est environ 26 % plus léger que le PNG, avec prise en charge de la transparence, et tous les principaux navigateurs actuels l'affichent. Pour les fichiers que vous envoyez par e-mail, déposez dans des formulaires ou transmettez à d'autres, le PNG et le JPG sont plus sûrs, car la prise en charge hors des navigateurs reste inégale.

Qu'est-ce que le format WebP ?

Le WebP est un format d'image développé par Google, annoncé pour la première fois en 2010. Un seul format couvre plusieurs usages qui nécessitaient auparavant des fichiers différents :

• Compression avec perte pour les photos, comme le JPG.
• Compression sans perte pour les graphiques et les captures d'écran, comme le PNG.
• Transparence (un canal alpha) dans les deux modes.
• Animation, comme remplaçant plus léger du GIF.

Les fichiers se terminent par .webp. Chrome, Edge, Firefox et Safari les affichent tous, Safari depuis la version 14. Tout visiteur disposant d'un navigateur à jour voit les images WebP sans que vous ayez rien de particulier à faire.

Vous avez probablement déjà croisé le WebP. Beaucoup de sites le servent automatiquement, c'est pourquoi une image enregistrée depuis une page web se télécharge parfois en .webp alors qu'elle ressemblait à une photo ordinaire. Notre guide qu'est-ce qu'un fichier WebP explique comment les ouvrir et les modifier.

WebP ou PNG : lequel est le plus léger, et quand utiliser chacun

Selon les chiffres de Google, le WebP sans perte est environ 26 % plus léger que le PNG. Les deux sont sans perte : vous obtenez les mêmes pixels dans moins d'espace. Pour les visuels avec transparence, le WebP avec perte peut aller bien plus loin : Google indique qu'il donne généralement des fichiers environ trois fois plus légers que l'équivalent en PNG.

Utilisez le WebP plutôt que le PNG quand :

• L'image se trouve sur votre propre site web : logo, illustration, détourage de produit ou capture d'écran.
• Vous voulez la transparence sans le poids d'un PNG.
• La vitesse de la page compte et l'image est grande.

Restez au PNG quand :

• Vous envoyez le fichier à quelqu'un, le joignez à un document, ou le déposez dans un formulaire qui indique les types acceptés.
• Vous avez besoin d'une copie maître pour l'édition dans un logiciel qui peut ne pas ouvrir le WebP.
• Le graphique est un logo ou une icône que vous pourriez proposer en SVG, souvent encore plus léger et net à toutes les tailles.

Le WebP avec perte et transparence convient bien aux détourages de produits et aux illustrations aux bords doux. Pour les captures d'écran au pixel près et les maquettes d'interface, le WebP sans perte garde le texte net, exactement comme le PNG. Découvrez les points forts du PNG dans qu'est-ce qu'un fichier PNG.

WebP ou JPG pour les photos

Pour les photos, Google a mesuré un WebP avec perte 25 à 34 % plus léger que des JPG comparables, à score de qualité SSIM égal. Sur une page avec une douzaine de photos de produits ou une grande image d'en-tête, cela se traduit par un chargement plus rapide, surtout en données mobiles.

Le JPG garde deux avantages. Il s'ouvre partout, des vieilles visionneuses de photos aux imprimantes, et c'est la réponse sûre pour n'importe quel portail d'envoi. Et les encodeurs JPG modernes sont bons : un JPG bien compressé aux bonnes dimensions s'en approche assez. Si vous ne devez faire qu'une chose, bien dimensionner une photo compte plus que changer de format. Une photo de 4000 pixels affichée sur 800 pixels de large gaspille bien plus d'octets que le choix du format.

Une approche pratique pour un site : gardez les originaux en JPG ou PNG, et publiez des versions WebP dimensionnées selon la largeur d'affichage. La comparaison PNG ou JPG, plus générale, aide à choisir le format du fichier maître.

Comparaison rapide

• Taille de fichier sur le web : le WebP est généralement le plus léger, puis le JPG pour les photos ou le PNG pour les visuels.
• Transparence : WebP et PNG oui, JPG non.
• Animation : WebP oui, PNG et JPG non (GIF ou vidéo à la place).
• Compatibilité hors navigateurs : JPG en tête, PNG juste derrière, WebP le plus faible dans les anciennes apps et les formulaires d'envoi.
• Retouche sans perte : PNG ou WebP sans perte.

Comment convertir du PNG ou du JPG en WebP

Pour quelques fichiers, un outil dans le navigateur est le plus rapide. Le convertisseur d'images en WebP fonctionne en local dans votre navigateur : les images ne sont envoyées nulle part.

1. Redimensionnez d'abord si l'image est plus grande que sa taille d'affichage. L'outil Redimensionner une image fixe une largeur exacte et conserve les proportions.
2. Ouvrez le convertisseur WebP et ajoutez vos fichiers JPG ou PNG.
3. Convertissez et téléchargez. Vérifiez que les zones transparentes le sont toujours et que le texte des captures d'écran est net.
4. Si le WebP est encore plus lourd que souhaité, compressez-le de nouveau avec une taille cible en Ko.
5. Téléversez le WebP sur votre site et mettez à jour les références d'image.

Pour les photos, une qualité avec perte autour de 75 à 85 est un point de départ raisonnable. Comparez le résultat avec l'original en taille réelle, et ne baissez davantage la qualité que si vous ne voyez aucune différence.

Beaucoup de systèmes de gestion de contenu et de CDN d'images créent automatiquement des copies WebP. Si c'est le cas du vôtre, il vous suffit peut-être d'envoyer un bon JPG ou PNG et de le laisser gérer le reste.

Comment vérifier que votre site sert bien du WebP

Votre CMS ou votre CDN affirme peut-être créer du WebP, mais mieux vaut le vérifier. Dans Chrome ou Edge, ouvrez la page, appuyez sur F12 pour ouvrir les outils de développement et passez à l'onglet Réseau. Rechargez la page et filtrez sur Img. La colonne Type indique le format dans lequel chaque image est arrivée, et la colonne Taille le nombre d'octets qu'elle a pris.

Si vous y voyez encore de gros fichiers JPG ou PNG, les copies WebP ne sont pas servies. Les causes courantes sont un plugin de cache qui sert un ancien HTML, des images ajoutées par du code personnalisé qui contourne le CMS, ou un thème qui code en dur les URL des images. Corrigez d'abord ces pages, en commençant par les images les plus lourdes.

Toutes les images de votre site doivent-elles être en WebP ?

La plupart peuvent l'être. Quelques exceptions sont bonnes à connaître :

• Les logos et icônes simples sont souvent meilleurs en SVG.
• Les fichiers destinés à être téléchargés, comme une photo de dossier de presse ou un graphique à imprimer, sont plus pratiques en JPG ou PNG.
• Les images de partage sur les réseaux sociaux (l'image Open Graph affichée quand un lien est partagé) sont plus sûres en JPG ou PNG, car vous ne contrôlez pas toutes les apps qui les lisent.
• Si vous devez prendre en charge un navigateur très ancien, servez une version de secours en JPG ou PNG avec l'élément HTML picture .

Vous verrez peut-être aussi l'AVIF. C'est un format plus récent, qui peut être encore plus léger que le WebP et qui est largement pris en charge par les navigateurs actuels. Le WebP reste le choix par défaut le plus simple, car davantage d'outils et de plateformes l'acceptent.

Comment ouvrir ou convertir un fichier WebP téléchargé

Les versions actuelles de Photos sous Windows et d'Aperçu (Preview) sur Mac ouvrent les fichiers WebP, et tout navigateur en affiche un si vous le faites glisser dans un onglet. Les ennuis commencent quand vous envoyez le fichier sur un site qui n'accepte que le JPG ou le PNG, ou que vous le modifiez dans un logiciel plus ancien.

La solution est une conversion rapide. Le convertisseur WebP en PNG ou JPG traite un fichier seul ou des lots. Choisissez le PNG si l'image a de la transparence ou du texte net, et le JPG pour une photo dont vous voulez un fichier plus léger. Renommer l'extension ne convertit rien : exportez toujours une vraie copie.

Questions fréquentes