JPG vs PNG vs WebP vs AVIF : choisir le bon format d'image en 2026

Si vous diffusez des images sur le web, le format que vous choisissez a plus d'impact sur le poids des pages que presque toute autre décision unique. Une image hero de 4 Mo contre une image hero de 180 Ko, c'est la différence entre un site qui semble instantané et un site qui rampe sur un téléphone Android milieu de gamme avec une connexion 4G capricieuse. En 2026, nous avons quatre prétendants grand public qui méritent qu'on s'y intéresse : le vénérable JPG, le PNG sans perte, le désormais universel WebP et l'AVIF de plus en plus mature.

Ce guide explique comment chaque format fonctionne réellement sous le capot, d'où viennent les économies d'octets, quels compromis vous acceptez, et formule une recommandation claire sur quand utiliser lequel. À la fin, vous devriez pouvoir répondre à la question « quel est le meilleur format d'image pour le web en 2026 ? » sans tergiverser, et vous devriez savoir exactement quoi faire quand un artiste vous tend une capture d'écran PNG de 28 Mo à 17 h un vendredi.

Le casting

Le JPG (parfois épelé JPEG) a été normalisé en 1992 et reste le format dans lequel la plupart des appareils photo prennent leurs clichés. Il utilise une transformée en cosinus discrète (DCT) sur des blocs 8x8, quantise les coefficients de fréquence, et code le résultat avec Huffman. Il est avec perte par conception et n'a pas de canal alpha, mais il est rapide, peu coûteux à décoder, et pris en charge littéralement sur tout appareil construit ces trente dernières années.

Le PNG est arrivé en 1996 comme remplaçant libre de brevet du GIF. Il utilise DEFLATE (le même algorithme que zip et gzip) au-dessus de filtres de ligne optionnels, il est donc entièrement sans perte. Le PNG prend en charge un véritable canal alpha 8 bits, des palettes indexées, et même la couleur 16 bits par canal. Le prix à payer est la taille du fichier : le contenu photographique se compresse mal avec DEFLATE.

Le WebP a été publié par Google en 2010 et a atteint une compatibilité multi-navigateurs complète vers 2020. Le WebP avec perte utilise le codage intra-image VP8 (les mêmes modes de prédiction que le codec vidéo VP8) au lieu d'un simple DCT. Le WebP sans perte utilise VP8L, un format personnalisé avec des astuces de cache de couleurs et de transformation par prédicteur. Le WebP prend en charge l'alpha pour les deux modes ainsi que l'animation.

L'AVIF est le profil image fixe d'AV1, le codec vidéo finalisé en 2018 et déployé par pratiquement tout le monde en 2024. Il utilise des blocs de prédiction beaucoup plus grands et plus intelligents, plus d'options de transformation, et un codeur entropique nettement meilleur que VP8. L'AVIF prend en charge la couleur jusqu'à 12 bits, l'alpha, le HDR et l'animation.

Comment fonctionne réellement la compression

Le JPG divise l'image en blocs 8x8, applique un DCT à chaque bloc, puis divise les coefficients résultants par une matrice de quantisation. Les hautes fréquences sont écrasées plus durement que les basses fréquences car l'œil humain est moins sensible aux détails fins. Les réglages de qualité inférieure ne font que multiplier cette matrice de quantisation par un scalaire plus grand. C'est pourquoi les artefacts JPG ressemblent à un effet de cloche en blocs autour des contours nets : l'encodeur ne peut littéralement pas se permettre de conserver les coefficients de haute fréquence qui décrivent le contour.

Le PNG ne fait aucune compression perceptuelle. Chaque rangée de pixels reçoit un préfixe de filtre d'un octet (None, Sub, Up, Average ou Paeth) qui prédit chaque pixel à partir de ses voisins, puis DEFLATE compresse les résidus. Si votre image est une photographie, les résidus sont encore du bruit de haute entropie et vous économisez très peu. Si c'est une capture d'écran pleine de couleurs unies répétées et de bords nets, les économies sont énormes.

