AVIF expliqué — quand 30 % de moins que WebP justifie le fallback
Tomoda HinataAuteur et mainteneur de l'outilPublié le 26 avr. 20265 min de lecture
AVIF (AV1 Image File Format) place une image-clé AV1 dans un conteneur HEIF et atteint ~20–30 % de moins que WebP à qualité égale. Subsistent des trous — Outlook desktop, Edge mail, vieux Android Webview, macOS Mail inline — donc en production on le sert derrière un `<picture>` avec WebP en repli.
Outils utilisés dans ce guide
Qu'est-ce qu'AVIF techniquement ?
Une image-clé AV1 dans un conteneur HEIF (même conteneur que HEIC iPhone). AV1 est le successeur libre de VP9/HEVC ; sa boîte à outils explique les 20–30 % supplémentaires.
Le motif `<picture>`
AVIF d'abord, WebP ensuite, `<img>` JPG en final. Le navigateur prend la première source qu'il sait décoder ; sans JS.
Quand AVIF vaut le coup
Trois cibles : hero sur sites à fort trafic, galeries e-commerce, portfolios photo. Trois exagérations : blogs peu visités, templates e-mail, posts SNS éphémères.
Coût d'encoding, build vs runtime
Q60 ~10× plus lent que JPG Q82. 100 images en station : 2–3 min. Edge 10 s : timeout. Encoder au build ; décodage rapide (<50 ms).
Étapes
≈ 2 minChoisir le master
PNG/RAW/TIFF si possible ; JPG seul OK.
Ouvrir le convertisseur
Glisser ; qualité 60 par défaut.
Encoder
5–15 s par image.
Câbler `<picture>`
AVIF d'abord, WebP en repli, `<img>` JPG en final.
| Format | Taille | Encoding (M2) | Support 2026 |
|---|---|---|---|
| JPG Q82 | 245 Ko | 0,1 s | 100 % |
| WebP Q82 | 165 Ko | 0,4 s | 98 % |
| AVIF Q60 | 115 Ko | 4,2 s | 92 % |
Questions fréquentes
AVIF supporte la transparence ?
Oui, canal alpha 10 bits.
AVIF animé ?
Oui (AVIS), support plus étroit que statique ; animation : préférez WebP.
HDR ?
Oui, AVIF 10/12 bits + HDR10.
Plusieurs résolutions ?
Combiner `<picture>` avec srcset/sizes.
AVIF va-t-il remplacer JPG ?
Pas dans l'horizon prévisible.
Encoding lent à cause du navigateur ?
Non — c'est AV1 qui est cher.
Essayer maintenant
Ultra-light images with the modern AVIF format
AVIF ConverterCet article contient une traduction assistée par IA. Signalez toute erreur.