JPG vs PNG vs WebP : choisir le bon format pour votre site
Chaque image de votre site est servie dans un format, et ce choix impacte la vitesse de chargement, la qualité visuelle et les coûts de bande passante. JPG, PNG et WebP résolvent chacun des problèmes différents. Utiliser le mauvais format, c'est soit des fichiers trop lourds, soit une transparence absente, soit une perte de qualité inutile.
Ce guide compare les trois formats avec des chiffres concrets, explique quand chacun est pertinent, et montre comment migrer vers le WebP sans rien casser.
Ce que chaque format fait le mieux
Le JPG est un format avec perte conçu pour le contenu photographique. Il produit des fichiers légers en supprimant des informations visuelles que l'oeil humain ne perçoit pas. Il ne supporte ni la transparence ni la compression sans perte. Le JPG est universel : chaque navigateur, client mail et système d'exploitation le gère.
Le PNG est un format sans perte conçu pour les images qui exigent une précision pixel par pixel. Il excelle pour les graphiques avec des bords nets, les textes incrustés, les logos, les icônes et tout ce qui nécessite de la transparence. Les fichiers PNG sont nettement plus lourds que les JPG pour du contenu photographique, car la compression sans perte préserve chaque pixel.
Le WebP est un format moderne développé par Google qui combine les atouts des deux. Il supporte la compression avec perte (comme le JPG), la compression sans perte (comme le PNG), la transparence (comme le PNG) et l'animation (comme le GIF). Il produit des fichiers plus petits que le JPG et le PNG dans quasiment tous les scénarios.
Compression | Comparaison des tailles de fichier
La taille de fichier est le critère le plus concret pour la performance web. Voici une comparaison sur une photo typique de 1200x800 :
| Format | Mode | Taille typique | vs JPG |
|---|---|---|---|
| JPG (Q85) | Avec perte | 350 Ko | Référence |
| PNG | Sans perte | 1,8 Mo | +414% |
| WebP (Q80) | Avec perte | 240 Ko | -31% |
| WebP | Sans perte | 1,1 Mo | +214% |
Pour les images photographiques, le WebP avec perte est systématiquement 25 à 35% plus léger que le JPG à qualité équivalente. Le PNG n'est pas une option viable pour les photos car l'encodage sans perte produit des fichiers 4 à 5 fois plus lourds.
Pour les graphiques avec des aplats de couleur et des bords nets (logos, diagrammes, captures d'écran), la situation change :
| Format | Mode | Taille typique |
|---|---|---|
| PNG | Sans perte | 45 Ko |
| WebP | Sans perte | 32 Ko |
| JPG (Q90) | Avec perte | 55 Ko (avec artefacts sur les bords) |
Le WebP sans perte bat le PNG de 25 à 30% sur ce type de contenu. Le JPG est le pire choix ici car la compression avec perte crée des artefacts de ringing visibles autour des bords nets et du texte.
Transparence et compression sans perte
| Fonctionnalité | JPG | PNG | WebP |
|---|---|---|---|
| Transparence (alpha) | Non | Oui | Oui |
| Compression sans perte | Non | Oui | Oui |
| Compression avec perte | Oui | Non | Oui |
| Animation | Non | Non (APNG existe mais limité) | Oui |
Si votre image nécessite de la transparence, le JPG est immédiatement écarté. Le choix se fait entre PNG et WebP. Le WebP produit des fichiers plus légers avec transparence en mode avec et sans perte, ce qui en fait la meilleure option quand le support navigateur n'est pas un souci.
Pour les images qui exigent une reproduction pixel par pixel (diagrammes techniques, captures de texte, imagerie médicale), utilisez le WebP sans perte ou le PNG. Les formats avec perte comme le JPG introduisent des artefacts qui peuvent altérer les détails fins.
Support navigateur en 2026
| Navigateur | JPG | PNG | WebP |
|---|---|---|---|
| Chrome | Oui | Oui | Oui |
| Firefox | Oui | Oui | Oui |
| Safari | Oui | Oui | Oui (14+) |
| Edge | Oui | Oui | Oui |
| IE 11 | Oui | Oui | Non |
Le WebP est supporté par 97% des navigateurs à l'échelle mondiale en 2026. Le seul navigateur notable qui ne le supporte pas est Internet Explorer 11, que Microsoft ne maintient plus. En pratique, le WebP bénéficie d'un support universel.
Si vous devez quand même couvrir les 3% restants, utilisez l'élément <picture> pour servir du WebP avec un fallback JPG ou PNG :
<picture>
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Description" width="800" height="600">
</picture>
Quel format pour quel usage ?
| Cas d'usage | Meilleur format | Pourquoi |
|---|---|---|
| Photos, images hero | WebP avec perte | Fichier le plus léger, bonne qualité |
| Images produit (e-commerce) | WebP avec perte | La performance impacte directement les conversions |
| Logos, icônes | SVG ou WebP sans perte | Scalables, nets à toute taille |
| Captures d'écran, diagrammes | WebP sans perte ou PNG | Pixel-perfect, texte net |
| Images avec transparence | WebP avec perte (avec alpha) | Plus léger que PNG avec alpha |
| Miniatures | WebP avec perte (Q70) | Compression agressive acceptable |
| Templates email | JPG | Meilleure compatibilité clients mail |
| Open Graph réseaux sociaux | JPG | Les crawlers préfèrent le JPG |
| Images pour impression | JPG ou TIFF | Les flux d'impression attendent ces formats |
La règle générale : utilisez le WebP pour tout ce qui va sur le web, le JPG pour l'email et le partage social, le PNG uniquement quand vous avez besoin de qualité sans perte et que le WebP n'est pas possible.
Comment migrer votre site vers le WebP
La migration vers le WebP n'a pas besoin d'être une opération massive. Voici une approche progressive :
Étape 1 : commencez par vos images les plus lourdes. Identifiez les 10 à 20 images les plus volumineuses de votre site (bannières hero, photos produit, images de fond). Convertir celles-ci seules peut économiser plusieurs mégaoctets de bande passante par page.
Étape 2 : utilisez l'élément <picture>. Servez du WebP aux navigateurs modernes et conservez le JPG ou PNG original en fallback. C'est une approche sans risque car aucun utilisateur ne voit une image cassée.
Étape 3 : convertissez en lot. Utilisez un convertisseur en ligne ou une API pour traiter toutes vos images. Morphix supporte la conversion en lot via son API.
Étape 4 : mettez à jour votre pipeline de build. Si vous utilisez un générateur de site statique, un CMS ou un pipeline CI/CD, ajoutez une étape de conversion WebP pour que chaque nouvelle image soit automatiquement convertie.
Étape 5 : configurez les headers de cache. Les images WebP doivent être mises en cache de façon agressive. Configurez Cache-Control: public, max-age=31536000, immutable pour les noms de fichier hashés afin d'éviter les re-téléchargements.
Convertissez vos images
Morphix convertit vos images JPG et PNG en WebP directement dans le navigateur. Aucune inscription requise avec l'offre gratuite.
Convertir JPG en WebP | Convertir PNG en WebP | Compresser JPG