Le format AVIF (AV1 Image File Format) est le nouveau standard d'image recommandé par Google. Plus léger que WebP et JPEG, il améliore significativement les performances de votre site.
Qu'est-ce que le format AVIF ?
Caractéristiques
- Basé sur le codec vidéo AV1 (royalty-free)
- Compression jusqu'à 50% meilleure que WebP
- Support du HDR et des couleurs larges
- Transparence (alpha channel)
- Animation possible
Comparaison des tailles
- JPEG 100 Ko → WebP ~70 Ko → AVIF ~50 Ko
- Gain de 50% vs JPEG, 30% vs WebP
- Qualité visuelle équivalente ou supérieure
Pourquoi adopter AVIF ?
Performance web
- Pages plus légères et rapides
- Meilleur Largest Contentful Paint (LCP)
- Économie de bande passante
- Impact positif sur le SEO (Core Web Vitals)
Support navigateur
- Chrome : supporté depuis 2020
- Firefox : supporté depuis 2021
- Safari : supporté depuis 2022 (iOS 16+)
- Edge : supporté
- Couverture mondiale : ~95%
Recommandation Google
- Google pousse l'adoption d'AVIF
- Lighthouse recommande les formats modernes
- PageSpeed Insights favorise AVIF
Implémenter AVIF
Avec la balise picture
La méthode progressive avec fallback :
- <picture>
- <source srcset="image.avif" type="image/avif">
- <source srcset="image.webp" type="image/webp">
- <img src="image.jpg" alt="Description">
- </picture>
Avec un CDN
Conversion automatique selon le navigateur :
- Cloudflare : Polish avec AVIF
- Cloudinary : f_auto détecte AVIF
- imgix : conversion automatique
- Vercel : next/image avec AVIF
Avec WordPress
- Plugin ShortPixel ou Imagify
- Conversion automatique à l'upload
- Servir AVIF automatiquement
Outils de conversion
En ligne
- Squoosh.app (Google)
- Convertio
- CloudConvert
Logiciels
- GIMP (avec plugin)
- Photoshop (avec plugin)
- ImageMagick
- Sharp (Node.js)
Build tools
- Webpack avec image-webpack-loader
- Next.js avec next/image
- Vite avec plugins d'optimisation
Bonnes pratiques
Qualité vs compression
- Qualité 60-80 pour la plupart des cas
- Tester visuellement avant déploiement
- Photos : qualité plus haute
- Illustrations : compression plus agressive
Fallback obligatoire
- Toujours prévoir WebP ou JPEG
- ~5% des navigateurs sans support AVIF
- SEO : Google peut crawler les fallbacks
Lazy loading
- Combiner AVIF avec loading="lazy"
- Images below-fold en lazy
- Hero image en eager
Impact mesurable
Avant/Après type
- Page de 3 Mo → 1.5 Mo
- LCP amélioré de 20-40%
- Score PageSpeed +10-20 points
Coût de migration
- CDN avec conversion auto : quasi nul
- Manuel : temps de conversion des images
- ROI rapide sur les performances
Conclusion
AVIF est le format d'image du futur, et ce futur est maintenant. Avec un support navigateur quasi universel et des gains de performance significatifs, la migration vers AVIF devrait être une priorité pour tout site soucieux de ses Core Web Vitals et de son SEO.