Formats d’image

AVIF ou WebP : quel format choisir pour votre site ?

Comparez AVIF et WebP pour votre site : qualité, poids, transparence et compatibilité, avec une méthode de test et les limites des outils Pixilo.

Par Pixilo · Mis à jour le

AVIF et WebP : les différences utiles

Les deux formats peuvent réduire les données envoyées aux visiteurs. Aucun ne garantit un fichier plus léger pour chaque image. Un paysage détaillé, un dessin simple et un produit détouré réagissent différemment à la compression. La source, les réglages et la taille d’affichage comptent autant que l’extension.

Possibilités des formats et vérifications pratiques
QuestionAVIFWebP
Peut-il compresser des photos ?Oui ; comparez les détails et le poidsOui ; comparez les détails et le poids
Conserve-t-il la transparence ?Oui, avec un encodeur adaptéOui, avec un encodeur adapté
Permet-il une compression sans perte ?Le format la permet ; l’outil doit la proposerLe format la permet ; l’outil doit la proposer
Et le HDR ?Le format peut le contenir ; toute la chaîne doit le préserverChoisissez une autre méthode si le HDR doit être conservé
Faut-il tester le site ?Vérifiez les fichiers servis, les navigateurs et la qualitéVérifiez les fichiers servis, les navigateurs et la qualité

Il s’agit des possibilités des formats, pas des fonctions de chaque convertisseur. Le guide des formats de MDN présente AVIF. La documentation WebP de Google explique la compression et la transparence. Pour un choix plus large incluant JPG, PNG et les graphismes avec du texte, consultez le guide des formats d’image pour le Web.

AVIF est-il toujours plus léger que WebP ?

Non. Le comparateur ci-dessous présente deux véritables exports Pixilo du même JPG de 1920 × 1440 pixels : un WebP de 299,0 ko à la qualité 80 et un AVIF de 275,7 ko au préréglage fixe de qualité 65. L’AVIF économise 23,3 ko, soit environ 8 % par rapport au WebP. C’est la comparaison pertinente pour remplacer ce WebP, même si l’AVIF économise environ 33 % par rapport au JPG source de 413,1 ko.

Les deux versions ont été créées directement depuis ce JPG, sans redimensionnement. Ces poids de fichiers complets correspondent à des réglages différents et propres à chaque format ; ils n’ont pas été calibrés pour une qualité visuelle identique. La source était déjà compressée : aucun export ne peut restituer ses détails perdus. Le résultat décrit ces fichiers et ces réglages, sans garantir un gain avec AVIF.

Déplacez le séparateur sur la texture rocheuse, le profil des sommets et le ciel uniforme. En vue de détail, cherchez les textures lissées, les halos et les bandes de couleur, puis revenez à l’image entière pour juger si la différence importe à la taille prévue. Si l’apparence d’une version ne convient pas, comparez un autre export avant de choisir selon le poids.

Paysage de montagne avec des nuages et des parois rocheuses détaillées — AVIF de Pixilo
Paysage de montagne avec des nuages et des parois rocheuses détaillées — WebP de Pixilo

Exports Pixilo du même JPG : WebP à la qualité 80, AVIF à la qualité 65. Les deux font 1920 × 1440 px. Déplacez le séparateur ou utilisez les flèches pour comparer. Les réglages de qualité dépendent du format. Photo: Pexels.

Quand choisir AVIF ?

Testez AVIF sur les photos qui contribuent sensiblement au volume téléchargé d’une page : grandes vues produit, photos éditoriales et bannières. Évaluez le gain en octets et en pourcentage. Les 23,3 ko économisés ci-dessus représentent une réduction modeste pour une image ; leur intérêt dépend de la fréquence de chargement de l’image et du travail ajouté à la publication.

Avant de convertir une photothèque, essayez un groupe représentatif : tissus fins ou cheveux, zones sombres et dégradés réguliers. Gardez les dimensions constantes et rejetez les versions qui perdent des détails importants. AVIF est un remplacement utile lorsque le gain restant compte et que votre site peut le diffuser de façon fiable. Conservez WebP lorsque ce compromis n’est pas avantageux.

