WebP ou AVIF : quel format choisir pour les images du site ?

Par l’équipe Limpi. Les faits externes sont distingués des méthodes Limpi et aucune visibilité, position ou citation automatique n’est garantie.

Choisir un format selon le type d’image

Il n’existe pas un format universellement optimal pour toutes les images. Une photographie, un logo transparent, une illustration avec aplats ou une animation n’ont pas les mêmes besoins. AVIF et WebP peuvent offrir des gains intéressants sur de nombreux visuels, mais la qualité, le temps d’encodage, la transparence et la compatibilité doivent être évalués. Le choix doit commencer par le contenu du média et son usage, puis être confirmé par une comparaison de taille et de rendu.

Comparer à qualité visuelle équivalente

Une comparaison utile ne consiste pas à opposer deux fichiers avec des niveaux de qualité différents. Encodez plusieurs variantes et examinez les artefacts sur les zones sensibles : textes dans l’image, dégradés, visages, contours fins ou transparence. Notez la taille finale et les dimensions. Un fichier plus petit qui dégrade fortement un visuel de produit peut être un mauvais compromis. L’objectif est de réduire le poids tout en conservant la qualité réellement nécessaire à l’usage de la page.

Conserver des dimensions adaptées à l’affichage

Changer de format ne compense pas une image trois fois plus large que son emplacement. Générez des variantes dimensionnées et utilisez des mécanismes responsives pour laisser le navigateur choisir une ressource adaptée. Cette étape peut produire un gain supérieur à la seule conversion de format. Vérifiez également les écrans à forte densité afin de ne pas rendre l’image floue. La stratégie doit combiner encodage, dimensions et sélection de source plutôt que traiter chaque levier séparément.

Utiliser picture lorsque plusieurs sources sont nécessaires

L’élément picture peut proposer des formats ou cadrages différents tout en conservant une solution de repli. Organisez les sources de façon prévisible et évitez de multiplier les variantes sans besoin. Testez le fichier effectivement téléchargé dans plusieurs navigateurs. Le fallback doit rester valide et correspondre au même contenu. Cette approche est particulièrement utile lorsque vous introduisez un format moderne progressivement tout en gardant une compatibilité maîtrisée.

Ne pas oublier transparence, animation et métadonnées

Certains médias utilisent une transparence, plusieurs images animées ou des informations qui influencent le choix du format. Vérifiez que la conversion ne change pas le rendu fonctionnel. Supprimez les métadonnées inutiles lorsque votre chaîne le permet, mais conservez celles qui ont une utilité éditoriale ou légale. Pour les logos et icônes simples, un format vectoriel peut parfois être plus pertinent qu’une photographie recompressée. Le diagnostic doit rester centré sur le rôle du fichier.

Évaluer le coût de génération et de stockage

Créer de nombreuses variantes peut augmenter la complexité du pipeline, le stockage et le temps de génération. Un CDN d’images peut automatiser une partie de ce travail, mais il faut vérifier les URLs, caches et paramètres. Évitez une matrice excessive de dimensions et formats jamais utilisés. Mesurez les tailles réellement demandées par les templates. Une chaîne simple et prévisible est souvent plus durable qu’une optimisation théorique qui produit des dizaines de fichiers pour chaque média.

Valider les performances sans isoler le format

Après conversion, contrôlez le poids transféré et le média réellement sélectionné par le navigateur. Regardez aussi le LCP si l’image est critique, mais gardez à l’esprit que priorité, réseau et dimensions influencent le résultat. Comparez avec la version précédente dans des conditions similaires. Une réduction de poids est un bon signal, mais l’expérience doit rester stable : pas de fichier manquant, de recadrage inattendu ou de perte de netteté.

Standardiser la chaîne d’images du site

Définissez les formats acceptés à l’upload, les variantes générées et les règles par composant. Automatisez la compression et la création des tailles les plus utilisées. Documentez le fallback et les paramètres du CDN si vous en utilisez un. Lors d’une refonte, vérifiez que les anciens contenus bénéficient aussi de la nouvelle chaîne ou restent correctement servis. Cette politique évite de refaire manuellement le même choix pour chaque image et limite la dérive des poids au fil du temps.

Clôturer le contrôle sur formats WebP et AVIF

Pour clôturer ce contrôle, conservez une URL représentative, le constat initial, la cause identifiée, la modification appliquée et le résultat du test après correction. Sur un motif répété, notez aussi le nombre d’occurrences avant et après afin de distinguer une résolution globale d’un exemple isolé. Vérifiez la cohérence avec les pages liées /seo/performance-technique, /seo/image-lcp-lente-comment-corriger, /site/reduire-poids-images-eco-conception et assurez-vous qu’aucune nouvelle contradiction n’a été créée dans le template, le maillage ou la configuration concernée. Comparer les formats selon taille, qualité, transparence, animation et compatibilité. Ne pas présenter AVIF ou WebP comme meilleur choix universel. Si plusieurs équipes interviennent, attribuez la correction à une source précise — CMS, template, build, contenu ou configuration — et documentez les exceptions volontaires. Rejouez le contrôle avec les mêmes critères lors d’une prochaine migration ou refonte. Une anomalie ambiguë doit rester en revue plutôt qu’être corrigée automatiquement : la fermeture de l’alerte doit reposer sur une preuve reproductible et sur le comportement réellement servi au public.

Sources officielles

Les règles des moteurs et des fournisseurs de crawlers peuvent évoluer. Les affirmations techniques de cette page sont bornées par les documentations officielles ci-dessous.

• webdev image formats