Réponse rapide : choisir selon la pipeline, pas selon le hype
Pour la plupart des sites web en 2026, WebP est la mise à niveau format-unique la plus sûre à partir de JPG et PNG. AVIF est le meilleur premier choix quand votre pipeline peut aussi servir des fallbacks WebP ou JPEG.
Cette dernière phrase, c’est le passage que de nombreux comparatifs AVIF/WebP sautent. Le meilleur format n’est pas simplement celui qui gagne un benchmark. C’est celui que votre CMS, votre CDN, votre build, votre mix de navigateurs et vos types d’images savent livrer de manière fiable.
Comme point de départ pratique :
- Prenez WebP quand vous voulez un format moderne simple, une conversion par lot rapide, un support large et moins de surprises dans les vieux navigateurs, clients mail, plugins CMS ou navigateurs intégrés à des applis.
- Prenez AVIF avec fallbacks quand les images pèsent lourd sur la performance, que vous pouvez encoder au build ou via un CDN d’images, et que vous pouvez vérifier le rendu visuel avant de déployer.
- Gardez des fallbacks JPEG ou PNG quand l’image doit passer partout, y compris sur d’anciens Safari/iOS, des navigateurs d’entreprise verrouillés, des crawlers, des clients mail et des plateformes tierces.
AVIF vs WebP en un coup d’œil
| Aspect | WebP | AVIF |
|---|---|---|
| Meilleur usage par défaut | Un format moderne pour la plupart des sites | Première source dans une pipeline multi-formats |
| Compression | Plus petit que JPEG/PNG ; solide généraliste | Souvent plus petit que WebP sur les photos |
| Support navigateurs, juillet 2026 | Environ 96 % d’usage global sur Can I use | Environ 93 % d’usage global sur Can I use |
| Vitesse d’encodage | Assez rapide pour les flux locaux et batch | Plus lent ; idéal au build, via CDN, ou en offline |
| Risque de décodage | Très mature dans les navigateurs | Généralement bien, tester les grosses hero sur mobiles bas de gamme |
| Transparence | Oui | Oui |
| Animation | Oui, largement utilisée | Le format le prévoit, mais les flux outils/navigateurs sont moins prévisibles |
| Profondeur couleur et HDR | Orienté livraison web 8 bits | Meilleur pour la haute profondeur, le HDR et les gamuts larges |
| Meilleurs types d’images | Photos produit, images de blog, captures, vignettes, assets web courants | Pages riches en photos, grosses hero, galeries, assets statiques à fort trafic |
D’où ils viennent
WebP a été développé par Google et publié en 2010. Son mode avec perte s’appuie sur le codec vidéo VP8 et son mode sans perte utilise une méthode de compression distincte. La documentation WebP de Google indique que WebP prend en charge la compression avec perte, sans perte, la transparence et l’animation, et qu’il est nativement supporté par les principaux navigateurs.
AVIF, pour AV1 Image File Format, s’appuie sur le codec vidéo ouvert AV1. web.dev décrit AVIF comme un format raster plus récent visant à couvrir les besoins classiques du web — transparence, animation et meilleure qualité par octet par rapport aux formats anciens.
La différence pratique, c’est l’âge. WebP a eu plus d’une décennie pour s’installer dans les navigateurs, les plugins CMS, les outils de design, les librairies d’images et les systèmes de build. AVIF n’est plus exotique, mais c’est encore le format sur lequel on tombe plus souvent sur un encodeur lent, une option d’export absente ou une plateforme qui exige un fallback.
Efficacité de compression
AVIF produit souvent des fichiers plus petits que WebP à qualité visuelle comparable, surtout sur des images photographiques. Ça ne veut pas dire que chaque AVIF sera 30, 40 ou 50 % plus léger. Le chiffre réel dépend de l’encodeur, du réglage de qualité, du contenu de l’image et de la façon dont vous jugez « même qualité ».
L’écart est le plus visible sur :
- de grosses photos hero avec ciels, teintes de peau, ombres et dégradés ;
- des images de galerie où chaque kilo se répète sur beaucoup de photos ;
- des pages mobiles où un transfert plus léger aide directement le LCP et la conso data.
L’écart se réduit souvent sur :
- de petites vignettes, où l’overhead de requête et le resize pèsent plus que l’efficacité du codec ;
- des captures d’écran, images d’UI et schémas avec du texte net ;
- des images bruitées ou très texturées ;
- des graphiques sans perte, où PNG ou WebP sans perte peuvent encore avoir plus de sens.
Pour un vrai site, testez sur un dossier représentatif plutôt que sur une image parfaite. Un bon jeu de test inclut une photo hero, une image produit, un portrait, une capture d’écran, une illustration et une vignette. Comparez taille de fichier et qualité visuelle aux dimensions que vous publiez vraiment.
Support navigateurs en 2026
Les deux formats ont un support large, mais pas identique. Au moment du contrôle de juillet 2026, Can I use annonce environ 96,15 % d’usage global pour WebP et 93,42 % pour AVIF. Les deux sont viables pour une livraison web moderne, mais pas équivalents.
L’écart qui reste compte surtout sur :
- de vieux iPhones et iPads, en particulier iOS 15 et antérieurs ;
- de vieilles versions de Safari desktop ;
- des postes d’entreprise avec versions de navigateur gelées ;
- des navigateurs embarqués dans des applis, bornes ou vieilles WebViews Android ;
- des clients mail et plateformes tierces qui ne se comportent pas comme un vrai navigateur.
Pour WebP, beaucoup de sites s’en sortent avec WebP + fallback JPEG pour les anciens clients. Pour AVIF, le montage sûr en prod reste : AVIF en premier, WebP en deuxième, JPEG ou PNG en dernier.
<picture>
<source srcset="/images/hero.avif" type="image/avif">
<source srcset="/images/hero.webp" type="image/webp">
<img src="/images/hero.jpg" alt="Photo produit en usage">
</picture>
L’ordre compte. Les navigateurs prennent la première source qu’ils savent lire — donc AVIF doit précéder WebP si vous voulez que les navigateurs AVIF-capables reçoivent de l’AVIF.
Vitesse d’encodage
La vitesse d’encodage, c’est la différence qu’on sent quand on maintient un site pour de vrai.
WebP est assez rapide pour la conversion locale, les outils en batch, les flux CMS et les builds de sites statiques simples. AVIF peut être bien plus lent parce que l’encodeur travaille davantage pour trouver un résultat plus petit. Des presets AVIF plus rapides existent, mais ils rendent en général un peu de compression.
Ça se joue à quatre endroits :
- Builds statiques : un blog à 30 images, ça va. Un site de voyage à 2 000 photos originales peut faire de la génération AVIF un vrai coût de build.
- Uploads utilisateurs : si des gens uploadent des images et attendent une preview immédiate, l’encodage AVIF ajoute de la latence et du CPU.
- Fonctions serverless : un encodage lent peut cogner des timeouts ou des plafonds de coût.
- Flux locaux : si vous convertissez un dossier à la main avant upload, WebP est moins pénible.
La règle utile : AVIF brille quand l’encodage se fait une fois et que le fichier plus léger sert beaucoup. WebP brille quand comptent la vitesse, la simplicité et la conversion en lot reproductible.
Qualité visuelle par type d’image
AVIF vs WebP, ce n’est pas une décision unique pour toutes les images du site.
| Type d’image | Meilleur premier choix | Pourquoi |
|---|---|---|
| Grosse hero photographique | AVIF + fallback WebP | AVIF peut alléger l’asset above-the-fold le plus lourd |
| Photo inline de blog | WebP, ou AVIF + fallback si automatisé | WebP est simple ; AVIF vaut la peine si le build génère déjà les variantes |
| Photo produit e‑commerce | WebP en base ; tester AVIF | Le détail produit doit rester propre — comparez arêtes, matière, étiquettes et couleurs |
| Capture d’écran ou image d’UI | WebP ou PNG | Un AVIF basse qualité peut adoucir les petits textes et les arêtes dures |
| Logo ou icône | SVG ou PNG/WebP | L’AVIF raster n’est pas l’outil pour un artwork type vecteur |
| Image animée | WebP ou vidéo | Les flux AVIF animés sont moins matures côté outils et plateformes |
| Image de partage social | JPEG ou WebP | Beaucoup de plateformes recompressent de toute façon |
Fonctions avancées
AVIF gère des capacités que WebP ne cible pas aussi bien. Pour des images sRGB web ordinaires, elles peuvent être sans effet. Elles deviennent pertinentes en photographie, contenus HDR et pipelines d’affichage haut de gamme.
- Profondeur de bit élevée : AVIF peut supporter plus que le 8 bits typique du web.
- HDR et gamut large : AVIF est mieux placé quand votre pipeline conserve ces signaux.
- Outils AV1 modernes : AVIF hérite d’une partie de l’écosystème AV1, dont une compression intra-frame efficace.
Ne choisissez pas AVIF pour ces fonctions si votre pipeline entière ne peut pas les préserver. Si vos sources sont des JPEG sRGB ordinaires exportés par un CMS qui strippe les métadonnées et l’info couleur, le vrai bénéfice pratique reste la taille de fichier, pas la magie HDR.
Maturité de la chaîne d’outils
WebP, c’est l’option ennuyeuse et mature — et c’est un compliment. Bien supporté par les navigateurs, les outils de design, les librairies d’images, les plugins de build, les plugins CMS et les CDN. Quand un souci arrive, le debug est en général simple.
Le support AVIF s’est beaucoup amélioré, mais les rugosités restent plus fréquentes :
- votre CMS peut uploader de l’AVIF sans générer toutes les tailles de vignettes ;
- un plugin peut produire de l’AVIF sans écrire le markup de fallback ;
- un CDN peut n’accepter AVIF que sur certains plans ou avec certains en-têtes Accept ;
- l’encodage local en navigateur peut passer dans l’un et rater dans l’autre ;
- votre build peut ralentir dès qu’il génère de l’AVIF pour chaque image.
Avant d’engager AVIF sur un gros site, testez la pipeline exacte : upload, resize, génération de variantes, rendu HTML, déploiement, crawl et ouverture du résultat dans Safari, Chrome, Firefox et sur un mobile bas de gamme.
Que choisir
Pour la plupart des projets web en 2026, WebP est le choix pragmatique. AVIF est le choix perf quand la pipeline est prête.
Prenez WebP quand
- Vous voulez un format d’image moderne qui marche presque partout.
- Il vous faut une conversion rapide en local ou côté navigateur.
- Le site est assez petit pour que le transfert d’images ne soit pas le principal problème de perf.
- Votre CMS ou plateforme e‑commerce ne produit pas de fallback AVIF propre.
- Vos images comprennent beaucoup de captures, schémas, prises d’UI ou petites vignettes.
- Vous envoyez des images dans du mail, sur des marketplaces ou des plateformes tierces où le support AVIF est incertain.
Prenez AVIF (avec fallback WebP ou JPEG) quand
- Les images dominent le poids de la page ou le LCP.
- Vous avez beaucoup de grosses photos, galeries, hero ou landing riches en médias.
- Vous encodez au build, via un CDN ou dans une pipeline offline.
- Votre outillage émet automatiquement AVIF, WebP et le markup fallback JPEG/PNG.
- Vous pouvez juger la qualité sur des images réelles plutôt que sur un unique benchmark.
- Votre audience est majoritairement sur des navigateurs modernes.
Gardez JPEG ou PNG quand
- L’image doit survivre à des clients anciens, à des mails, à des documents ou à des téléchargements.
- Vous avez besoin d’un master pour éditer ou archiver.
- L’image est un logo, une icône, un schéma ou une capture où le sans-perte compte.
- Une plateforme recompressera l’upload de toute façon.
Comment tester AVIF vs WebP sur votre site
Ne décidez pas à partir d’un benchmark générique. Testez vos vraies images.
- Prenez 10 à 20 images réelles : photos hero, prises produit, vignettes, captures d’écran et toute image avec du texte.
- Exportez WebP et AVIF à des réglages raisonnables. Pour un premier passage, comparez WebP autour de 80‑85 et AVIF autour de 60‑75, puis ajustez à l’œil.
- Contrôlez le rendu à la taille finale d’affichage, pas seulement à 100 %.
- Regardez de près les visages, les ciels, les dégradés, les tissus, les étiquettes produit, le texte et les arêtes dures.
- Comparez le poids total d’images de la page, pas un seul fichier.
- Lancez Lighthouse ou votre outil de perf avant et après.
- Testez le rendu du fallback en désactivant le support AVIF ou en ouvrant la page dans un navigateur/appareil sans AVIF.
Si AVIF ne fait gagner que quelques kilos sur une vignette, laissez tomber la complexité. S’il retire des centaines de kilos à la hero LCP, prenez-le avec markup de fallback.
Utiliser PhotoTools pour des conversions rapides
PhotoTools est utile quand il faut inspecter ou préparer des fichiers à la main avant de les mettre en ligne.
- Utilisez le convertisseur JPG vers WebP pour un export rapide côté navigateur qui marche sur la majorité des sites modernes.
- Utilisez le convertisseur JPG vers AVIF pour comparer une version AVIF à WebP avant de vous engager sur une pipeline.
- Utilisez la conversion AVIF vers JPG ou PNG quand un fichier AVIF doit être transmis à un outil, un client ou une plateforme qui ne sait pas l’ouvrir.
Le convertisseur tourne dans le navigateur avec la Canvas API native. Pratique pour des lots rapides et des flux sans upload, mais ce n’est pas un remplacement pour un CDN automatisé ou une pipeline de build sur un gros site.
Sources consultées
Cet article a été revu le 18 juillet 2026 par rapport aux recommandations actuelles de format et de support : documentation WebP de Google, guide AVIF de web.dev, recommandations Chrome Lighthouse sur les images modernes, Can I use AVIF et Can I use WebP.