La prise en charge du HDR par le format ne transforme pas une conversion ordinaire en traitement HDR. L’outil AVIF actuel de Pixilo crée un export avec perte sur 8 bits à partir des pixels décodés par le navigateur. Il ne propose ni préservation HDR ni mode sans perte. Gardez l’original pour l’archivage, l’impression ou un travail précis sur les couleurs.

Quand conserver WebP ?

Gardez WebP si l’image est bonne, son poids adapté et sa publication fiable. Changer uniquement parce qu’un format est plus récent ajoute du travail sans bénéfice garanti. Votre CMS, service d’images ou éditeur peut aussi gérer WebP plus facilement.

Examinez particulièrement les images avec du texte et des contours nets. Si la compression abîme les petites légendes ou les lignes, envisagez un outil offrant WebP sans perte ou conservez PNG. Les convertisseurs WebP de Pixilo n’ont pas de mode sans perte dédié. Le guide PNG ou WebP approfondit ce choix.

Si un destinataire ou formulaire exige JPG ou PNG, respectez d’abord cette contrainte. Un format adapté à votre site peut être refusé ailleurs. L’image affichée sur une page et le fichier proposé au téléchargement peuvent utiliser des formats différents.

Comparer AVIF et WebP avec Pixilo

  1. Partez de l’original. Utilisez une source JPG, PNG ou WebP et gardez-la séparément. Ne créez pas un export de test à partir d’un autre export déjà compressé.
  2. Fixez les dimensions. Préparez au besoin une source commune avec l’outil de redimensionnement. Pour cette comparaison, limitez le plus grand côté à 4000 pixels.
  3. Créez la version AVIF. Utilisez JPG → AVIF / PNG → AVIF / WebP → AVIF. L’outil actuel utilise un préréglage avec perte de qualité 65 et conserve les dimensions de la source ; il ne propose pas de curseur de qualité AVIF.
  4. Créez WebP depuis la même source. Utilisez JPG vers WebP ou PNG vers WebP. Ajustez la qualité WebP en examinant le résultat. Ces convertisseurs proposent une limite de 4000 pixels sur le côté le plus long, activée par défaut. Vérifiez que le redimensionnement n’a pas modifié les dimensions d’une seule version.
  5. Examinez les deux fichiers téléchargés. Vérifiez d’abord les dimensions et la qualité visible. Divisez ensuite la différence d’octets par le poids du WebP pour calculer le gain de son remplacement. Conservez WebP si l’AVIF est plus lourd ou si le fichier plus petit perd des détails nécessaires.
  6. Testez le site. Vérifiez l’image publiée sur téléphone et ordinateur, notamment son cadrage et sa taille. Conservez l’ancienne version jusqu’à la vérification.

Les valeurs de qualité ne constituent pas une échelle commune entre formats et encodeurs. AVIF à 65 et WebP à 65 ne garantissent pas la même qualité. Pixilo traite les images localement dans votre navigateur. L’encodeur AVIF est téléchargé au besoin ; la première conversion inclut ce chargement.

Que vérifier en dehors du poids ?

Détails fins et texte

Examinez cheveux, herbe, tissu et petits caractères à 100 %, puis à la taille réelle d’affichage. Le zoom révèle les défauts ; la vue normale aide à juger leur importance. Pour une capture d’écran, la lisibilité compte généralement plus que le poids minimal.

Dégradés et zones sombres

Cherchez des bandes visibles dans les ciels, fonds de studio et ombres. Les zones sombres doivent conserver des détails utiles. Si une version semble incorrecte, réduisez la compression ou changez de format plutôt que de privilégier automatiquement le fichier plus léger.

Transparence et contours

Testez les images transparentes sur fond clair et foncé. Un halo clair autour d’un produit peut disparaître sur blanc et ressortir sur noir. Consultez le guide des fonds noirs ou blancs sur une image transparente pour comprendre ce problème.

Couleurs, animation et original

Un convertisseur ne conserve pas forcément toutes les fonctions du format. Pixilo redessine l’image décodée pour l’export ; il n’est pas conçu pour préserver une animation, le HDR ou toutes les métadonnées. Vérifiez le résultat et gardez la source si ces informations comptent.