Le WebP avec perte emprunte la prédiction intra spatiale de VP8 : chaque bloc 4x4 ou 16x16 est prédit à partir de pixels voisins déjà décodés en utilisant l'un des dix modes de prédiction, et seul le résidu est transformé et quantisé. Une meilleure prédiction signifie de plus petits résidus, ce qui signifie moins de bits. Le WebP sans perte (VP8L) va plus loin avec un cache de couleurs personnalisé, des transformations de palette et un codeur entropique adaptatif au contexte.

L'AVIF utilise essentiellement un encodeur de keyframe vidéo moderne complet. Les tailles de bloc vont de 4x4 jusqu'à 128x128, les transformations incluent DCT, ADST et identité dans plusieurs tailles, et il y a 56+ modes de prédiction intra incluant des prédicteurs directionnels à granularité angulaire fine. Le codeur arithmétique de style CABAC compacte significativement plus d'information par bit que les tables Huffman du JPG. Le résultat est environ 50 % de fichiers plus petits que le JPG à qualité visuelle équivalente, au coût d'un encodage beaucoup plus lourd.

Tailles de fichier en un coup d'œil

Same 4000x3000 photo (a daylight landscape, no transparency):
JPG  (q=85)   ->  1,180 KB
JPG  (q=92)   ->  1,940 KB
PNG  (24-bit) -> 12,420 KB
WebP (q=85)   ->    810 KB
WebP (lossless) -> 9,860 KB
AVIF (q=60)   ->    495 KB
AVIF (q=80)   ->    760 KB

Same 1920x1080 UI screenshot (flat colours, sharp text):
JPG  (q=92)   ->    410 KB  (text fringes visibly)
PNG  (8-bit indexed) ->  92 KB
PNG  (24-bit) ->    280 KB
WebP (lossless) ->  74 KB
AVIF (lossless) ->  88 KB

Deux enseignements de ces chiffres. Premièrement, sur des photographies naturelles, l'AVIF est environ 40 à 60 pour cent plus petit que le JPG et 30 à 40 pour cent plus petit que le WebP à qualité perçue équivalente. Deuxièmement, sur du contenu synthétique comme des captures d'écran et des exports d'interface, le WebP sans perte gagne généralement haut la main, le PNG-8 arrivant deuxième de près quand la palette tient.

Prise en charge des navigateurs en 2026

JPG et PNG : 100 pour cent. Il n'y a rien à débattre. Ils fonctionnent partout où existe un navigateur, y compris les tablettes Android vieilles de dix ans et les WebViews embarquées que vous avez oubliées.

WebP : effectivement 100 pour cent du trafic navigateur. Safari a déployé la prise en charge dans iOS 14 et macOS Big Sur dès 2020, Chrome et Firefox l'ont depuis bien plus longtemps, et même la plupart des navigateurs in-app décodent désormais le WebP. En 2026, servir du WebP sans repli JPG n'est plus imprudent pour un site grand public typique.

AVIF : environ 95 à 97 pour cent des navigateurs en 2026. Chrome, Edge, Firefox, Safari (16.4+) et les principaux WebViews Android le décodent tous. L'écart restant concerne surtout du très vieux Android, certaines WebViews embarquées sur des téléviseurs intelligents plus anciens, et une longue traîne d'appareils d'entreprise verrouillés. Pour un site public, l'AVIF avec un repli WebP ou JPG est une valeur par défaut sûre.

Transparence, animation et profondeur de couleur

Le JPG n'a aucun canal alpha. Si vous avez besoin d'une quelconque transparence, vous ne pouvez pas l'utiliser. C'est la raison la plus courante pour laquelle les designers se rabattent sur le PNG quand ils ne devraient pas.

