Comment utiliser des images AVIF sur votre site web

Les étapes essentielles

1. Choisissez une image déjà présente sur une page et conservez l’original.
2. Créez une version AVIF et vérifiez sa qualité.
3. Ajoutez l’AVIF à votre site avec une méthode prise en charge par votre système de publication.
4. Vérifiez la page publiée sur un téléphone et un ordinateur.
5. Consultez les requêtes réseau du navigateur pour identifier le fichier image chargé.

Les sections suivantes expliquent les points à vérifier à chaque étape.

Vérifiez comment votre site gère les images AVIF

Un système de publication peut accepter un fichier AVIF dans sa médiathèque tout en le traitant différemment d’un JPG ou d’un PNG. Vérifiez donc à la fois l’ajout du fichier et son utilisation sur une page publiée.

Faites un essai avec une image :

• La médiathèque accepte-t-elle le fichier ?
• L’image apparaît-elle dans l’éditeur de la page ?
• S’affiche-t-elle sur la page publiée ?
• Les versions plus petites nécessaires sont-elles créées, si le système en génère habituellement ?

Un service d’optimisation d’images ou un CDN fournit peut-être déjà vos images en AVIF. Vérifiez le fonctionnement actuel avant de remplacer les fichiers manuellement. Un JPG dans la médiathèque ne suffit pas à connaître le format reçu par les visiteurs.

Préparez une image pour l’essai

Choisissez une image représentative de votre site. Une photo de produit, une image d’en-tête d’article ou un visuel transparent sera plus utile qu’une image de test sans rapport avec votre contenu.

Utilisez le convertisseur correspondant au format d’origine :

• JPG → AVIF
• PNG → AVIF
• WebP → AVIF

Les convertisseurs AVIF de Pixilo conservent les dimensions d’origine en pixels et utilisent un réglage fixe de compression avec perte. Ils produisent une seule image fixe. L’animation, les informations HDR d’origine et les métadonnées ne sont pas conservées.

Comparez l’AVIF téléchargé à l’original. Examinez notamment la lisibilité du texte, les contours fins, les dégradés et les zones transparentes. Vérifiez aussi le poids du fichier : la conversion ne le réduit pas toujours.

Si la qualité est insuffisante ou si le fichier devient plus lourd, conservez la version actuelle. Changer de format n’est pas un objectif en soi.

Ajoutez l’AVIF avec votre système de publication

Si vous utilisez un constructeur de pages ou un système de gestion de contenu, ajoutez l’AVIF à la médiathèque puis sélectionnez-le comme nouvelle image dans l’élément concerné.

Pendant l’essai, ne changez ni la taille d’affichage ni le recadrage. Vous pourrez ainsi évaluer le changement de format sans modifier simultanément la mise en page.

Lors du remplacement, vérifiez :

• le texte alternatif
• le rapport largeur/hauteur et le recadrage
• la légende et le lien éventuels
• les mises en page sur ordinateur et sur mobile.

Changer l’extension dans une URL ne convertit pas l’image. Publiez un véritable fichier AVIF ou utilisez un service qui effectue la conversion.

Proposez un autre format si nécessaire

Si vous modifiez vous-même le HTML, un élément picture permet de proposer AVIF en priorité et JPG comme solution de repli.

Dans cet exemple, les deux fichiers représentent la même image de 1200 × 800 pixels. Adaptez les chemins, les dimensions et le texte alternatif à votre image.

<picture>
  <source srcset="/images/product.avif" type="image/avif">
  <img
    src="/images/product.jpg"
    width="1200"
    height="800"
    alt="Sac à dos bleu vu de face">
</picture>

Un navigateur compatible avec AVIF peut choisir la version AVIF. S’il ne prend pas en charge le format indiqué, il utilise ici le JPG. Pour une image transparente, choisissez un format de repli qui préserve la transparence, comme PNG. Consultez la documentation MDN sur l’élément picture.