Ici, 100 % signifie la taille réelle en pixels dans un logiciel de visualisation : un pixel de l’image correspond à un pixel de l’écran. Le zoom de la page dans le navigateur est un réglage distinct.

Servir AVIF avec une alternative WebP ou JPG

Les grands navigateurs actuels prennent en charge les deux formats, mais certains navigateurs anciens ou lecteurs intégrés peuvent nécessiter une alternative. Avec votre propre HTML, utilisez picture. Les noms suivants sont illustratifs : créez et publiez les fichiers réels avant utilisation.

<picture>
  <source srcset="/images/product.avif" type="image/avif">
  <source srcset="/images/product.webp" type="image/webp">
  <img src="/images/product.jpg" width="1200" height="800"
       alt="Veste verte vue de face">
</picture>

Le navigateur choisit la première source adaptée qu’il prend en charge. Il ne télécharge pas les trois fichiers pour comparer leur poids. Placez AVIF en premier si vous souhaitez qu’il soit utilisé lorsque possible. img fournit l’alternative, les dimensions et le texte de remplacement. Prévoyez PNG plutôt que JPG si la transparence doit rester. Voir la documentation picture de MDN.

Dans un CMS, vérifiez ce que le service d’images ou l’extension génère et sert réellement. Envoyer un AVIF ne crée pas automatiquement des tailles responsives ou des fichiers de remplacement. Inspectez les requêtes après publication, surtout si un cache ou CDN peut servir une ancienne version.

AVIF améliore-t-il la vitesse et le référencement ?

Une image plus légère peut réduire le transfert, sans garantir une page plus rapide. Dimensions affichées, choix responsive, cache et moment de découverte de l’image comptent aussi. Un AVIF surdimensionné peut être moins adapté qu’un WebP correctement dimensionné.

Distinguez le temps d’export du temps de diffusion. Nous n’avons pas mesuré la vitesse d’encodage des fichiers du comparateur. Pour évaluer votre méthode, chronométrez un lot représentatif sur votre appareil et notez séparément la première conversion : Pixilo charge l’encodeur AVIF à la demande. Avec des fichiers préparés, les visiteurs n’attendent pas cette étape. Un service générant les variantes sur demande doit aussi tenir compte du traitement et du cache. Les réglages et l’implémentation influencent ce coût, comme l’explique l’article de web.dev sur l’encodage AVIF.

Google Images prend en charge AVIF et WebP. Changer de format ne remplace pas un contenu utile, un texte alternatif pertinent ou une URL accessible. Dans picture, gardez un img avec src et une extension conforme au format. Voir les recommandations de Google pour les images.

Mesurez la page publiée au lieu de déduire un meilleur classement d’un changement de fichier. Pour les priorités de chargement et la stabilité, consultez le guide des images et des Core Web Vitals.

Questions fréquentes

Faut-il convertir toutes les images WebP en AVIF ?

Non. Testez un petit ensemble représentatif. Remplacez les images lorsque le résultat est utile et la publication compatible. Gardez WebP s’il convient mieux à une image.

Pourquoi mon AVIF est-il plus lourd que mon WebP ?

Vérifiez dimensions et qualité visuelle. Les réglages peuvent différer, ou votre image se compresser mieux avec WebP. Un AVIF plus lourd ne justifie pas de remplacer un bon WebP.

Convertir JPG en AVIF restaure-t-il la qualité ?

Non. La conversion ne retrouve pas les détails perdus lors d’une compression JPEG précédente. Utilisez la meilleure source disponible et jugez l’apparence et le poids de la copie.

Puis-je renommer .webp en .avif ?

Non. Renommer change le nom, pas l’encodage. Convertissez l’image et servez-la avec l’extension et le type de contenu corrects.

Que faire si AVIF paraît moins bon dans Pixilo ?

Le réglage AVIF est actuellement fixe. S’il ne convient pas, essayez WebP avec une qualité ajustée, gardez l’original ou choisissez un encodeur offrant les contrôles nécessaires. Ce résultat ne représente pas tous les exports AVIF possibles.

Comparez une image avant de modifier le site

Créez AVIF depuis votre source, vérifiez les détails et le poids, puis comparez WebP aux mêmes dimensions.

JPG → AVIF / PNG → AVIF / WebP → AVIFCréer une version WebP →