L'AVIF offre la meilleure compression de tous les formats d'image web disponibles aujourd'hui. Mais la compression seule ne suffit pas si vos utilisateurs ne peuvent pas afficher les images. Le support navigateur a été le principal frein à l'adoption de l'AVIF depuis sa sortie, et la situation a considérablement évolué ces deux dernières années.
Ce guide présente l'état actuel du support AVIF sur tous les navigateurs majeurs, les stratégies de fallback concrètes, et une réponse claire sur l'opportunité d'utiliser l'AVIF en production aujourd'hui.
Support AVIF par navigateur
Début 2026, l'AVIF est supporté par environ 93% des navigateurs à l'échelle mondiale.
| Navigateur | Version avec support AVIF | Date de sortie |
|---|---|---|
| Google Chrome | 85+ | Août 2020 |
| Mozilla Firefox | 93+ | Octobre 2021 |
| Apple Safari | 16.4+ | Mars 2023 |
| Microsoft Edge | 85+ | Août 2020 |
| Opera | 71+ | Août 2020 |
| Samsung Internet | 14+ | Mars 2021 |
| Brave | 1.12+ | Août 2020 |
Chrome a été le premier navigateur majeur à intégrer le support AVIF, suivi de près par Edge et Opera (tous deux basés sur Chromium). Firefox a ajouté le support un an plus tard. Safari a été le dernier à suivre, avec l'ajout du support AVIF dans la version 16.4 en mars 2023.
L'étape décisive a été l'adoption par Safari. Avant cela, l'AVIF était inutilisable sans fallback pour tout site avec du trafic significatif depuis iOS ou macOS. Aujourd'hui, chaque moteur de navigateur majeur supporte l'AVIF nativement.
Support sur les navigateurs mobiles
Le trafic mobile représente plus de 60% des visites web à l'échelle mondiale. Le support AVIF sur mobile est déterminant pour toute décision d'adoption de format.
| Navigateur mobile | Support AVIF | Notes |
|---|---|---|
| Chrome pour Android | Oui (85+) | Navigateur Android dominant |
| Safari pour iOS | Oui (16.4+) | Tous les navigateurs iOS utilisent WebKit |
| Samsung Internet | Oui (14+) | Deuxième navigateur Android |
| Firefox pour Android | Oui (93+) | Faible part de marché |
| Opera Mobile | Oui | Basé sur Chromium |
| UC Browser | Partiel | Les anciennes versions manquent de support |
| KaiOS Browser | Non | Navigateur pour feature phones |
Comme tous les navigateurs iOS sont contraints d'utiliser le moteur WebKit, le support dans Safari 16.4+ signifie que chaque navigateur sur iOS 16.4 et ultérieur supporte l'AVIF, y compris Chrome pour iOS, Firefox pour iOS et toutes les web views intégrées dans les applications.
Les seules lacunes mobiles sont les appareils Android très anciens avec des versions Chrome obsolètes, et les navigateurs de feature phones comme KaiOS. Pour l'audience typique d'un site web en 2026, le support AVIF sur mobile ne pose pas de problème pratique.
Que se passe-t-il quand un navigateur ne supporte pas l'AVIF ?
Si vous servez un fichier AVIF directement dans une balise <img> et que le navigateur ne le supporte pas, l'image ne se charge tout simplement pas. L'utilisateur voit une icône d'image cassée ou un espace vide. C'est pourquoi vous ne devez jamais servir de l'AVIF sans fallback.
L'approche correcte est l'élément <picture>, qui laisse le navigateur choisir le premier format qu'il supporte :
<picture>
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="Photo produit" width="800" height="600">
</picture>
Comment ça fonctionne :
- Le navigateur lit les éléments
<source>de haut en bas. - S'il supporte l'AVIF, il télécharge
photo.avifet ignore le reste. - S'il ne supporte pas l'AVIF mais supporte le WebP, il télécharge
photo.webp. - S'il ne supporte aucun des deux, il se rabat sur la balise
<img>et téléchargephoto.jpg.
Une seule image est téléchargée. Il n'y a aucune pénalité de bande passante à lister plusieurs sources.
Comment implémenter l'AVIF avec des fallbacks
Au-delà de l'élément <picture> basique, voici les patterns d'implémentation essentiels :
AVIF responsive avec srcset :
<picture>
<source
srcset="hero-400.avif 400w, hero-800.avif 800w, hero-1200.avif 1200w"
sizes="(max-width: 600px) 100vw, 800px"
type="image/avif">
<source
srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
sizes="(max-width: 600px) 100vw, 800px"
type="image/webp">
<img src="hero-800.jpg" alt="Image hero" width="1200" height="600" fetchpriority="high">
</picture>
Négociation de contenu côté serveur :
Au lieu d'utiliser <picture>, vous pouvez détecter le support AVIF via le header Accept. Les navigateurs modernes qui supportent l'AVIF envoient Accept: image/avif, image/webp, */*. Votre serveur ou CDN peut lire ce header et servir le format approprié depuis la même URL.
Cette approche est plus propre dans le HTML (une simple balise <img>) mais nécessite une configuration serveur ou CDN. La plupart des CDN modernes (Cloudflare, Fastly, AWS CloudFront) supportent la négociation automatique de format.
Images de fond CSS :
Pour l'AVIF dans les fonds CSS, il n'existe pas d'équivalent à <picture>. Utilisez @supports :
.hero {
background-image: url('hero.jpg');
}
@supports (background-image: url('hero.avif')) {
.hero {
background-image: url('hero.avif');
}
}
Notez que @supports pour la détection de format d'image n'est pas parfaitement fiable sur tous les navigateurs. La négociation de contenu côté serveur est une solution plus robuste pour les fonds CSS.
Statistiques d'adoption de l'AVIF
L'adoption de l'AVIF s'est accélérée depuis que Safari a ajouté le support en 2023 :
| Année | Sites utilisant l'AVIF (HTTP Archive) | Support navigateur |
|---|---|---|
| 2021 | Moins de 0,1% | ~70% |
| 2022 | ~0,5% | ~75% |
| 2023 | ~2% | ~88% |
| 2024 | ~5% | ~91% |
| 2025 | ~9% | ~93% |
| 2026 | ~14% (estimation) | ~93% |
L'adoption progresse régulièrement mais reste très en deçà du WebP, utilisé par plus de 50% des sites majeurs. L'écart s'explique en partie par la lenteur d'encodage de l'AVIF, qui complique l'intégration dans les pipelines d'images dynamiques, et en partie par l'inertie des sites qui ont déjà migré vers le WebP et voient des gains décroissants à effectuer une seconde migration.
Faut-il utiliser l'AVIF en production aujourd'hui ?
Oui. L'AVIF est prêt pour la production en 2026. Voici un cadre de décision :
| Scénario | Recommandation |
|---|---|
| Nouveau site ou refonte | Utilisez l'AVIF avec fallback WebP dès le départ |
| Site existant en JPG | Migrez vers AVIF + fallback WebP pour les images à fort impact |
| Site existant déjà en WebP | Ajoutez l'AVIF en amélioration progressive via <picture> |
| Pipeline d'images dynamiques (CMS) | Utilisez le WebP comme format principal, ajoutez l'AVIF pour les assets pré-générés |
| Site statique avec assets pré-buildés | Utilisez l'AVIF, le temps d'encodage n'est pas une contrainte |
La combinaison AVIF comme format principal et WebP en fallback offre la meilleure compression pour 93% de votre audience et une excellente compression pour les 7% restants. Ajouter le JPG en troisième couche couvre la dernière fraction de navigateurs anciens.
La seule raison de retarder l'adoption de l'AVIF est si votre pipeline d'images ne peut pas gérer la lenteur d'encodage. Pour tout le reste, l'AVIF est le meilleur format disponible.
Convertissez vos images en AVIF
Morphix convertit vos images JPG et PNG en AVIF directement dans le navigateur. Aucune inscription requise avec l'offre gratuite.
Convertir JPG en AVIF | Convertir PNG en AVIF | Convertir AVIF en JPG