JPG, PNG ou WebP : quel format choisir ?

En une ligne : les photos en JPG ou en WebP ; les graphismes et la transparence en PNG ou en WebP. Avant de passer au WebP, vérifiez que le site sur lequel vous mettez l’image en ligne l’accepte.

Le JPG (aussi écrit JPEG) stocke les photos de façon compacte en supprimant les détails fins que l’œil remarque rarement. Presque tous les sites, applications, services de messagerie et places de marché l’acceptent, ce qui en fait le choix le plus sûr en cas de doute.

Ses points faibles sont les contours nets et les aplats de couleur. Le texte, les dessins au trait et les captures d’écran se couvrent de halos flous, et le JPG ne gère pas la transparence. Chaque fois qu’un JPG est modifié puis réenregistré, il perd encore un peu de qualité : gardez donc l’original et exportez à partir de celui-ci.

Pour alléger un JPG sans changer de format, utilisez le compresseur d’images ; pour essayer le WebP, utilisez JPG en WebP.

Le PNG est sans perte : chaque pixel est conservé exactement tel qu’il était. Il convient donc aux logos, aux icônes, aux captures d’écran d’interface et à tout ce qui contient du texte, et il gère la transparence complète, y compris les bords adoucis et les ombres.

Le revers, c’est le poids. Une photo enregistrée en PNG est généralement plusieurs fois plus lourde qu’un bon JPG. Dans le Web Almanac 2024 de HTTP Archive, le PNG médian sur le web utilisait 3,8 bits par pixel, contre 2,0 pour le JPG et 1,3 pour le WebP.

Si un PNG contient une photo, convertissez-le. S’il contient un graphisme, compressez-le en PNG ou essayez PNG en WebP, qui conserve la transparence.

Google a conçu le WebP pour le web, et il fonctionne dans les deux modes : avec perte comme le JPG ou sans perte comme le PNG, avec transparence dans les deux cas. Selon Google, les fichiers WebP sans perte sont 26 % plus légers que les PNG, et les WebP avec perte 25 à 34 % plus légers que des JPG comparables.

Tous les grands navigateurs actuels affichent le WebP : environ 97 % des navigateurs utilisés, dont Safari depuis la version 14. Le problème se situe hors du navigateur. Certaines plateformes n’acceptent toujours pas l’envoi de WebP : Amazon, Etsy et Mailchimp, par exemple, acceptent le JPG et le PNG, mais pas le WebP.

La conversion n’est pas non plus un gain assuré. Un logo simple ou une capture d’écran avec peu de couleurs peut être plus léger en PNG. Convertissez, comparez les deux fichiers et gardez le plus léger.

1. 01L’image a-t-elle besoin de transparence ? Utilisez le PNG, ou le WebP là où il est accepté.
2. 02Est-ce une photo ou une image réaliste ? Utilisez le JPG, ou le WebP sur votre propre site.
3. 03Est-ce une capture d’écran, un graphique, un logo ou du texte ? Utilisez le PNG, puis essayez le WebP et comparez les fichiers.
4. 04Où sera-t-elle mise en ligne ? Vérifiez que la plateforme accepte le format ; sinon, restez au JPG ou au PNG.
5. 05Compressez le fichier final, quel que soit son format.

Pour les dimensions et les limites de chaque plateforme, consultez les tailles d’image requises pour l’e-mail et les boutiques en ligne.

L’AVIF est un format plus récent qui peut être encore plus léger, mais il est plus lent à générer, et moins d’outils et de plateformes l’acceptent. Sur le web, il reste rare : dans le Web Almanac 2025, l’AVIF représentait 0,7 % des images LCP, contre 11 % pour le WebP, 26 % pour le PNG et 57 % pour le JPG. Pour la plupart des sites aujourd’hui, JPG, PNG et WebP couvrent tous les besoins.

• Enregistrer les photos en PNG pour la qualité. Le PNG conserve les détails déjà présents mais ne peut pas en ajouter, et le fichier devient plusieurs fois plus lourd.
• Convertir un JPG en PNG pour corriger des contours flous. Le mal est déjà fait dans le JPG ; repartez plutôt de l’original.
• Tout passer en WebP sans vérifier. Votre site peut très bien l’accepter alors que votre plateforme e-commerce ou votre outil d’e-mailing le refuse.
• S’arrêter une fois le format choisi. Le format fixe le point de départ ; la compression du fichier final fait le reste.

À lire ensuite : comment compresser des images pour un site web, étape par étape.