Format d'image AVIF : 30 % plus petit que WebP

AVIF : Le Nouveau Roi de la Compression d'Images

AVIF (AV1 Image File Format) basé sur la technologie de codage vidéo AV1, est le prochain format d'image après WebP.

Format	Codec	Taille à qualité égale	Support navigateur
JPEG	libjpeg	Référence	Tous
WebP	VP8	-25~35%	97%+
AVIF	AV1	-50~60%	92%+
PNG	deflate	3-5x JPEG	Tous

Donnée clé : À qualité SSIM égale, AVIF est 20-30% plus petit que WebP et 50-60% plus petit que JPEG.

---

Pourquoi AVIF est-il si petit ?

Avantages du codage AV1

1. Prédiction intra-image : Exploite la redondance spatiale dans l'image
2. Codage par transformée : Supporte les blocs de transformée de 4×4 à 64×64
3. Matrice de quantification : Quantification plus fine dans le domaine fréquentiel
4. Synthèse du grain de film : Sépare le grain de film, décrit par des paramètres plutôt que des pixels

Avec perte vs Sans perte

Mode	Comparaison de taille	Cas d'utilisation
Avec perte (CQ 30)	40% du JPEG	Photos, captures d'écran
Avec perte (CQ 50)	25% du JPEG	Vignettes, aperçus
Sans perte	50-60% du PNG	Icônes, ressources UI
Avec perte + Alpha	30% du PNG	Photos avec transparence

---

Compatibilité des Navigateurs (2026)

Navigateur	Support AVIF	Version
Chrome	✅	85+
Firefox	✅	93+
Safari	✅	16+
Edge	✅	85+
Samsung Internet	✅	15+
IE	❌	Non supporté

Couverture 92%+, peut être utilisé en production en toute confiance.

Stratégie de Dégradation

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Photo" loading="lazy">
</picture>

Le navigateur sélectionne le premier format pris en charge dans l'ordre.

---

Utiliser ToolsKu pour Convertir en AVIF

Étapes de Fonctionnement

1. Ouvrir Outil de Conversion de Format d'Image
2. Télécharger l'image (supporte JPG, PNG, WebP, GIF)
3. Sélectionner le format de sortie AVIF
4. Ajuster les paramètres de qualité :
   • Haute qualité (CQ 20-30) : Presque sans perte, taille réduite de 40-50%
   • Équilibré (CQ 35-50) : Adapté à la plupart des scénarios, taille réduite de 50-60%
   • Haute compression (CQ 55-70) : Vignettes/aperçus, taille réduite de 60-80%
5. Télécharger le résultat de la conversion

Référence des Résultats de Conversion

Image originale	Taille originale	AVIF (CQ 35)	Taux de compression	SSIM
Photo de paysage (4K)	8.2MB	1.1MB	87%	0.95
Photo de portrait	3.5MB	0.5MB	86%	0.94
Capture d'UI	1.2MB	0.15MB	88%	0.97
Icône (PNG+Alpha)	45KB	12KB	73%	1.00

---

Capacités Spéciales d'AVIF

Canal Alpha (Transparence)

AVIF supporte avec perte + canal Alpha, ce que JPEG ne possède pas :

PNG (transparent) 45KB → AVIF (transparent, CQ 35) 12KB → taille réduite de 73%

HDR / Large Gamut de Couleurs

AVIF supporte les deux fonctions de transfert HDR PQ et HLG, ainsi que le large gamut BT.2020 :

Caractéristique	JPEG	WebP	AVIF
Profondeur de couleur	8-bit	8-bit	8/10/12-bit
Gamut de couleurs	sRGB	sRGB	sRGB / BT.2020
HDR	❌	❌	✅ PQ/HLG
Alpha	❌	✅	✅

Animation

AVIF supporte les séquences d'animation (AVIS), similaire au WebP animé :

GIF animé 2.5MB → WebP animé 0.8MB → AVIF animé 0.5MB

---

Conversion en Ligne de Commande

Utiliser libavif (avifenc)

# Installation
# macOS : brew install libavif
# Ubuntu : apt install libavif-bin

# Conversion basique
avifenc input.jpg output.avif

# Spécifier la qualité (0-63, plus petit = meilleure qualité)
avifenc -q 30 input.jpg output.avif

# Compression sans perte
avifenc --lossless input.png output.avif

# Spécifier la vitesse (0-10, plus lent = meilleure compression)
avifenc -q 35 -s 6 input.jpg output.avif

Utiliser ImageMagick

# Convertir en AVIF
magick input.jpg -quality 65 output.avif

# Conversion par lots
magick mogrify -format avif -quality 65 *.jpg

---

Conversion Automatique avec Nginx

# Convertir dynamiquement JPEG en AVIF
map $http_accept $avif_suffix {
  "~*image/avif" ".avif";
}

server {
  location ~* ^/.+\.(png|jpg|jpeg)$ {
    add_header Vary Accept;
    try_files $uri$avif_suffix $uri =404;
  }
}

Lorsque le client supporte AVIF, la version .avif est automatiquement renvoyée (nécessite une pré-génération).

---

Meilleures Pratiques

1. Utiliser la dégradation <picture> : Dégradation à trois niveaux AVIF → WebP → JPEG
2. Paramètre de qualité 35-50 : Point d'équilibre optimal pour la plupart des scénarios
3. Pré-générer plutôt que convertir dynamiquement : Générer au moment du build, éviter la charge CPU côté serveur
4. Photos en AVIF, icônes en SVG : Les images vectorielles ne conviennent pas à AVIF
5. Images avec Alpha en AVIF : Remplacer PNG, réduire la taille de 70%+
6. Configurer le CDN pour la conversion automatique : Cloudflare Image Resizing / CloudFront supportent le retour automatique en AVIF selon l'en-tête Accept