Le PNG offre un véritable canal alpha 8 bits et prend en charge jusqu'à 16 bits par canal de couleur, ce qui le rend utile pour les intermédiaires de haute précision dans les pipelines graphiques. Il n'y a pas d'animation dans le PNG standard ; l'APNG existe mais la prise en charge est inégale en dehors des stickers et emojis.

Le WebP prend en charge l'alpha en mode avec perte comme sans perte et offre une prise en charge solide de l'animation, nettement plus efficace que le GIF animé. La profondeur de couleur est de 8 bits par canal, ce qui suffit pour presque tout contenu web.

L'AVIF prend en charge l'alpha, l'animation, la couleur 10 et 12 bits, les gamuts larges et les fonctions de transfert HDR. Si vous publiez de la photographie HDR ou des œuvres en gamut large, l'AVIF est actuellement le seul format web grand public capable de transporter les données fidèlement.

Décodage matériel et énergie

Le décodage JPG est si peu coûteux sur le matériel moderne que cela n'a pas vraiment d'importance ; même un téléphone de 2015 décode les JPG plus vite que l'écran ne peut les afficher. Le décodage PNG est plus lourd par pixel car DEFLATE ne se prête pas au parallélisme, mais les charges utiles PNG sont typiquement plus petites par image dans les cas d'usage de captures d'écran, donc cela s'équilibre en pratique.

Le décodage WebP avec perte utilise le même chemin silicium VP8 que les puces mobiles ont depuis plus d'une décennie. Le décodage est rapide et économe en énergie. Le décodage WebP sans perte est uniquement logiciel sur la plupart des puces mais reste largement dans les clous.

C'est avec l'AVIF que les choses deviennent intéressantes. Le décodage logiciel est véritablement plus lourd que JPG ou WebP, parfois d'un facteur trois à cinq sur une seule image. La bonne nouvelle est que la plupart des téléphones livrés après 2022 disposent d'un décodage AV1 matériel par lequel le navigateur peut router les images fixes ; sur ces appareils, l'AVIF est en fait aussi rapide que le JPG, voire plus rapide. Sur les ordinateurs portables plus anciens sans silicium AV1, décoder un mur de vignettes AVIF peut apparaître dans les profils CPU, alors utilisez-le judicieusement et appuyez-vous sur le balisage d'images responsive afin que la plus petite variante soit toujours celle décodée.

Quand utiliser quoi : la version courte

• Utilisez JPG pour les photographies quand vous avez besoin d'une compatibilité maximale absolue et que vous ne voulez pas maintenir plusieurs variantes. Une qualité de 82 à 88 est généralement le compromis idéal.
• Utilisez PNG pour les captures d'écran, les exports d'interface, les logos à bords nets, et tout ce qui nécessite une transparence sans perte en dépannage. Préférez le PNG indexé 8 bits quand la palette tient.
• Utilisez WebP comme format web par défaut en 2026. WebP avec perte pour les photos, WebP sans perte pour les ressources d'interface et icônes qui auraient auparavant été des PNG.
• Utilisez AVIF quand la bande passante et les Core Web Vitals comptent le plus, quand vous diffusez du contenu HDR ou en gamut large, ou quand vous voulez la plus petite image LCP possible. Associez-le toujours à un repli WebP ou JPG via l'élément picture.
• Évitez le GIF entièrement. Le WebP et l'AVIF animés sont plus petits et meilleurs visuellement à budget d'octets équivalent.

Un flux de conversion pratique

La plupart des équipes n'ont pas besoin d'un pipeline de build élaboré pour profiter des formats modernes. Le flux minimal viable est simple : gardez l'export original de l'appareil photo ou de l'outil de design comme source de vérité, puis générez les variantes JPG, WebP et AVIF au moment du déploiement. Pour les conversions ponctuelles, une CLI fait le travail en quelques secondes.

# Convert a single photo to all three modern variants
cwebp -q 85 hero.jpg -o hero.webp
avifenc --min 20 --max 30 -s 6 hero.jpg hero.avif

