AVIF en 2026 : le format web du futur (vraiment cette fois)

Qu'est-ce que l'AVIF, techniquement

AVIF signifie AV1 Image File Format. C'est un format d'image basé sur le codec vidéo AV1, lui-même développé par l'Alliance for Open Media — un consortium fondé en 2015 qui regroupe Google, Netflix, Mozilla, Amazon, Microsoft, Apple, Meta et Intel. L'objectif initial était de créer un codec vidéo de nouvelle génération libre de royalties (contrairement à HEVC/H.265) pour le streaming en 4K et 8K.

L'idée de l'AVIF est née naturellement : si l'AV1 compresse si bien la vidéo, pourquoi ne pas l'utiliser pour des images fixes ? La spécification AVIF a été finalisée en 2019, et les premiers supports navigateurs sont arrivés en 2020 (Chrome 85). Depuis, l'adoption a été progressive et a atteint sa masse critique en 2024-2025.

Techniquement, l'AVIF utilise les outils de compression spatiale d'AV1 (analyse par blocs, prédiction intra-image, transformation et quantification adaptatives) sans les outils de compression temporelle (qui n'ont pas de sens pour une image fixe). Le résultat est un fichier image qui peut peser jusqu'à 50 % de moins qu'un JPG à qualité visuelle équivalente, tout en supportant la transparence, le HDR, le wide color gamut et même les images animées.

AVIF vs WebP vs JPG : le comparatif chiffré

Prenons une photo standard de 4000 × 2667 pixels (résolution typique d'un appareil photo numérique 12 mégapixels) et exportons-la dans les trois formats à qualité 80 :

— JPG : 1 240 Ko en moyenne. Lisible partout depuis 30 ans. Pas de transparence. — WebP : 720 Ko (–42 % vs JPG). Lisible par 97 % des navigateurs en 2026. Transparence supportée. — AVIF : 480 Ko (–61 % vs JPG, –33 % vs WebP). Lisible par 94 % des navigateurs en 2026. Transparence + HDR + wide color.

L'écart est encore plus spectaculaire sur les graphismes avec aplats de couleur (logos, illustrations vectorisées) : un PNG transparent de 500 Ko peut tomber à 80 Ko en WebP et descendre sous 50 Ko en AVIF, sans aucune différence visible.

Sur une page web type avec 20 images en moyenne, passer de JPG à AVIF économise typiquement 8-12 Mo de bande passante par visite, ce qui se traduit par 1-2 secondes de LCP en moins sur mobile en 4G. Pour un site à fort trafic, c'est aussi des économies CDN substantielles : si vous payez à la requête (Cloudflare, Vercel, AWS), la facture mensuelle baisse proportionnellement.

La compatibilité en 2026 : qui supporte AVIF ?

Voici l'état des supports en 2026 (source caniuse.com mai 2026) :

Support complet : — Chrome (depuis v85, août 2020) et tous les navigateurs Chromium (Edge, Opera, Brave, Vivaldi, Samsung Internet) — Firefox (depuis v93, octobre 2021) — Safari sur macOS (depuis v16, septembre 2022) et sur iOS/iPadOS (depuis v16, septembre 2022)

Support partiel ou absent : — Vieux Safari sur iOS 15 et antérieurs : pas de support natif. Avec l'extinction progressive de ces versions, on est à environ 3 % d'utilisateurs concernés en 2026. — Navigateurs in-app de réseaux sociaux : généralement à jour mais certains sont en retard, surtout sur le marché chinois. — Internet Explorer : zéro support, mais on s'en moque en 2026 (parts de marché < 0,5 %).

Total en 2026 : environ 94 % des utilisateurs mondiaux peuvent voir un AVIF. Pour les 6 % restants, on sert un fallback WebP ou JPG via la balise HTML <picture>. La stratégie multi-format est désormais standard sur tous les sites professionnels.

Encoder en AVIF : 3 outils en 2026

Méthode 1 — PixFlow (le plus simple). Allez sur pixflow.tech/fr/convert-jpg-to-avif ou pixflow.tech/fr/convert-png-to-avif, glissez vos fichiers, ajustez la qualité (80 par défaut, le bon compromis), téléchargez les AVIF. Traitement 100 % local dans votre navigateur, par lots, gratuit illimité. Idéal pour un usage ponctuel ou la préparation d'un catalogue.

Méthode 2 — Squoosh.app (Google Labs). Outil web gratuit de Google qui propose un comparatif visuel entre formats. Vous chargez une image, vous voyez le JPG, le WebP et l'AVIF côte à côte, vous ajustez la qualité finement, et vous téléchargez. Excellent pour comprendre l'impact des paramètres d'encodage. Plus lent que PixFlow pour le traitement par lots.

Méthode 3 — Sharp / ImageMagick / FFmpeg en ligne de commande. Pour les pipelines de build CI/CD ou les transformations automatisées côté serveur. Sharp (librairie Node.js) est devenu le standard de fait pour les frameworks JS modernes (Next.js, Astro, Eleventy) avec l'optimisation d'images native. ImageMagick reste utile pour les scripts batch sur des milliers d'images. FFmpeg sait aussi encoder de l'AVIF, utile si vous traitez aussi de la vidéo.

Le temps d'encodage en AVIF est plus long qu'en WebP (typiquement 5 à 10 fois plus selon la qualité visée), parce que l'algorithme AV1 explore plus d'options de compression. Pour des centaines d'images, comptez plusieurs minutes en batch. Une fois encodé, le fichier final est plus petit et reste de meilleure qualité — ça paie sur la durée d'utilisation.

Servir l'AVIF en production : la balise <picture>

Une fois vos images encodées dans plusieurs formats, le déploiement se fait via la balise HTML <picture> qui sert automatiquement le format optimal selon le navigateur :

<picture> <source srcset="hero.avif" type="image/avif"> <source srcset="hero.webp" type="image/webp"> <img src="hero.jpg" alt="..." loading="eager" fetchpriority="high" width="1920" height="1080"> </picture>

L'ordre est important : le navigateur teste les <source> dans l'ordre et sert le premier qu'il peut décoder. Donc AVIF d'abord (le plus moderne et léger), WebP en backup, et JPG en dernier recours pour les très vieux navigateurs.

Pensez à ajouter les attributs width / height sur la balise <img> pour réserver l'espace et éviter le CLS, et fetchpriority='high' + loading='eager' pour les images critiques (hero, above the fold). Les images plus bas dans la page peuvent rester en loading='lazy' (défaut) pour économiser la bande passante.

Les frameworks modernes (Next.js Image, Astro Image, Eleventy Image, Nuxt Picture) automatisent tout ce processus : vous fournissez l'image source, ils génèrent les versions AVIF/WebP/JPG aux bonnes tailles et produisent la balise <picture> au build. Vous gagnez en temps de développement et en cohérence.

Les limites et pièges de l'AVIF en 2026

L'AVIF n'est pas magique. Voici les pièges à connaître :

1. Encodage lent. Convertir un dossier de 500 photos en AVIF prend significativement plus de temps qu'en WebP. Pour des pipelines automatisés (CI/CD), cela peut allonger les builds. Mitigation : encoder en parallèle avec autant de workers que de CPU cores.

2. Pas le meilleur format pour le streaming progressif. Le JPG progressive permet d'afficher une version basse résolution dès que les premiers octets arrivent, qui s'affine au fur et à mesure. L'AVIF n'a pas cet équivalent natif — il s'affiche complet une fois entièrement téléchargé. Pour des images > 200 Ko sur connexion lente, le ressenti utilisateur peut être moins fluide.

3. Outils de retouche traditionnels en retard. Photoshop a ajouté le support AVIF en 2023 mais via plugin tiers. Lightroom Classic, Affinity Photo, GIMP : support inégal selon les versions. Si vous voulez retoucher des AVIF, restez plutôt en PNG/TIFF pour le travail et exportez en AVIF seulement à la fin.

4. Compatibilité incomplète pour les navigateurs in-app. Certains navigateurs intégrés dans les apps mobiles (versions anciennes de Facebook, WeChat, etc.) n'ont pas encore le support AVIF. C'est pour ces 6 % d'utilisateurs que le fallback WebP/JPG via <picture> reste indispensable.

5. Encodage CPU-intensive sur les serveurs. Si vous générez les AVIF à la volée côté serveur (au lieu de pré-encoder en build), cela peut surcharger vos workers. Solution : pré-générer toutes les variantes en build, ou utiliser un service d'image CDN (Cloudinary, Imgix, Vercel Images) qui mutualise le coût.