PNG vs JPG vs WebP — Choisissez le bon format avant que vos utilisateurs ne quittent en colère

Vous avez passé des semaines à perfectionner votre site. La conception est précise, le code est propre, puis vous déposez une image PNG de 3,8 Mo sur la page d'accueil et vous voyez votre score Lighthouse s'effondrer. Nous avons tous vécu cela.

Choisir le bon format d'image n'est pas un travail glamour, mais c'est l'une des optimisations les plus efficaces que vous puissiez faire pour le temps de chargement de la page, les Core Web Vitals et l'expérience utilisateur globale. Ce guide élimine le bruit afin que vous sachiez exactement quand utiliser PNG, JPG, WebP, AVIF ou même GIF — et pourquoi choisir mal coûte plus que vous ne le pensez.

La réponse courte (si vous êtes en hâte)

• Photos et images complexes : Utilisez WebP. Faites recours à JPG en cas de besoin.
• Logos, icônes, captures d'écran avec texte : Utilisez WebP. Faites recours à PNG en cas de besoin.
• Animations : Utilisez WebP ou une vidéo. GIF est une dernière solution.
• Projets à la pointe ciblant des navigateurs modernes : Essayez AVIF.

Vous lisez encore ? Excellent. Voici l'ensemble de la situation.

PNG vs JPG vs WebP : Qu'est-ce qui est vraiment différent ?

JPG (JPEG) — Le travailleur de terrain

Le JPEG existe depuis 1992 et reste l'un des formats les plus utilisés sur le web — pour une bonne raison. Il utilise une compression perdue, ce qui signifie qu'il élimine des données de l'image pour réduire la taille du fichier. Pour les photographies, ce compromis est presque invisible à l'œil humain à des niveaux de qualité de 70 à 85%.

Où le JPEG échoue : les textes, les dessins, les logos, tout ce qui comporte des bords nets ou des couleurs planes. Cette compression perdue introduit des artefacts visibles — des taches blocs autour des textes, des bords flous sur les icônes. Pour ces cas d'usage, vous souhaitez une compression sans perte.

Taille typique d'un fichier JPG pour une photo de 1200×800 : ~150 à 250 KB à une bonne qualité.

PNG — Sans perte, transparent, et souvent trop volumineux

Le PNG utilise une compression sans perte — chaque pixel est conservé exactement. Cela en fait le bon choix pour les logos, les captures d'écran, les illustrations à couleurs planes, et tout image nécessitant un arrière-plan transparent. Le JPG ne peut pas fournir de transparence. Le PNG peut.

Le problème : la compression sans perte signifie des fichiers plus gros. Une photographie en couleur complète enregistrée au format PNG peut atteindre 3 à 5 fois la taille d'une version équivalente en JPG. C'est acceptable pour un logo de 200×200. C'est un désastre pour une image de fond complète.

Taille typique d'un fichier PNG pour une photo de 1200×800 : ~2 à 4 Mo. (Oui, vraiment. C'est pourquoi votre score Lighthouse est en pleine détresse.)

WebP — Le format moderne par défaut

Développé par Google et désormais pris en charge par tous les navigateurs modernes, WebP permet des fichiers 25 à 35% plus petits que le JPG à une qualité visuelle équivalente, et des fichiers 26% plus petits que le PNG pour les images sans perte. Il supporte également la transparence, ce qui lui permet de remplacer à la fois le JPG et le PNG dans la plupart des cas.

WebP offre des modes perdu et sans perte, et il supporte les animations — ce qui en fait un remplacement viable pour les GIF. Le support des navigateurs est excellent : Chrome, Firefox, Safari (à partir de 14), Edge et Opera le gèrent nativement.

Taille typique d'un fichier WebP pour une photo de 1200×800 : ~100 à 180 KB. Même qualité, bien plus petit.

AVIF — L'extrême pointe

AVIF est dérivé du codec AV1 et offre une efficacité de compression qui met même le WebP à l'abri — souvent 50% plus petit que le JPG à un niveau de qualité équivalent. Il gère aussi mieux le HDR et le gamut de couleur large par rapport à tous les autres formats web.

L'inconvénient : le support des navigateurs, bien qu'il augmente, n'est pas encore universel (aucun Safari sur iOS 15 et versions antérieures), et l'encodage est lent. Pour la plupart des projets en 2025, le WebP reste la norme par défaut. Utilisez AVIF si votre public est composé uniquement de navigateurs modernes ou si vous disposez de l'infrastructure nécessaire pour le générer efficacement.

GIF — Le format zombie

Le GIF est limité à 256 couleurs, produit des fichiers volumineux pour les animations, et est techniquement obsolète depuis des années. Pourtant, il est encore présent, hauntant les canaux Slack et les annonces de lancement de produits partout.

