AVIF et WebP : choisir le bon format d'image pour la vitesse
AVIF, WebP ou les anciens JPEG et PNG : quel format convient à quelle image, et comment la conversion automatique accélère vraiment un site.
Équipe rabbitclipPublié: 5 min de lecture
En bref
AVIF convient aux images riches en photo, WebP à tout ce qui a besoin d'un large support navigateur avec transparence, et JPEG ou PNG restent en repli pour les anciens navigateurs qui ne lisent ni l'un ni l'autre. Servir les trois à la fois se fait avec la balise picture ou une conversion automatique côté serveur ; la personne visitant le site ne fait rien de plus, son navigateur reçoit simplement le plus petit fichier qu'il peut lire.
Quand la page galerie d'une chaîne de spas se charge sous forme d'une série de JPEG haute résolution, l'affichage peut prendre plusieurs secondes. En servant les mêmes images en AVIF ou WebP, le poids du fichier baisse nettement ; selon les mesures de web.dev, les images WebP sans perte sont environ 26 % plus légères qu'un PNG, et le WebP avec perte est 25 à 35 % plus léger qu'un JPEG équivalent.
Que sont AVIF et WebP, et en quoi diffèrent-ils du JPEG ?
AVIF est un format d'image open source construit sur le codec vidéo AV1 ; il produit un fichier bien plus léger que le JPEG à qualité visuelle égale. WebP, développé par Google, prend en charge la compression avec et sans perte ainsi que la transparence ; son support navigateur est plus large que celui d'AVIF.
Les deux visent à remplacer les anciens formats JPEG et PNG, mais ne sont pas interchangeables. AVIF compresse plus fort mais met plus de temps à encoder ; WebP encode plus vite et fonctionne sur plus de navigateurs. La plupart des sites servent les deux, dans un ordre de priorité.
Quel format convient à quelle image ?
Le bon format dépend de la nature réelle de l'image : une photo, un logo, une icône et une animation donnent chacun un meilleur résultat dans un format différent.
- photos et visuels produit : AVIF en priorité, WebP en repli
- logos et icônes transparents : WebP, car il prend en charge la transparence avec et sans perte
- dessins simples et graphiques à aplats de couleur : SVG, sans avoir besoin d'un format matriciel
- courtes animations : un WebP animé à la place d'un GIF
Comment mettre en place la conversion automatique
La solution la plus simple est la balise picture ; le navigateur se voit proposer AVIF, puis WebP, puis JPEG dans l'ordre, et choisit le premier qu'il sait lire. La mise en place peut se faire à l'un de ces trois niveaux.
- sur un site Next.js, le composant Image intégré génère automatiquement le bon format à chaque requête, sans configuration supplémentaire
- sur WordPress ou un site statique, des outils comme sharp ou squoosh-cli génèrent des copies AVIF et WebP au moment du build
- au niveau du CDN, un service d'images choisit lui-même le format avec une option comme format=auto, selon ce que supporte le navigateur qui fait la demande
- dans les trois cas, le JPEG ou PNG d'origine reste en repli, si bien qu'aucun navigateur ne se retrouve jamais sans image
Pourquoi un format de repli reste-t-il nécessaire ?
AVIF et WebP fonctionnent sur la grande majorité des navigateurs récents, mais des versions plus anciennes utilisées sur des réseaux d'entreprise, certains clients de messagerie ou des aperçus intégrés à une application peuvent ne reconnaître ni l'un ni l'autre. Une image AVIF publiée sans repli n'apparaît tout simplement pas sur ces clients ; elle devient une icône cassée.
Le guide des formats d'image de MDN recommande pour cette raison un format de repli à côté de chaque nouveau format ; la balise picture ou la négociation de contenu côté serveur rend ce repli automatique, sans avoir à téléverser chaque image deux fois à la main.
Livraison automatique du format au niveau du CDN et de l'hébergement
Laisser la conversion au CDN plutôt qu'au processus de build a l'avantage de garder l'image source intacte tandis que le format servi s'adapte de lui-même au navigateur. Les services d'optimisation d'images de Cloudflare font cela avec une option comme format=auto ; un navigateur qui supporte AVIF reçoit de l'AVIF, un autre reçoit du WebP à la place.
Le point à surveiller est le service réellement utilisé ; Cloudflare a retiré son ancien service Polish pour les nouvelles zones en 2026, orientant les nouvelles configurations vers Image Resizing et Cloudflare Images. Le service placé derrière un site décide directement si AVIF est même proposé.
Erreurs fréquentes
Mettre en place une conversion une fois ne clôt pas le sujet ; trois erreurs reviennent régulièrement.
- publier de l'AVIF sans repli, ce qui fait perdre l'image entièrement sur les anciens clients
- laisser la compression au réglage le plus agressif sans vérifier la qualité à l'œil
- téléverser une image source bien plus grande que sa taille d'affichage réelle, ce qui alourdit le fichier quel que soit le format
- convertir le format sans jamais renseigner la largeur et la hauteur dans le HTML, ce qui provoque un décalage de mise en page pendant le chargement
Choisir entre AVIF et WebP n'est pas une astuce de vitesse à elle seule ; le bon format ne paie qu'avec la bonne taille et un format de repli. Un premier échange avec rabbitclip est une bonne façon de mesurer combien de poids d'images ralentit réellement votre site.
Questions fréquentes
AVIF est-il toujours meilleur que WebP ?
Pour la taille du fichier, généralement oui, mais l'encodage prend plus de temps et le support navigateur est plus restreint. La plupart des sites servent les deux, avec AVIF en priorité.
Faut-il abandonner complètement PNG et JPEG ?
Non, ils doivent rester en repli. Les navigateurs et clients anciens en ont encore besoin.
Changer de format d'image affecte-t-il le SEO ?
Pas directement, mais des pages plus rapides améliorent les scores Core Web Vitals et, indirectement, les signaux d'expérience utilisateur.
Quand faut-il préférer le SVG ?
Pour les logos, icônes et dessins à aplats de couleur ; étant vectoriel plutôt que matriciel, il reste net à toute taille et est souvent plus léger.
