image/avif

Description

image/avif (AV1 Image File Format) est un format d’image dérivé du codec vidéo AV1. Il offre la compression la plus efficace disponible aujourd’hui pour les images web — surpassant WebP, JPEG et PNG — tout en supportant les couleurs HDR, la transparence (canal alpha) et les animations. Support universel dans les navigateurs modernes depuis 2023.

Usage en HTML

Avec fallback WebP et JPEG :

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Description de la photo">
</picture>

Image responsive avec AVIF :

<picture>
  <source
    srcset="hero-sm.avif 600w, hero-lg.avif 1200w"
    sizes="100vw"
    type="image/avif">
  <source
    srcset="hero-sm.webp 600w, hero-lg.webp 1200w"
    sizes="100vw"
    type="image/webp">
  <img src="hero-sm.jpg" alt="Bannière principale" fetchpriority="high">
</picture>

Notes

Compression supérieure : AVIF offre 40–50% de réduction par rapport à JPEG et 20–30% par rapport à WebP, à qualité visuelle équivalente. Idéal pour améliorer les Core Web Vitals (LCP).

Encodage plus lent : la compression AVIF est significativement plus lente que WebP ou JPEG, ce qui peut allonger les pipelines de build. Pour les images dynamiques, WebP reste souvent plus pratique.

HDR et large gamut : AVIF supporte nativement les images HDR (High Dynamic Range) et les espaces colorimétriques étendus (Display P3, Rec. 2020) — un avantage pour les écrans modernes.

Séquence recommandée : dans <picture>, toujours mettre AVIF en premier, WebP en second, JPEG/PNG en fallback final. Le navigateur choisit le premier format qu’il supporte.