Lorsque vous êtes développeur, webmaster ou que vous souhaitez simplement stocker vos images de vacances sur votre disque dur, choisir le meilleur format de compression avec la qualité la plus adéquate est un enjeu crucial. Alors, prenons le temps d’analyser cela en profondeur pour comprendre si le très populaire JPEG mérite de dominer aux côtés du PNG, tandis que les formats WebP, AVIF et JPEG XL cherchent à détrôner ce format vieux de plus de 30 ans.
Dans cet article, je ne parlerai pas des formats sans compression destinés aux professionnels, car nous nous concentrerons sur les formats adaptés au web et au stockage personnel. De même, je ne traiterai pas des formats vectoriels, mais il est évident que le format SVG doit être utilisé dès que possible. Quant au GIF, je dois admettre que je l'ai oublié, comme il me semble indéniable que ce format soit totalement obsolète et offre une qualité d'image médiocre, préférez n’importe quel autre format qui permet l’animation dans cet article plutôt que celui-là.
Le PNG, le standard de compression sans perte
Commençons par un format bien connu : le PNG (Portable Network Graphics). Il s’agit d’un format sans perte, ce qui signifie qu’il conserve toute la qualité de l’image originale, mais au prix d'un poids élevé (mais moins que l’original bien sûr). De plus, il possède un canal alpha, contrairement au JPEG, ce qui le rend idéal pour les images avec des fonds transparents. Cependant, à la différence du GIF, le PNG ne gère pas l’animation. Pour cela, il faut se tourner vers l’APNG, son homologue animé.
Le JPEG, vieux de 30 ans, mais toujours le plus populaire en compression avec perte
Le JPEG (Joint Photographic Experts Group), identifiable par ses extensions .jpg ou .jpeg, est un format dont les brevets (expirés depuis 2006) étaient détenus par IBM et Mitsubishi Electric. Sa compression est uniquement avec perte, mais il demeure le format de référence en raison de sa compatibilité depuis très longtemps avec absolument tous les navigateurs, logiciels et e-mails, malgré sa limitation à 8 bits par couleur, insuffisante pour le HDR (High Dynamic Range). Ses principaux défauts sont l’absence de canal alpha pour la transparence et l'impossibilité de gérer l’animation.
La relève de la concurrence
Pour les formats suivants, nous nous concentrerons principalement sur les versions compressées avec perte, car ce sont celles qui nous intéressent pour le web. Sachez néanmoins qu’ils peuvent tous compresser sans perte, ce qui les rend également concurrents du PNG, notamment pour le stockage sur ordinateur où l’on possède beaucoup de place et l’on n’a pas besoin de connexion internet.
Le WebP de Google
Bien qu'il commence à dater, le WebP (Web Picture) est le plus à même de remplacer le JPEG grâce à sa popularité (autour des 13% d’utilisation sur le web). Développé par Google et utilisant le moteur V8 de Chromium, le WebP est un format libre de droit. Il est compatible avec tous les navigateurs modernes, gère la transparence et l’animation, et offre une compression efficace. Ses principales limitations sont la prise en charge limitée au sous-échantillonnage des couleurs (4:2:0), son plafond à 8 bits par couleur, rendant impossible le HDR, et un nombre de pixels inférieur à celui du JPEG (268 mégapixels max contre 625). Cependant, le format est largement compatible avec les outils de retouche d'image et tous les navigateurs.
L’AVIF pour une meilleure compression
En 2012, alors que MPEG annonce son intention de licencier le brevet du H.265 (HEVC), successeur du H.264 — un codec de compression vidéo omniprésent — le mécontentement grandit parmi les industriels de la tech pour qui la compression est un enjeu stratégique. Les redevances, annoncées à la hausse par rapport à son prédécesseur, leur coûtent parfois plusieurs millions de dollars par an. En 2015, face à l’arrivée d’un nouveau pool de brevets pour le HEVC nommé HEVC Advanced et à l’incertitude quant aux royalties des prochains codecs proposés par MPEG LA (la société qui gère les brevets de MPEG), un consortium nommé Alliance for Open Media (AOM ou AOMedia) est créé avec comme fondateur Amazon, Cisco, Google, Intel, Microsoft, Mozilla, ARM, Huawei, Samsung, Tencent, Meta, Nvidia, Apple et Netflix. Sa mission est d’améliorer la compression des vidéos et des images en proposant un codec libre de droits afin de mettre fin aux problèmes liés aux brevets. C’est ainsi qu’en 2018 est né AV1 (AOMedia Video Codec), un codec nettement plus performant que son concurrent le HEVC.
Un an plus tard, en février 2019, le consortium s’attaque à l’image en présentant AVIF (AV1 Image File Format), un format d’image libre de droits issu de la compression vidéo du codec AV1 et encapsulé dans le HEIF, un conteneur aussi utilisé par son concurrent le plus proche techniquement nommé HEIC, qui utilisé par Apple et basé sur le codec HEVC (encore lui). Actuellement supporté par tous les navigateurs (Edge étant le dernier à l’accepter depuis début 2024), ce format présente de nombreux avantages. En plus de la gestion traditionnelle de la transparence et de l’animation, les images peuvent être disponibles en HDR (jusqu'à 12 bits, correspondant au Dolby Vision) avec un sous-échantillonnage de la chrominance en 4:2:0, 4:2:2 et 4:4:4. Mais son plus grand atout est sa compression avec perte, nettement plus performante, offrant un gain de place d’environ 50 % par rapport au JPEG, 30 % par rapport au WebP, et jusqu’à 80 % par rapport aux GIF pour les séquences animées.
Si la compression avec perte de l’AVIF offre d'excellents résultats, il en va tout autrement pour la compression sans perte. L'AVIF est surpassé par ses concurrents comme le WebP et le PNG, qui obtiennent de meilleurs résultats. Un autre point faible de l’AVIF est sa résolution maximale, nettement inférieure à celle du WebP, avec un total de 35 mégapixels. En effet, en utilisant un codec vidéo, l’AVIF est limité à un format maximal de 8K cinéma (8 192 × 4 320 px), ce qui peut sembler insuffisant pour certaines réalisations professionnelles. Toutefois, il est possible de compenser en encodant des tuiles indépendantes, permettant ainsi une résolution de 65 536 x 65 536 px, soit 429 mégapixels, ce qui reste toutefois inférieur aux 625 mégapixels atteints par le JPEG.
En termes de popularité, le format AVIF est principalement utilisé par des sites à fort trafic, mais son adoption progresse lentement comme le montre ce graphique de l’évolution sur un an.
JPEG XL, un format pour les gouverner tous… mais désavoué
Sorti en 2022, le JPEG XL se veut être le saint Graal des formats d’image, destiné à remplacer tous les formats existants, quelle que soit leur utilisation. Il est issu de la combinaison de deux formats d’images abandonnés : le Pik, que Google envisageait d'utiliser pour créer le WebP v2 avant d'abandonner le projet à l'annonce du JPEG XL, et le FUIF.
Le JPEG XL (X pour sa création après le JPEG 2000, et L pour sa vocation à durer à long terme) se distingue par son excellente compression avec perte, bien que moins performant que l'AVIF, mais aussi sur la compression sans perte, où il est alors deux fois plus performant que l'AVIF. De plus, il permet de recompresser des images JPEG existantes, soit en fichier JPEG XL (.jxl), ou alors en les laissant en JPEG (.jpg) réduisant leur taille d'environ 20 % en moyenne sans perte de qualité. Cette fonctionnalité unique évite les artefacts et l'augmentation de la taille souvent causés par le transcodage lors d’une compression sans perte par d’autres formats.
Le JPEG XL se distingue également par sa rapidité d'encodage. Contrairement à l'AVIF, souvent critiqué pour sa lenteur, le JPEG XL offre une vitesse d'encodage environ trois fois plus rapide, tout en conservant des taux de compression similaires. En ce qui concerne la résolution, le JPEG XL dépasse largement l’AVIF avec plus d’un milliard de pixels de long et de large, totalisant 1 152 921 502 459 mégapixels. En termes de profondeur de couleur, le JPEG XL supporte 32 bits flottants ou 24 bits entiers, contre 12 pour l’AVIF, et peut gérer jusqu'à 4 099 canaux (3 ou 4 pour les couleurs, 1 pour la transparence et les autres pour des données supplémentaires comme la profondeur ou des informations thermiques), comparé aux quatre canaux de l'AVIF.
Enfin, le JPEG XL réintroduit la fonctionnalité de l’image progressive, perdue avec les formats d’image utilisant des codecs vidéo (comme le WebP et l’AVIF). Cette fonctionnalité permet ici, au lieu de n’afficher l’image que lorsqu’elle est complète, de l’afficher progressivement de haut en bas ou de flou à net dès que 15 % des données sont reçues, une caractéristique appréciée à l’époque des faibles débits et redevenue importante avec la disparité des vitesses de connexion dans le monde.
En conclusion, le JPEG XL excelle dans tous les domaines et fonctionnalités, sauf peut-être la compression où il est légèrement moins bon que l’AVIF. Cette supériorité s'explique en partie parce qu'il s'agit d'un véritable format d'image et non d'une "capture d'écran" dû à la conteneurisation d'une vidéo compressé par un codec. Ses créateurs ont voulu en faire un format d’image universel, le standard ultime pour tous les usages, un anneau pour les gouverner tous… Cependant, le JPEG XL a un défaut majeur qu'il ne peut contrôler : il n'est actuellement pris en charge par aucun navigateur, à l'exception de Safari 17.
Pour être plus précis, en 2021, alors que les développeurs de Chromium avaient introduit le format en phase expérimentale (nécessitant l'activation des flags associés sur Chrome), ils ont finalement décidé de le retirer expliquant que le format n'offrait pas suffisamment d'avantages par rapport aux autres formats existants et n'attirait pas assez d'intérêt pour justifier la maintenance de sa compatibilité sur Chrome. Le format se trouve donc privé d’au moins deux tiers des utilisateurs dans le monde sans compter Firefox qui ne l’a toujours pas implémenté. En attendant, si vous voulez rendre Google Chrome compatible avec le JPEG XL, vous pouvez télécharger cette extension et vérifer que cela marche sur ce site.
Quel est le meilleur format de compression avec perte ?
Tableaux récapitulatifs
Avant de conclure sur le meilleur format pour vos images, voici deux tableaux récapitulatifs :
Comparaison
Pour la comparaison des formats, je vous conseille vivement de regarder cet article de Jake Archibald qui compare le JPEG, le WebP et l’AVIF. Cependant étant donné que le JPEG XL n’est pas inclu dans l’article car il n’existait pas à l’époque, je me vois dans l’obligation de vous faire mes propres comparatifs via les images d’exemples proposé par Squoosh, un site créer par Google et qui permet de faire des compression d’image facilement. Pour cela je vais comparez dans un premier temps le JPEG, le WebP, l’AVIF et le JPEG XL sans changer aux paramètres par défaut puis avec un niveau de qualité acceptable, c’est à dire dont on ne vois pas d’artefacte sur l’image qui nous laisserais penser à une compression. J’aurais aimer vous montrer les image mais Ghost qui est le CMS que j’utilise pour rédiger mes articles de blog ne me permet pas de faire de comparatif d’image et l’AVIF n’a d’ailleur pas l’air d’avoir était pris en charge par mon thème donc je vais devoir développer moi même quelque chose que je vous mettrait en intégration lorsque cela sera fait, pour l’instant n’ésitez pas à aller sur cette partie du site de Jake Archibald qui permet de faire une comparaison avec un slider.
Comme vous pouvez le voir, l’AVIF est un format vraiment très performant au niveau du poids même si, il est vrai, que le WebP et le JPEG XL peuvent être compressé avec des niveaux de qualité plus basse tout en gardant une qualité acceptable ce qui ressert un peu plus la différence. Néanmoins il faut aussi rappeler que le WebP n’est pas HDR contrairement à ces concurent et que les deux format JPEG sont les seuls à proposer une image progressive. Aussi j’ai était étonné de voir que pour le logo en SVG, la compression donnez un résultat plus lourd pour le JPEG XL et similaire (mais du coup de moins bonne qualité) pour le WebP. En conclusion, préférer le l’AVIF pour tout et le SVG pour des illusatrations simples
Implémention et futur
Quel format choisir pour un site web ?
Soyons très clair, ma réponse va être la même que pour les autres site web qui traite du même sujet et que j’ai lu pour réalisé mon article. Étant donné que l’on ne peut pas prévoir ce qui se passera à l’avenir (j’en parle juste après) et que les utilisateurs possèdent tous des appareils différents et des navigateur qui peuvent à un moment ou un autre changer de compatibilité avec certains format (cf le JPEG XL), il vous faut, si vous êtes développeur, mettre en place un moyen de combler toute éventualité pour éviter le plus possible d’avoir une image incompatible. Pour cela il existe la balise <picture>
qui permet de mettre en enfant des balises <source>
qui remplaçerons la source de l’image de la balise <img>
si le format décrit dans la source est compatible avec le navigateur et cela en commençant par la balise la plus en haut, voici un exemple concret :
Ainsi je vous conseille, de mettre en premier le format AVIF dans <source>
qui, comme on l’a vue dans cet article, est le plus léger et avec le plus de fonctionnalité par rapport à sa compatibilité avec les navigateurs, cependant il est toujours bien de s’assurer de la visibilité de l’image en cas de problème en mettant un fichier au format WebP dans la balise <img>
. Pour l’instant, on ne peut pas mettre de type image/jxl
pour le JPEG XL mais si cela deviens possible et que la taille de celui-ci s’avère en dessous de l’avif alors vous pourez prévoir pour le futur en mettant le type en premier parmis les sources. Pour ce qui est des formats JPEG et PNG, vous pouvez les oublier, ils ont fait leur chemin et ne sont plus utiles. Enfin, si j’amais vous comptez présenter un graphique, logo ou autres image simples, n’oubliez pas que le SVG est toujours à préférer car il permet d’avoir un niveau de qualité infini.
Le futur des formats d’images
En voyant cette ribembelle de format, je me demande si on arrivera un jour à avoir un format qui pourra tout faire, cependant quand on y repense, pour l’audio il y a des format différent pour chque usage, avec ou sans perte, donc commencer à voir des formats d’image qui font les deux et très bien (à pars pour l’AVIF) c’est déjà une bonne voix, surtout qu’avec le JPEG XL je me dit que l’on a enfin atteint la limite des fonctionnalités disponible, le format propose déjà plus que ce que n’importe qui ne pourra exploiter (il y a quand même 4099 couche contre 4 pour les autres formats) et j’espère que celui-ci sera utilisé au moins pour le stockage car il n’a pour l’instant aucun équivalent au niveau de ce qu’il peut faire par rapport à sa puissance de compression, il ne reste qu’aux système d’exploitation et aux logiciels de l’accepter.
Au niveau du web cependant, je ne pense pas que l'AVIF aurra un avenir car dans ce cas là en plus d’être plus léger, il est aussi soutenu par un grand nombre d’entreprises de la tech dont je les verrai mal utiliser un autre format que celui qu’ils ont imaginé, la possiblité d’avoir une image progressive n’est en soit pas si primordiale que cela et puis j’ai surtout l’impression qu’il y a une volonté plus profonde vraiment vouloir en finir avec cette multitude de formats. J’en ai d’ailleurs pour preuve que l’AOMedia est entrain de préparé le codec AV2 qui pourra, on l’imagine, être utilisé pour réalisé des images au format AVIF comme c’est le cas avec l’AV1. Ainsi on se dirigerais vers une mise à jours d’un format sur la durée plutôt que d’un changement radical permettant pourquoi pas de corriger les principeaux défauts de l’AVIF. Pour ce qui est du WebP, le format est de plus en plus populaire et arrive même au niveau du GIF dans sa popularité. Voici donc un graphique de l’état actuelle des formats au début juillet 2024, autant vous dire qu’il y a encore du chemin pour remplacer le JPEG et le PNG
Sources
Liste des formats d’image et de leurs fonctionnalités — La Fibre.info
AVIF, le format de fichier qui est plus efficace que WebP et JPEG — La Fibre.info
JPEG XL vs AVIF: a comparison — tonisagrista.com
L’AVIF prend enfin ses aises sur Internet : c’est quoi ce format d’image ? — next.ink
Image Coding Comparisons — googleapis.com
AVIF has landed — jakearchibald.com