Explication des formats d'images : JPEG, PNG, WebP, GIF, SVG, AVIF

Mis à jour le: June 27, 2026

Il n'existe pas de format d'image idéal — chacun existe parce qu'il résout un problème différent. JPEG compresse les photographies, PNG préserve les arêtes vives et la transparence, WebP et AVIF réduisent encore plus les photos, SVG s'adapte sans perte de pixels, et GIF anime. Choisir le bon format est une décision éditoriale, pas une préférence. Ce guide explique ce que fait chaque format, avec des tailles de fichiers réelles mesurées à partir d'une image source unique.

Réponse rapide : quel format utiliser ?

Associez le format au contenu de l'image et à son emplacement d'affichage :

Pour une analyse détaillée format par rapport au format, consultez la comparaison AVIF vs WebP vs JPEG.

Comment les formats se comparent-ils ?

Les différences de taille de fichier sont importantes et constantes. Mesuré sur une photographie de 1400×933 :

Les 853 KB de PNG sont remarquables : stocker une photographie en mode lossless coûte environ 8× plus cher que JPEG et 19× plus cher qu'AVIF. C'est pourquoi PNG est inapproprié pour les photos de page entière même s'il est techniquement capable de les stocker.

JPEG — le cheval de bataille photo

JPEG (1992) est le format avec perte (lossy) pour les photographies. Il élimine les détails haute fréquence que l'œil voit à peine, ce qui fait qu'il réduit considérablement les photos mais floute le texte net et les lignes fines.

