Les images représentent souvent la plus grosse part du poids d'une page web. Après le passage au WebP, beaucoup de sites peuvent encore gagner du terrain grâce au format AVIF, qui offre une compression nettement plus efficace à qualité visuelle équivalente. Désormais pris en charge par tous les navigateurs majeurs, il mérite une place dans votre chaîne de production d'images. Voici comment l'adopter sans risque.
Qu'est-ce que le format AVIF ?
AVIF (AV1 Image File Format) est un format d'image dérivé du codec vidéo AV1, développé par l'Alliance for Open Media, un consortium qui réunit notamment Google, Mozilla, Apple, Microsoft et Netflix. Il est ouvert et libre de redevances.
Ses principaux atouts :
- Une compression supérieure : à qualité perçue égale, les fichiers sont généralement plus légers qu'en WebP, et bien plus légers qu'en JPEG ;
- La transparence, comme en PNG ou en WebP ;
- Une meilleure gestion des dégradés : moins d'effets d'escalier dans les ciels ou les fonds unis ;
- La prise en charge du HDR et des espaces colorimétriques étendus.
Les gains varient beaucoup selon le type d'image. Sur des photos, il est courant d'obtenir un fichier 20 à 30 % plus léger qu'en WebP. Sur des captures d'écran avec du texte, l'écart est plus faible. Testez donc sur vos propres images plutôt que de vous fier à une moyenne.
Compatibilité avec les navigateurs
L'AVIF est pris en charge par Chrome depuis la version 85, Firefox depuis la version 93 et Safari depuis la version 16, selon Can I use. Cela couvre la très grande majorité des visiteurs, mais pas les anciens appareils Apple bloqués sur une version antérieure d'iOS. D'où l'intérêt de prévoir un format de repli.
Servir l'AVIF avec un repli WebP ou JPEG
La balise <picture> permet au navigateur de choisir le premier format qu'il sait afficher :
<picture>
<source srcset="/images/atelier-800.avif 800w, /images/atelier-1600.avif 1600w"
sizes="(max-width: 900px) 100vw, 800px" type="image/avif">
<source srcset="/images/atelier-800.webp 800w, /images/atelier-1600.webp 1600w"
sizes="(max-width: 900px) 100vw, 800px" type="image/webp">
<img src="/images/atelier-800.jpg" width="800" height="533"
alt="Atelier de menuiserie avec établi et outils suspendus" loading="lazy">
</picture>
Trois détails comptent pour le référencement et la performance :
- l'attribut
altdécrit l'image, il sert à l'accessibilité et au SEO des images ; - les attributs
widthetheightréservent l'espace et évitent les décalages de mise en page (CLS) ; loading="lazy"ne s'applique pas à l'image principale du premier écran, qui doit au contraire être chargée en priorité.
Convertir ses images en AVIF
En ligne de commande
L'outil avifenc, fourni par la bibliothèque libavif, et ImageMagick permettent de convertir des lots d'images :
# Avec libavif : qualité 60, vitesse d'encodage 6 (0 = lent et compact, 10 = rapide)
avifenc -q 60 -s 6 photo.jpg photo.avif
# Avec ImageMagick
magick photo.jpg -quality 55 photo.avif
L'encodage AVIF est beaucoup plus lent que celui du WebP. Ce n'est pas un problème quand on convertit une fois au moment de l'envoi, mais c'en est un pour une conversion à la volée sur un serveur modeste.
Avec Squoosh pour comparer
Pour choisir le bon niveau de qualité, l'application web Squoosh permet de comparer l'image d'origine et sa version compressée côte à côte, avec le poids obtenu. C'est le meilleur moyen de trouver le réglage le plus bas encore invisible à l'œil.
Dans WordPress
WordPress accepte l'envoi d'images AVIF depuis la version 6.5, à condition que le serveur dispose d'une version d'ImageMagick ou de GD capable de les traiter. Plusieurs extensions d'optimisation génèrent automatiquement les variantes AVIF et WebP des images envoyées.
Choisir le bon niveau de qualité
Les échelles de qualité ne sont pas comparables d'un format à l'autre : une qualité 60 en AVIF n'a rien à voir avec une qualité 60 en JPEG. En pratique, des valeurs comprises entre 50 et 65 donnent de bons résultats pour la photographie. Méfiez-vous des réglages trop agressifs : l'AVIF a tendance à lisser les textures fines (peau, tissus, feuillages), ce qui donne un aspect « plastique ».
Pour les logos, icônes et schémas, le format AVIF n'est pas toujours le meilleur choix : un SVG optimisé reste plus léger et parfaitement net à toutes les tailles.
AVIF ou WebP : lequel choisir ?
| Critère | WebP | AVIF |
|---|---|---|
| Compression | Bonne | Meilleure |
| Vitesse d'encodage | Rapide | Lente |
| Compatibilité | Universelle | Très large, sauf anciens appareils |
| Usage idéal | Repli universel, conversion à la volée | Photos du premier écran, galeries |
Un levier direct sur le LCP
L'image principale d'une page est très souvent l'élément LCP (Largest Contentful Paint). Réduire son poids de 30 % se traduit directement par un affichage plus rapide, en particulier sur mobile avec une connexion moyenne. Combinée à un préchargement (fetchpriority="high"), la conversion en format AVIF fait partie des actions qui permettent d'atteindre un score Lighthouse de 100.
Vous souhaitez alléger les images de votre site sans perte de qualité visible ? Je peux mettre en place une chaîne d'optimisation automatique adaptée à votre CMS.