# Use the picture element so the browser picks the best one it understands
# <picture>
#   <source srcset="hero.avif" type="image/avif">
#   <source srcset="hero.webp" type="image/webp">
#   <img src="hero.jpg" alt="..." width="1600" height="900">
# </picture>

Si vous ne voulez pas installer d'outils en ligne de commande et que vous n'avez qu'une poignée d'images, Multilities propose un convertisseur d'images dans le navigateur à /tools/image-convert qui prend en charge JPG, PNG, WebP et AVIF dans toutes les directions sans téléverser vos fichiers où que ce soit ; tout fonctionne dans votre onglet. Pour gagner quelques octets supplémentaires sur un JPG ou PNG existant sans changer de format, /tools/image-compress réencodera à la qualité que vous choisissez et vous montrera les compteurs d'octets avant et après.

WebP vs PNG : la question qui ne meurt pas

La confusion la plus courante en 2026 reste WebP vs PNG. La réponse courte : le WebP sans perte est strictement meilleur que le PNG pour presque tout cas d'usage web. Il est plus petit, prend en charge le même canal alpha, et tous les navigateurs qui vous intéressent le décodent. Les seules raisons de continuer à utiliser le PNG aujourd'hui sont les outils en aval qui n'acceptent pas le WebP (certaines régies publicitaires, certains plugins CMS hérités, certains flux d'impression) et le fait que le PNG soit le format d'échange de facto entre designers.

Si vous construisez un nouveau produit à partir de zéro, configurez votre pipeline de ressources en WebP sans perte par défaut pour l'interface et en AVIF avec perte pour les photos, et ne repliez sur PNG et JPG que quand quelque chose refuse d'accepter le format moderne.

Pièges courants

• Ne réencodez pas un JPG en un autre JPG à plus haute qualité en espérant que le fichier ait l'air meilleur. La quantisation originale a déjà jeté de l'information ; vous ne ferez qu'agrandir le fichier.
• N'enregistrez pas les captures d'écran en JPG. L'effet de cloche en blocs autour du texte est inconfondable et irréparable. Utilisez PNG ou WebP sans perte.
• Surveillez le profil colorimétrique. AVIF et les encodeurs WebP modernes préservent les profils ICC par défaut ; les outils plus anciens les retirent et votre image décalera de teinte sur les écrans à gamut large.
• Testez l'échelle de qualité de votre encodeur AVIF. Différents encodeurs utilisent différentes conventions : libavif utilise une qualité de 0 à 100, tandis qu'avifenc utilisait historiquement un quantiseur min/max de 0 à 63 où plus bas est mieux.
• Si vous utilisez un CDN qui réencode à la volée, assurez-vous qu'il négocie effectivement l'AVIF via l'en-tête Accept. De nombreux CDN n'utilisent que le WebP par défaut sauf si vous activez un réglage.

Et JPEG XL ?

JPEG XL est un format véritablement bon, techniquement compétitif avec l'AVIF, et avec l'astuce unique de pouvoir transcoder sans perte les JPG existants à environ 20 pour cent de taille en moins. En 2026, Safari le déploie, Firefox le prend en charge derrière un drapeau, et Chrome ne l'active toujours pas par défaut. Tant que cela ne change pas, traitez le JXL comme un format à surveiller plutôt qu'à déployer. L'AVIF est le format moderne avec une prise en charge multi-navigateurs aujourd'hui.

L'arbre de décision en 30 secondes

Si c'est une photographie, générez AVIF et WebP, repli JPG. Si elle a de la transparence ou des bords nets, générez WebP sans perte, repli PNG. Si vous ne pouvez pas exécuter d'étape de build, livrez JPG pour les photos et PNG pour le reste et passez à autre chose. Les formats d'image ne sont plus un projet de recherche en 2026 ; les réponses sont en grande partie acquises et l'outillage est mature. Choisissez le bon format, mettez en place un repli, et consacrez le temps économisé à autre chose.