AVIF vs WebP vs JPEG XL en 2025 — Comparatif pratique et mesuré

En 2025, les formats d’images modernes les plus pertinents sont AVIF, WebP et JPEG XL (JXL). À l’aide de jeux de données proches de la production, nous les comparons selon :

• Débit vs qualité perçue (évaluation visuelle)
• Mesures objectives (SSIM/PSNR/Butteraugli, etc.)
• Temps de décodage (CPU/SoC mobile) et empreinte mémoire
• Support navigateur/écosystème et intégration aux CDN/pipelines d’optimisation

Points clés

• Pour de nombreuses photos, l’efficacité suit AVIF ≥ JPEG XL > WebP. Pour textures/illustrations, WebP peut bien s’en sortir.
• Vitesse de décodage : WebP ≈ JPEG XL > AVIF. L’écart s’accentue sur terminaux d’entrée de gamme.
• Compatibilité : WebP reste l’option la plus sûre. AVIF est largement pris en charge. JPEG XL revient en grâce ; un déploiement progressif est conseillé.
• La stratégie dépend du support client × des caractéristiques de l’image × des KPI (LCP/TTFB/CPU). Le fallback est essentiel.

Méthode et jeux de données

Jeux de données

• Photos : paysages/portraits/nuit/gastronomie/produits (1200–4000px)
• Illustrations/UI : graphismes vectoriels, logos, captures d’écran
• Contenu d’écran : texte, éditeurs de code

Mesures et instrumentation

# Référence : pseudo‑script de conversion + mesures objectives
for img in dataset/*.jpg; do
  avifenc --min 20 --max 35 "$img" "out/${img##*/}.avif"
  cwebp -q 75 "$img" -o "out/${img##*/}.webp"
  cjxl "$img" "out/${img##*/}.jxl" -d 1.2

  # SSIM / PSNR (commandes fictives)
  ssim "$img" "out/${img##*/}.avif" >> metrics.csv
  psnr "$img" "out/${img##*/}.avif" >> metrics.csv
done

Résultats en un coup d’œil

Taux–distorsion (qualité vs taille)

• Photos : AVIF est souvent le plus petit à qualité visuelle équivalente, avec 10–25 % d’économie.
• Illustration/écran : les artefacts WebP se voient moins, l’écart de taille diminue. JXL excelle en détails fins.

Décodage (perçu/mesuré)

• SoC mobiles : WebP et JXL affichent plus tôt. AVIF ralentit davantage avec une compression agressive.
• Impact LCP : privilégier WebP/JXL pour les images héros ; compromis pratique : « Héros = WebP/JXL, dans l’article = AVIF ».

Guide de déploiement

Presets recommandés et branches

{
  "photo": {
    "primary": "avif:q=28-32",
    "fallback": ["webp:q=75", "jpeg:q=80"]
  },
  "ui_illustration": {
    "primary": "webp:q=75",
    "optional": "jxl:d=1.2",
    "fallback": ["png:optimized"]
  },
  "screenshot_text": {
    "primary": "jxl:d=1.0",
    "fallback": ["webp:q=80", "png:optimized"]
  }
}

srcset/sizes et négociation de format

• Utiliser la négociation de contenu côté CDN (en‑tête Accept) pour co‑optimiser format et taille.
• Concevoir correctement sizes pour éviter la sur‑distribution. Utilisez /fr/tools/srcset-generator.

Stratégie de cache

• Préférer Cache-Control: public, max-age=31536000, immutable (avec hachage de noms de fichiers).
• En cas de variation par format, tenir compte de Vary: Accept et Content‑DPR.

Intégration Next.js (exemple)

// Loader étendu (pseudo)
export function imageUrl(src: string, fmt: 'avif'|'webp'|'jxl'|'jpeg', w: number) {
  const u = new URL(process.env.NEXT_PUBLIC_IMG_CDN!);
  u.pathname = src;
  u.searchParams.set('w', String(w));
  u.searchParams.set('fmt', fmt);
  return u.toString();
}

Assurance qualité (QA)

• Tests A/B sur LCP/FID, temps passé, CTR.
• Régression visuelle avec cartes de chaleur pour détecter les ruptures.

FAQ

• Q : Peut‑on utiliser JPEG XL dès maintenant ?

• R : Le support stable progresse. Une approche hybride est pragmatique : miser sur WebP/AVIF et introduire JXL progressivement tout en surveillant la couverture CDN/clients.

• Q : Comment gérer le décodage AVIF lent sur appareils modestes ?

• R : Préférer WebP/JXL pour les images héros et AVIF pour les images dans l’article/miniatures. Surveiller LCP et ajuster les seuils.

• Q : Conversion massive de JPEG ?

• R : Les photos en bénéficient souvent. L’UI/le texte demandent plus d’attention. Utiliser des presets par usage et valider par régression visuelle.