Pendant longtemps, la question des formats d'image sur le web se résumait à un choix simple : JPG pour les photos, PNG pour les graphismes, GIF pour les animations. Deux formats plus récents ont changé la donne : le **WebP**, puis l'**AVIF**. Tous deux promettent des images plus légères à qualité égale, et donc des pages plus rapides. Mais ils ne se valent pas sur tous les plans. Voici comment les départager, et surtout comment en tirer parti sans pénaliser aucun visiteur. ## Deux formats nés de la vidéo Le point commun entre WebP et AVIF est leur origine : tous deux dérivent de codecs vidéo. Une image fixe n'est, après tout, qu'une seule image d'une vidéo, et les techniques développées pour compresser efficacement la vidéo s'appliquent très bien à la photo. **Le WebP** a été présenté par Google au début des années 2010. Sa version avec pertes s'appuie sur le codec vidéo VP8 ; il dispose aussi d'un mode sans perte spécifique. Il gère la transparence et l'animation, ce qui lui permet de remplacer à la fois le JPG, le PNG et le GIF. **L'AVIF** (*AV1 Image File Format*) est plus récent. Il repose sur le codec vidéo AV1, développé par l'Alliance for Open Media, un consortium qui réunit de grands acteurs du web et du matériel. Le format est ouvert et libre de redevances. Il bénéficie de techniques de compression d'une génération plus récente que celles du WebP. ## La compression : avantage AVIF Sur le critère du poids, l'AVIF l'emporte généralement. À qualité visuelle comparable, un fichier AVIF est souvent sensiblement plus léger qu'un WebP, lui-même généralement plus léger qu'un JPG. L'écart est particulièrement net sur les photographies et sur les réglages de compression élevés. La nature des défauts diffère aussi lorsque l'on pousse la compression : - le **JPG** fait apparaître des blocs carrés et des halos autour des contours ; - le **WebP** produit des défauts plus discrets, mais peut flouter les détails fins et rendre certaines couleurs moins précises ; - l'**AVIF** tend à lisser les textures : un feuillage ou un tissu peut perdre de son grain, mais l'image reste propre, sans artefacts géométriques marqués. Pour une image d'en-tête de grande taille, une photo de produit ou un visuel d'article, cet avantage de l'AVIF peut représenter une économie substantielle de données. Il existe toutefois des cas où l'écart se resserre, voire s'inverse : petites images, icônes, captures d'écran avec beaucoup de texte net. Le WebP sans perte reste notamment très efficace pour les graphismes simples. Rien ne remplace un essai sur vos propres images. ## Les fonctionnalités avancées L'AVIF va plus loin que le WebP sur le plan technique : - **profondeur de couleur** : l'AVIF peut stocker plus de 8 bits par canal, ce qui réduit l'effet de bandes dans les dégradés subtils et ouvre la voie au HDR ; - **espaces colorimétriques étendus**, utiles pour des écrans à large gamut ; - **transparence** : les deux formats la gèrent ; - **animation** : les deux la gèrent, avec un avantage de compression pour l'AVIF, même si la vidéo reste souvent préférable pour les animations longues. Pour la majorité des sites, ces différences restent théoriques : la plupart des images publiées sont en 8 bits sRGB. Elles prennent de l'importance pour la photographie haut de gamme ou les sites qui misent sur des visuels très soignés. ## La compatibilité : avantage WebP C'est ici que le WebP reprend l'avantage. Il est pris en charge par **tous les navigateurs majeurs actuels** : Chrome, Edge, Firefox et Safari, sur ordinateur comme sur mobile. Il est aussi largement accepté par les CMS, les outils de création de sites, les réseaux de diffusion de contenu et de nombreux logiciels de retouche. L'AVIF est lui aussi pris en charge par **les navigateurs récents** : Chrome, Edge, Firefox, et Safari à partir de la version 16.4. Mais une partie des visiteurs utilise encore des appareils ou des systèmes plus anciens, en particulier d'anciens iPhone et iPad bloqués sur une version antérieure de Safari. Hors du navigateur, la prise en charge est plus inégale : certaines visionneuses, logiciels de retouche ou plateformes en ligne refusent encore les fichiers AVIF. ## La vitesse d'encodage : avantage WebP Un critère souvent oublié : le temps nécessaire pour créer le fichier. L'encodage AVIF est **nettement plus gourmand en calcul** que celui du WebP. Pour une poignée d'images, la différence est anecdotique. Pour un site qui génère des milliers de vignettes à la volée, ou pour une conversion réalisée sur un téléphone, elle devient perceptible. ## Le tableau comparatif | Critère | WebP | AVIF | |---|---|---| | Compression des photos | Bonne | Généralement meilleure | | Transparence | Oui | Oui | | Animation | Oui | Oui | | Couleurs au-delà de 8 bits, HDR | Non | Oui | | Navigateurs | Tous les navigateurs majeurs actuels | Les navigateurs récents | | Logiciels hors navigateur | Large prise en charge | Prise en charge en progression | | Vitesse d'encodage | Rapide | Plus lente | ## Pourquoi choisir ? Servez les deux La meilleure réponse à la question « WebP ou AVIF ? » est souvent : **les deux, plus un format de repli**. Le HTML prévoit pour cela l'élément ``, qui permet de proposer plusieurs versions d'une même image. Le navigateur choisit la première qu'il sait afficher : ```html Description de la photo ``` Un navigateur récent chargera l'AVIF, un navigateur un peu plus ancien le WebP, et un très vieux navigateur le JPG. Chaque visiteur reçoit ainsi le fichier le plus léger qu'il peut afficher, sans jamais voir d'image cassée. L'attribut `alt` et les dimensions se placent sur la balise ``, qui reste l'élément affiché. Certains hébergeurs, CMS ou réseaux de diffusion de contenu font ce travail automatiquement, en détectant les formats acceptés par le navigateur et en servant la meilleure version. ## Nos recommandations selon les situations **Vous voulez une solution simple, sans balisage particulier :** passez au **WebP**. Vous profiterez d'un gain de poids appréciable par rapport au JPG et au PNG, sans aucun souci de compatibilité dans les navigateurs. **Votre site est très visuel** (photographie, voyage, immobilier, boutique de mode) : adoptez l'**AVIF avec repli WebP ou JPG** via ``. Les grandes photos représentent l'essentiel du poids de vos pages, et c'est là que l'AVIF fait la différence. **Vous générez des images à la volée en grand nombre :** tenez compte du coût d'encodage de l'AVIF. Une génération préalable, mise en cache, est préférable à un encodage à chaque requête. **L'image sera téléchargée et réutilisée** par vos visiteurs (fiche technique, visuel presse) : le **JPG ou le PNG** restent plus sûrs, car ils s'ouvrent dans n'importe quel logiciel. ## Avant de convertir Quel que soit le format choisi, deux règles restent valables : 1. **Redimensionnez d'abord.** Un format moderne ne compense pas une image deux fois trop grande pour son emplacement. Réduire les dimensions est souvent le gain le plus important. 2. **Partez de l'original.** Convertir un JPG déjà très compressé en AVIF ne rattrapera pas les défauts existants. Utilisez la source de meilleure qualité dont vous disposez. Enfin, testez sur un échantillon représentatif de vos images, comparez visuellement à 100 % de zoom et retenez le réglage de qualité le plus bas qui reste satisfaisant à vos yeux. ## En résumé - **L'AVIF compresse généralement mieux** que le WebP, surtout sur les photos, et offre des fonctionnalités avancées (profondeur de couleur, HDR). - **Le WebP est plus compatible** et plus rapide à encoder : il est lu par tous les navigateurs majeurs actuels, alors que l'AVIF est lu par les navigateurs récents. - **La meilleure stratégie** consiste à servir l'AVIF en priorité, le WebP en second choix et un JPG ou PNG en repli, grâce à l'élément ``. - **Si vous ne devez retenir qu'un format**, le WebP reste le choix le plus sûr pour un site web aujourd'hui. - **Redimensionnez et partez de l'original** avant toute conversion : c'est là que se jouent les plus gros gains.