Si vous devez animer quelque chose sur le web, utilisez une animation WebP ou — mieux encore — une vidéo en boucle. Un GIF animé peut être remplacé par une vidéo de 10 fois plus petite qui joue tout aussi bien. La seule raison valable de choisir encore le GIF en 2025 est la compatibilité avec des plateformes qui ne supportent pas la vidéo ou le WebP (certains clients d'email, des CMS anciens).

Tableau de comparaison des formats

Voici l'ensemble de la situation en un coup d'œil :

Format	Compression	Transparence	Animation	Idéal pour	Prise en charge du navigateur
JPG	Avec perte	Non	Non	Photos, images réalistes	Universel
PNG	Sans perte	Oui (alpha)	Non	Logos, interfaces, images à texte	Universel
WebP	Compression perdue et sans perte	Oui	Oui	Presque tout	Tous les navigateurs modernes
AVIF	Compression perdue et sans perte	Oui	Oui	Photos de haute qualité, HDR	Chrome, Firefox, Safari 16+
GIF	Compression sans perte (256 couleurs)	Oui (1 bit)	Oui	Animations simples (héritées)	Universel
SVG	Vecteur (scalable)	Oui	Oui (CSS)	Icônes, logos, illustrations	Universel

Impact réel sur les Core Web Vitals

Le format d'image influence deux métriques des Core Web Vitals :

Largest Contentful Paint (LCP)

LCP mesure le temps nécessaire pour que l'élément le plus visible — généralement une image de fond — soit chargé. Une image PNG de 3 Mo sur une connexion mobile peut épuiser entièrement votre budget LCP. La même image en WebP à 300 KB se charge en une fraction du temps. Les signaux de classement de Google prennent en compte ce chiffre.

Règle pratique : votre image LCP devrait être sous 200 KB pour la plupart des cas. Si c'est une image de fond complète sur un site moderne, demandez sous 150 KB. Utilisez WebP. Si vous avez une photographie particulièrement complexe, associez WebP à srcset pour servir des tailles différentes selon les affichages.

Cumulative Layout Shift (CLS)

CLS n'est pas directement lié au format, mais il est utile de le mentionner ici : si vos images chargent sans attributs explicites width et height , la page se réorganise à leur arrivée. Fixez toujours les dimensions sur vos <img> tags — quel que soit le format choisi.

Quand utiliser chaque format : guide de décision

Utilisez JPG quand :

• Vous avez besoin de compatibilité universelle (navigateurs anciens, emails, CMS anciens)
• Vous distribuez des photographies à un public large et ne pouvez pas servir de WebP
• Vous avez besoin d'un remplacement fiable dans un <picture> élément

Utilisez PNG quand :

• Vous avez besoin d'une qualité sans perte pixel par pixel (captures d'écran pour des documents, maquettes UI)
• Vous avez besoin de transparence et ne pouvez pas servir de WebP
• L'image comporte des bords nets, des couleurs planes ou du texte où les artefacts du JPG seraient évidents

Utilisez WebP quand :

• Vous construisez un projet web moderne (cela devrait être votre choix par défaut en 2025)
• Vous souhaitez des fichiers plus petits que le JPG ou le PNG sans perte de qualité visible
• Vous avez besoin de transparence sans le poids du PNG
• Vous remplacez le GIF par du contenu animé

Utilisez AVIF quand :

• Votre public utilise des navigateurs modernes et que vous souhaitez une compression maximale
• Vous servez des photographies HDR ou à large gamut
• Vous disposez d'une infrastructure de CDN capable de générer AVIF en temps réel

Utilisez SVG quand :

• L'image est un icône, un logo ou une illustration qui doit s'adapter à n'importe quelle taille
• Vous souhaitez animer ou styliser des éléments avec CSS
• La taille du fichier est importante et l'image est composée de lignes, pas de pixels

Comment servir plusieurs formats avec

Vous n'avez pas besoin de choisir un seul format — l'élément <picture> permet de servir le format le plus adapté à chaque navigateur :

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Hero image" width="1200" height="600">
</picture>

Les navigateurs choisissent le premier format qu'ils supportent. Les navigateurs modernes reçoivent AVIF ; les versions légèrement plus anciennes reçoivent WebP ; les autres reçoivent JPG. Aucun JavaScript requis.

Convertir entre formats en ligne

Si vous devez convertir des images entre formats sans installer de logiciel, l'outil Image Converter sur iotools.cloud gère PNG, JPG, WebP, AVIF, GIF et plus — directement dans votre navigateur. Téléchargez, choisissez le format cible, téléchargez. Aucun compte, aucune watermark.

C'est particulièrement utile pour des conversions rapides : transformer un logo PNG d'un client en WebP avant de le placer sur une page, ou convertir en masse des captures d'écran pour un site de documentation.

Pour conclure

L'ère de la préférence pour PNG ou JPG pour tout est terminée. Le WebP vous offre la meilleure combinaison de compression, de qualité et de compatibilité pour presque tous les cas d'usage web — et il devrait être votre point de départ en 2025. Gardez JPG et PNG comme formats de secours où nécessaire, et surveillez l'avancement de l'AVIF avec le développement du support des navigateurs.

Vos utilisateurs ne remarqueront pas le format. Ils remarqueront si votre page se charge en deux secondes ou en huit. Faites le bon choix avant qu'ils ne se mettent à rage.

Vous aimerez peut-être aussi