Cette solution de repli répond au problème de compatibilité du format. Elle ne corrige pas automatiquement une URL AVIF incorrecte ou un fichier endommagé.

Si votre système de publication gère automatiquement les formats alternatifs, utilisez sa fonction intégrée.

Vérifiez quelle image le navigateur charge

L’affichage d’une image ne prouve pas que la page utilise AVIF. Le navigateur peut charger l’ancienne image, une version plus petite ou un fichier produit par un service d’optimisation.

Dans Chrome, vous pouvez le vérifier avec les outils de développement :

1. Ouvrez la page publiée et les outils de développement.
2. Sélectionnez l’onglet Network et le filtre Img.
3. Activez Disable cache et rechargez la page en laissant les outils ouverts.
4. Ouvrez la requête correspondant à l’image à vérifier.
5. Vérifiez son URL et le Content-Type de la réponse. Pour AVIF, ce type est image/avif.

L’extension n’est pas le seul indice : un service d’optimisation peut fournir de l’AVIF depuis une URL se terminant par .jpg. Le panneau Network permet aussi de vérifier la taille du fichier transféré. Consultez le guide de Chrome pour examiner les requêtes réseau.

Si la page utilise une image distincte sur mobile ou plusieurs tailles, vérifiez aussi leurs requêtes.

Vérifiez la page publiée avant de remplacer d’autres images

Examinez l’image là où elle est réellement utilisée. L’aperçu de la médiathèque ne montre ni le recadrage sur mobile, ni l’effet du fond de la page, ni si la bonne version est chargée.

Assurez-vous que :

• l’image est entièrement visible ou que le recadrage est volontaire
• le texte et les détails importants restent suffisamment nets
• les zones transparentes s’affichent correctement sur le fond de la page
• l’espace réservé à l’image et la mise en page restent corrects
• le navigateur charge le fichier attendu.

Pour comparer le chargement avant et après, utilisez la même page, la même taille de fenêtre et les mêmes réglages de test. Un chargement plus rapide ne suffit pas à établir une amélioration durable. La réduction du poids est plus facile à vérifier si les images ont les mêmes dimensions et une qualité acceptable.

Si l’image AVIF ne s’affiche pas

Vérifiez d’abord si l’URL directe de l’image s’ouvre dans le navigateur. Sinon, contrôlez l’emplacement du fichier et les éventuels messages d’erreur du système de publication.

Si l’image fonctionne directement mais que la page affiche l’ancienne version, vérifiez l’URL de l’élément image, les autres tailles et le cache du site. Contourner le cache du navigateur ne vide pas celui du système de publication ni du CDN.

Si la cause reste incertaine, rétablissez l’original fonctionnel dans cet élément et vérifiez la prise en charge d’AVIF avant un nouvel essai.

Questions fréquentes

Faut-il remplacer toutes les images du site par des AVIF ?

Non. Remplacez celles pour lesquelles le fichier devient sensiblement plus léger et le résultat fonctionne dans votre système de publication avec une qualité acceptable.

Suffit-il d’ajouter l’AVIF à la médiathèque ?

Non. Il faut aussi sélectionner l’image sur la page. Vérifiez les requêtes réseau de la page publiée pour identifier le fichier chargé.

AVIF nécessite-t-il toujours une image de repli ?

Cela dépend des navigateurs de vos visiteurs et de votre méthode de publication. Un autre format est utile pour les environnements où AVIF ne fonctionne pas.

Pourquoi le nouvel AVIF ne réduit-il pas le poids du fichier chargé par la page ?

La page utilise peut-être encore l’ancienne image ou une autre version générée par votre système de publication. L’AVIF lui-même peut aussi être plus lourd. Vérifiez la requête réelle et comparez des fichiers aux mêmes dimensions en pixels.

Résumer avecChatGPT (s’ouvre dans un nouvel onglet)Grok (s’ouvre dans un nouvel onglet)Google (s’ouvre dans un nouvel onglet)Perplexity (s’ouvre dans un nouvel onglet)Claude (s’ouvre dans un nouvel onglet)