• Idéal pour : les photographies, les dégradés, les scènes complexes du monde réel.
• À éviter pour : le texte, les captures d'écran d'interface utilisateur (UI), les dessins au trait nets, tout ce qui nécessite de la transparence (JPEG n'a pas de canal alpha).
• Attention à : les artefacts de blocage visibles 8×8 en dessous de une qualité ~70.

Utilisez une qualité de 80–85 pour les photos web. Voir comment compresser JPEG.

PNG — arêtes vives et transparence

PNG est sans perte (lossless) et prend en charge un canal alpha complet, il préserve donc chaque pixel et toute transparence. Le coût est la taille du fichier : il ne compresse pas bien les photographies.

• Idéal pour : les graphiques aux bords nets, le texte, les logos, les captures d'écran UI, les images transparentes.
• À éviter pour : les photos de page entière (utilisez WebP/AVIF/JPEG à la place — voir le tableau ci-dessus).
• Attention à : les fichiers énormes sur les photographies. Réduisez avec PNG-8 (≤256 couleurs) pour les graphiques plats.

Pour des détails sur la transparence, consultez comment créer des images transparentes.

WebP — le défaut web moderne

WebP (2010) est à la fois avec perte et sans perte, prend en charge l'alpha, et bat JPEG de ~25–35% pour une qualité équivalente. Le support des navigateurs modernes est d'environ 98%.

• Idéal pour : les photographies web et les images web transparentes où chaque octet compte.
• À éviter pour : les emails et les clients très anciens (utilisez JPEG/PNG en fallback).
• Servez avec : un fallback JPEG/PNG dans un élément <picture>.

AVIF — les photos les plus petites

AVIF (2019) utilise les outils intra-frame du codec vidéo AV1 et bat WebP de 20–30% supplémentaires. Le support est d'environ 96% et en croissance.

• Idéal pour : les photographies où chaque octet compte (images héro, LCP).
• À éviter pour : lorsque vous ne pouvez pas vous permettre un encodage lent, ou pour les navigateurs très anciens (utilisez le fallback <picture>).
• Attention à : l'étalement des textures fines à très faible qualité (<q40).

SVG — vecteurs qui s'adaptent

SVG est un format vectoriel : il stocke des formes, pas des pixels, il s'adapte donc à n'importe quelle taille sans perdre de netteté et est minuscule pour les œuvres d'art simples.

• Idéal pour : les logos, icônes, illustrations simples, tout ce qui doit s'adapter.
• À éviter pour : les photographies (SVG ne peut pas les représenter efficacement).
• Attention à : la complexité — un SVG détaillé peut être volumineux ; rasterisez si nécessaire.

GIF — l'héritage de l'animation

GIF anime et prend en charge une transparence 1-bit, mais il est limité à 256 couleurs et est beaucoup plus grand que les formats animés modernes pour le même contenu.

• Idéal pour : rien de moderne — remplacez par WebP ou AVIF animé.
• À éviter pour : tout ce qui est critique en couleur (limite de 256 couleurs) ou sensible à la taille.
• Attention à : les fichiers volumineux ; un GIF de 3 secondes est souvent plus gros que le MP4 du même clip.

Comment choisir sous pression ?

Utilisez ce court flux de décision :

1. Est-ce une photographie ? → WebP/AVIF (avec fallback JPEG).
2. A-t-elle besoin de transparence ? → PNG ou WebP (alpha).
3. Est-ce un logo/icône/illustration qui s'adapte ? → SVG.
4. Est-ce du texte/UI net ? → PNG.
5. Est-ce une animation ? → WebP/AVIF animé, pas GIF.
6. Est-ce pour l'email ? → JPEG ou PNG (pas de WebP/AVIF).

Pour presque toutes les photographies web, la réponse est désormais « WebP ou AVIF avec un fallback JPEG ». JPEG ne reste que pour sa compatibilité universelle, et non parce qu'il est le meilleur choix.

Comment servir plusieurs formats ?

Utilisez l'élément <picture> afin que chaque navigateur reçoive le meilleur format qu'il prend en charge :

<picture>
  <source srcset="/img/photo.avif" type="image/avif">
  <source srcset="/img/photo.webp" type="image/webp">
  <img src="/img/photo.jpg" alt="Description" width="800" height="600" loading="lazy">
</picture>

Le navigateur choisit le premier type qu'il prend en charge et ignore le reste. Conservez toujours un <img> réel avec une source JPEG src comme fallback final. Consultez le guide des formats d'image sur MDN pour le tableau de support par navigateur actuel.

Erreurs courantes

• Utiliser PNG pour les photographies. Cela fonctionne, mais le fichier est 8–19× plus grand que nécessaire.
• Utiliser JPEG pour du texte ou des logos. La compression floute les arêtes vives. Utilisez PNG ou SVG.
• Servir un seul format sans fallback. AVIF/WebP ont besoin d'un fallback JPEG pour les anciens clients.
• Animer avec GIF. WebP/AVIF animés sont beaucoup plus petits et prennent en charge plus de couleurs.
• Ignorer SVG pour les logos. Un logo rasterisé est flou à haute DPI ; SVG reste net quelle que soit la taille.

Questions fréquemment posées

Quel format d'image dois-je utiliser ?

JPEG pour les photographies, PNG pour les graphiques aux arêtes vives ou transparents, WebP comme défaut web moderne (plus petit que les deux), AVIF pour les photos les plus petites sur les navigateurs modernes, et SVG pour les logos et icônes. Associez le format au contenu.

Est-ce que WebP est meilleur que JPEG ?

Pour la diffusion web, oui — WebP est 25 à 35 % plus petit avec une qualité égale et est pris en charge par tous les navigateurs actuels. Gardez JPEG comme fallback uniquement pour les très anciens navigateurs. Voir le guide de conversion WebP.

Quand dois-je utiliser AVIF ?

Lorsque vous pouvez l'encoder et que votre public est principalement sur des navigateurs modernes — AVIF est environ 50 % plus petit que JPEG. Le compromis est un encodage plus lent et des lacunes sur les anciens navigateurs. Envoyez AVIF avec un fallback WebP via un élément <picture>.

Est-ce que PNG prend en charge la transparence ?

Oui — PNG a un canal alpha complet, c'est pourquoi il est le format pour les graphiques et les logos transparents. JPEG ne prend pas en charge la transparence. WebP et AVIF prennent également en charge l'alpha, mais à des tailles plus petites pour la diffusion web.

Quel format est le plus petit pour les photos ?

AVIF (le plus petit sur les navigateurs modernes), puis WebP, puis JPEG. PNG est le plus grand pour les photos car il est sans perte. Pour la diffusion web, WebP est le défaut sûr ; AVIF lorsque vous pouvez l'encoder et que votre public utilise des navigateurs modernes.

Quel est le format d'image le plus petit ?

AVIF pour les photos sur les navigateurs modernes (environ 50 % plus petit que JPEG), puis WebP. PNG est le plus grand pour les photos car il est sans perte. Pour les graphiques transparents, WebP ou AVIF battent PNG. Associez le format au contenu et au support de navigateur de votre public.

Quelle est la différence entre avec perte et sans perte ?

Sans perte (PNG, WebP lossless) préserve chaque pixel exactement et s'inverse parfaitement — aucune qualité n'est perdue. Avec perte (JPEG, WebP lossy, AVIF) jette les détails que l'œil remarque le moins pour réduire le fichier, et la perte est permanente. Le mode avec perte gagne sur la taille pour les photos ; le mode sans perte gagne sur la qualité pour les graphiques, le texte et les maîtres que vous rééditerez. Choisissez selon le contenu.

Quel est le format le plus petit pour les graphiques transparents ?

WebP ou AVIF, tous deux prenant en charge un canal alpha et compressant beaucoup plus petit que PNG. Pour les logos et icônes sur les navigateurs modernes, WebP ou AVIF réduisent considérablement la taille du fichier par rapport à PNG tout en conservant la transparence. Servez-les avec un fallback PNG via un élément <picture> pour les anciens navigateurs qui n'ont pas de support.

Crédits d'images

• Comparaison de la taille du format et graphique à barres — généré par l'auteur à partir d'une photographie de style e-commerce (Pexels #16675632, photo par Mikael Blomkvist) pour montrer les tailles de fichiers réelles mesurées sur PNG, JPEG, WebP et AVIF.