AVIF vs WebP vs JPG : le grand duel des formats d'image modernes
Pourquoi ce comparatif est vraiment important
Ne pense pas que le choix d'un format d'image est une simple question d'esthétique. Ce n'est pas le cas. Un seul format mal choisi sur une page produit à fort trafic peut ajouter 200 à 400 Ko par image. Cela se transforme en secondes de temps de chargement supplémentaires et en baisses mesurables du taux de conversion. Les Core Web Vitals de Google pénalisent directement les mauvais scores de Largest Contentful Paint, et les images sont les coupables habituels. Choisir entre AVIF, WebP et JPG a de réelles conséquences sur le SEO, la facture de bande passante et la fidélisation des utilisateurs. Le JPG domine la photographie depuis le milieu des années 90. Il fonctionne partout, s'encode rapidement, et tous les développeurs savent comment le gérer. Le format WebP de Google est arrivé en 2010 pour le remplacer, promettant une meilleure compression pour une qualité identique. Le nouveau venu est l'AVIF, standardisé en 2019 par l'Alliance for Open Media. Il pousse la compression encore plus loin en empruntant la technologie du codec vidéo AV1. Le but ici n'est pas de déclarer un format grand vainqueur. Ce serait inutile. L'objectif est de comprendre les compromis spécifiques pour que tu puisses faire le bon choix pour *ton* projet, au lieu de simplement suivre des conseils obsolètes datant de 2021. Nous allons analyser la compression en conditions réelles, la compatibilité des navigateurs et les coûts cachés comme la vitesse d'encodage, pour te donner le contexte nécessaire pour utiliser chaque format efficacement et savoir quand il est temps de convertir.
Performances de compression : les chiffres derrière la hype
Oui, les formats modernes sont radicalement plus légers que le JPG. Cette partie de la hype est vraie. Mais le gain de taille dépend de l'image, de l'encodeur et de la qualité que tu vises. Pour une photographie classique, un fichier WebP est généralement 25 à 35 % plus léger qu'un JPG de qualité visuelle équivalente. L'AVIF va encore plus loin, atteignant souvent 40 à 55 % de moins que le JPG, soit environ 15 à 25 % de moins que le WebP. Cela signifie qu'une photo de produit de 180 Ko (JPG, qualité 85) pourrait peser 120 Ko en WebP ou 90 Ko en AVIF. Les économies sont réelles. Mais tu ne peux pas simplement comparer les indices de qualité entre les formats. Ils ne sont pas équivalents. Un JPG à « qualité 85 » n'est pas la même chose qu'un WebP à « qualité 85 ». Faire passer un JPG de 85 à 75 dans ImageMagick peut réduire drastiquement la taille du fichier, mais cela introduira aussi des artefacts en blocs dans les dégradés et les ciels. Le WebP utilise une échelle de 0 à 100 où 80 est un bon point de départ, à peu près équivalent à un JPG à 85. L'AVIF utilise une échelle de Constant Rate Factor (CRF), généralement de 0 à 63, où la valeur la plus basse est la meilleure. Pour les photos web, un CRF de 30 à 40 est souvent le juste milieu. La situation est différente pour les graphiques comme les captures d'écran d'interface, les logos ou les infographies. Le PNG a longtemps été la référence pour sa qualité sans perte, mais le mode sans perte du WebP produit systématiquement des fichiers 20 à 30 % plus légers. Le mode sans perte de l'AVIF est moins mature et peut parfois créer des fichiers *plus lourds* que le WebP sans perte pour ce type de contenu. Ne pars pas du principe que l'AVIF gagne à tous les coups. L'équipe Squoosh de Google a mené des tests qui ont confirmé la supériorité générale de l'AVIF en matière de compression, mais ils ont aussi constaté que cet avantage diminue lorsque l'on travaille avec des images sources déjà fortement compressées. Si tu reconvertis un tas de vieux JPG au lieu de partir d'originaux de haute qualité, les gains seront moindres. En gros, si tu pars d'un fichier médiocre, tu obtiendras un fichier médiocre un peu plus léger.
Compatibilité navigateurs et plateformes : là où ça se complique
Soyons clairs : la compatibilité du JPG est universelle. Tous les navigateurs, systèmes d'exploitation, visionneuses d'images, CMS, CDN et clients de messagerie le gèrent sans problème. Ne sous-estime pas cet avantage ; c'est un niveau d'ubiquité que les nouveaux formats ne peuvent tout simplement pas encore égaler. Pour une utilisation web, la compatibilité du WebP est maintenant excellente. En 2024, tous les navigateurs majeurs — Chrome, Firefox, Safari (depuis la version 14), Edge, Opera — le prennent en charge. La compatibilité globale dépasse les 97 % sur caniuse.com. Les seuls vrais réfractaires sont les anciennes versions de Safari sur iOS 13 et inférieur, ce qui n'est peut-être pas un problème pour ton public. La compatibilité de l'AVIF est bonne, mais il faut être plus prudent. Chrome le prend en charge depuis la version 85 (2020), Firefox depuis la 93 (2021), et Safari l'a finalement rejoint avec la version 16 (2022). Cela couvre la plupart des utilisateurs, mais tu peux encore rencontrer des problèmes avec Edge sur d'anciennes versions de Windows 10 ou sur certaines WebViews Android. La compatibilité globale oscille autour de 93-95 %. Ça semble excellent, mais pour un site à fort trafic, les 5 à 7 % d'utilisateurs qui voient une image cassée représentent un problème très réel. En dehors du navigateur, les choses se compliquent. Pour les applications de bureau, les applications mobiles ou les e-mails, la compatibilité est un patchwork. macOS prend en charge l'AVIF depuis Ventura (13.0). Windows 11 le supporte, mais Windows 10 nécessite un codec du Microsoft Store. Android le prend en charge depuis la version 12, et iOS depuis la 16. Tout cela n'a aucune importance si tu utilises l'élément HTML `<picture>` avec les bons fallbacks, mais c'est un vrai casse-tête si tu t'attends à ce que les utilisateurs téléchargent et ouvrent ces fichiers eux-mêmes. La seule stratégie sensée pour un site web en production est de servir les images en cascade : d'abord l'AVIF, puis le WebP comme solution de repli, et enfin le JPG pour tout le reste. Tu peux mettre cela en œuvre en utilisant les balises `source` de l'élément `<picture>` avec les attributs `type`, ou en vérifiant l'en-tête `Accept` sur ton serveur. Ne te contente pas de servir de l'AVIF en espérant que tout se passe bien.
Vitesse d'encodage et outils : le coût caché
Il y a un coût caché à l'incroyable compression de l'AVIF : le temps. L'encodage AVIF est terriblement lent comparé au JPG ou au WebP, et cela a des conséquences réelles sur ton flux de travail. Regardons les chiffres. Encoder une photo de 2000×1500 en JPG (qualité 85, libjpeg-turbo) peut prendre 50 à 80 millisecondes sur une machine moderne. La même image en WebP (qualité 80, libwebp) prend 200 à 400 millisecondes. Mais l'encoder en AVIF (CRF 32, vitesse 6) peut prendre de 2 à 8 *secondes*. Et si tu pousses l'encodeur à son réglage le plus lent et de la plus haute qualité, tu pourrais attendre 30 secondes ou plus pour une seule image. Pour un lot de 500 images de produits, c'est la différence entre une pause-café de 5 minutes et une attente de 4 heures. Si tu génères des images à la volée, comme le font certains CDN, ce genre de surcharge à l'encodage peut ajouter une latence inacceptable, à moins que ta gestion du cache soit parfaite. L'encodeur libavif a un paramètre de vitesse de 0 (le plus lent, meilleure compression) à 10 (le plus rapide, moins bonne). La vitesse 6 est la recommandation standard, un bon compromis entre la taille du fichier et ta propre santé mentale. La vitesse 10 est presque aussi rapide que le WebP, mais tu sacrifies une grande partie de l'avantage de compression de l'AVIF. CocoConvert gère cette complexité pour toi sur le serveur, mais les lois de la physique s'appliquent toujours : les gros lots de conversions AVIF prendront beaucoup plus de temps que les traitements WebP ou JPG. Si tu es pressé, le WebP est souvent le choix le plus pratique, même si l'AVIF pourrait économiser quelques kilo-octets de plus. L'outillage pour le WebP est mature et stable ; cwebp, Squoosh, ImageMagick, et la bibliothèque Node.js Sharp ont tous une prise en charge robuste. L'outillage pour l'AVIF progresse — Sharp a ajouté le support dans la v0.27.0 et ImageMagick utilise libheif — mais quiconque s'est déjà battu avec un problème de dépendance de bibliothèque sait que « rattraper son retard » peut signifier rencontrer des bugs étranges et des conflits de version qui n'existent tout simplement pas dans le monde du JPG et du WebP.
Qualité d'image à bas débit : là où les formats divergent le plus
Avec des réglages de haute qualité, la plupart des images compressées ont un bon rendu. Le vrai test arrive à bas débit, quand on essaie de gratter le moindre octet d'un fichier. C'est là que les formats révèlent leur vraie nature, et les différences sont évidentes. La forte compression JPG est tristement célèbre pour ses artefacts en blocs. À une qualité de 40-50, les dégradés lisses d'un ciel bleu se fracturent en une mosaïque de carrés. Le texte se pare d'un halo flou et vibrant. On a tous vu ça, et c'est moche. Le WebP, pour la même taille de fichier, a tendance à flouter plutôt qu'à créer des blocs. Il lisse les détails fins. Cet artefact peut être plus agréable pour les portraits, où le flou semble plus naturel que les blocs durs du JPG. Pour les images avec des lignes nettes ou du texte, cependant, ce même flou peut être un inconvénient majeur. C'est là que l'AVIF brille vraiment. À bas débit, il pulvérise les deux autres. Son encodage basé sur AV1 est tout simplement meilleur pour préserver les détails et gérer les dégradés avec finesse. Une image AVIF de 50 Ko a simplement l'air plus nette qu'un WebP ou un JPG de la même taille. Le véritable avantage de l'AVIF ne se situe pas à une qualité de 90, où tout est parfait ; il se situe à une qualité de 50-60, là où tu repousses les limites. Les métriques perceptuelles le confirment. Un paysage de 1200×800 compressé à 50 Ko pourrait obtenir un score DSSIM de 0.008 pour le JPG, 0.005 pour le WebP, et 0.003 pour l'AVIF (plus le score est bas, mieux c'est). Ce ne sont pas que des chiffres ; ils représentent des améliorations visibles. Si tu as un budget de taille de fichier strict, l'AVIF te donnera systématiquement la plus belle image. Il y a une exception : le grain de film fin ou les textures naturelles. L'encodeur AVIF peut être trop zélé en lissant ces détails, ce qui donne un aspect légèrement artificiel, presque plastique, à certaines photos prises à haute sensibilité ISO. Teste toujours sur tes propres images ; ne pars pas du principe que l'AVIF est une solution miracle pour tout type de contenu.
Cas d'usage pratiques : associer le format à l'objectif
La théorie, c'est bien, mais où devrais-tu réellement utiliser chaque format ? Voici un guide pragmatique pour les scénarios courants. **Images Hero et photos de produits pour un site web :** Opte pour l'AVIF, avec le WebP puis le JPG en fallback. Tu contrôles l'environnement, donc tu peux utiliser l'élément `<picture>` pour servir le meilleur format. Les économies de bande passante sont énormes. Un outil comme CocoConvert peut convertir par lots tes originaux JPG en AVIF et WebP pour te faciliter la tâche. **Images pour e-mails :** JPG. Point final. Les clients de messagerie sont un terrain vague de rendus incohérents. Ni l'AVIF ni le WebP ne bénéficient d'un support fiable dans Outlook, Apple Mail ou Gmail. Envoyer un WebP affichera simplement une image cassée pour une grande partie de ton audience. **Uploads sur les réseaux sociaux :** Reste sur du JPG de haute qualité. Chaque plateforme (Instagram, Twitter/X, Facebook) va ré-encoder ton image quoi que tu télécharges. Donne à leurs encodeurs la meilleure matière première possible ; uploader un AVIF pré-compressé ne t'apporte rien. **Impression ou archivage :** Aucun des deux. Utilise un format sans perte comme le TIFF ou le PNG pour tes originaux. Si tu dois envoyer un aperçu compressé, un JPG de haute qualité (90-95) est le standard universel que n'importe quel imprimeur ou éditeur peut ouvrir. **Ressources pour applications mobiles :** Ça dépend de ta version d'OS minimale ciblée. Si tu développes pour Android 12+ et iOS 16+, l'AVIF est un excellent choix. Pour une compatibilité plus large, le WebP est le pari le plus sûr, fonctionnant jusqu'à Android 4.0 et iOS 14. **Contenu de CMS :** Sois prudent avec l'AVIF. Lorsque des utilisateurs non techniques téléchargent des images, tu veux le flux de travail le plus fiable possible. De nombreuses médiathèques de CMS et générateurs de miniatures ne gèrent toujours pas correctement l'AVIF. Le JPG et le WebP sont bien plus pratiques et moins susceptibles de générer des tickets de support pour des aperçus d'images cassées.
Comment convertir entre ces formats (et à quoi faire attention)
Convertir entre ces formats est facile avec les bons outils, mais quelques pièges peuvent ruiner tes traitements par lots si tu ne fais pas attention. La règle d'or de la conversion : pars toujours de la source de la plus haute qualité. Convertir un JPG en AVIF ne restaure pas comme par magie les détails que la compression JPG a déjà détruits. Il ne fait qu'envelopper les mêmes données dégradées dans un nouveau format. Si tu as des originaux RAW ou TIFF, utilise-les. Si tout ce que tu as est un JPG, le convertir en AVIF rendra le fichier plus petit, mais n'améliorera pas l'aspect de l'image. Utiliser un outil comme CocoConvert simplifie le processus : tu uploades, tu choisis un format et tu télécharges. Les paramètres de qualité par défaut pour la conversion JPG vers WebP sont réglés pour maintenir la qualité visuelle. Pour le JPG vers AVIF, les réglages par défaut trouvent un équilibre entre la taille du fichier et la qualité, mais tu devrais envisager de demander une qualité supérieure pour les images qui seront affichées en grand et examinées par les utilisateurs. Soyons francs sur une limitation : CocoConvert ne gère pas les formats animés. Convertir un WebP animé en AVIF animé est une tout autre affaire, impliquant la synchronisation des images et les palettes de couleurs. Pour cela, tu devras sortir un outil en ligne de commande comme FFmpeg. Fais attention à la transparence. Le JPG ne la gère pas, point final. Si tu convertis un PNG ou un WebP transparent en JPG, l'arrière-plan sera rempli d'une couleur unie, généralement du blanc ou du noir. L'AVIF et le WebP gèrent très bien la transparence (le canal alpha), donc la conversion entre eux la préserve. Assure-toi simplement de ne pas faire passer accidentellement une image transparente par une étape de conversion en JPG dans ton processus. Enfin, une dose de pragmatisme. Avant de générer des versions AVIF et WebP pour chaque image, demande-toi si tu as vraiment besoin des deux. Générer deux formats double ton temps de traitement et ton stockage. Pour de nombreux sites, le simple fait de standardiser sur le WebP est une amélioration massive par rapport au JPG et couvre plus de 97 % des utilisateurs avec beaucoup moins de complexité. L'AVIF est puissant, mais ne l'ajoute que si ta facture de bande passante justifie vraiment le travail supplémentaire.