AVIF vs WebP vs JPEG XL 2025 — Praxisnaher, gemessener Vergleich

Im Jahr 2025 zählen AVIF, WebP und JPEG XL (JXL) zu den praktikabelsten modernen Bildformaten. Mit produktionsnahen Datensätzen vergleichen wir sie hinsichtlich:

• Bitrate vs. wahrgenommener Qualität (visuelle Bewertung)
• Objektiver Metriken (SSIM/PSNR/Butteraugli usw.)
• Decodierzeit (CPU/mobile SoCs) und Speicherbedarf
• Browser-/Ökosystem‑Support sowie Integration in CDNs/Optimierungs‑Pipelines

Wichtigste Erkenntnisse

• Bei vielen Fotos gilt: Effizienz AVIF ≥ JPEG XL > WebP. Bei Texturen/Illustrationen kann WebP erstaunlich gut abschneiden.
• Decodiergeschwindigkeit: WebP ≈ JPEG XL > AVIF. Auf schwachen Geräten wird der Abstand größer.
• Kompatibilität: WebP bleibt die sicherste Wahl. AVIF ist in großen Browsern breit unterstützt. JPEG XL feiert ein Comeback; ein gestufter Rollout ist derzeit sinnvoll.
• Die Rollout‑Strategie hängt ab von Client‑Support × Bildeigenschaften × Performance‑KPIs (LCP/TTFB/CPU). Fallback‑Design ist zentral.

Methode und Datensätze

Datensätze

• Fotos: Landschaft/Porträt/Nacht/Essen/Produkt (1200–4000px)
• Illustrationen/UI: vektorähnliche Grafiken, Logos, Screenshots
• Screen‑Content: textlastig, Code‑Editoren

Metriken und Messung

# Referenz: Pseudo‑Skript für Konvertierung + objektive Metriken
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 (Pseudo‑Kommandos)
  ssim "$img" "out/${img##*/}.avif" >> metrics.csv
  psnr "$img" "out/${img##*/}.avif" >> metrics.csv
done

Ergebnisse auf einen Blick

Rate–Distortion (Qualität vs. Größe)

• Fotos: AVIF ist bei gleicher visueller Qualität oft am kleinsten, mit 10–25 % Ersparnis.
• Illustration/Screen: WebP‑Artefakte fallen weniger auf, Größenunterschiede schrumpfen. JXL glänzt bei feinen Details.

Decode‑Performance (wahrgenommen/gemessen)

• Mobile SoCs: WebP und JXL rendern tendenziell früher. AVIF wird bei aggressiver Kompression stärker langsamer.
• LCP‑Einfluss: Für Hero‑Bilder WebP/JXL bevorzugen; praktikabler Mix: „Hero = WebP/JXL, im Artikel = AVIF“.

Praxisleitfaden für den Rollout

Empfohlene Presets und Verzweigungen

{
  "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 und Format‑Verhandlung

• CDN‑Content‑Negotiation per Accept‑Header nutzen, um Format und Größe gemeinsam zu optimieren.
• sizes präzise planen, um Overdelivery zu vermeiden. Verwenden Sie /de/tools/srcset-generator.

Caching‑Strategie

• Bevorzugt Cache-Control: public, max-age=31536000, immutable (Dateinamen‑Hashes vorausgesetzt).
• Bei Format‑Varianten Vary: Accept und Content‑DPR berücksichtigen.

Next.js‑Integration (Beispiel)

// Erweiterter Loader (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();
}

Qualitätssicherung (QA)

• A/B‑Tests für LCP/FID, Verweildauer, CTR.
• Visuelle Regression mit Heatmaps zur Fehlererkennung.

FAQ

• F: Ist JPEG XL jetzt einsatzbereit?

• A: Der stabile Support wächst. Ein hybrider Ansatz ist pragmatisch: WebP/AVIF als Basis und JXL schrittweise einführen, während CDN/Client‑Abdeckung beobachtet wird.

• F: Wie gehe ich mit langsamer AVIF‑Decodierung auf Low‑End‑Geräten um?

• A: WebP/JXL für Hero‑Bilder, AVIF für In‑Content‑Bilder/Thumbnails. LCP überwachen und Schwellen anpassen.

• F: Kann ich alle JPEGs massenhaft konvertieren?

• A: Fotos profitieren meist. UI/Text erfordern Sorgfalt. Presets pro Anwendungsfall nutzen und mit visueller Regression absichern.