Drei Formate, eine Entscheidung

2026 stehen Web-Entwickler vor einer Format-Wahl, die vor fünf Jahren noch nicht existierte: AVIF, WebP und JPEG XL sind alle drei produktionsreif, alle drei in allen Mainstream-Browsern verfügbar, alle drei deutlich effizienter als klassisches JPG. Welche Wahl ist die richtige? Es kommt darauf an — und der Beitrag macht es konkret.

Eine Format-Biografie der drei findest du in den separaten Geschichts-Beiträgen zu AVIF, WebP und JPEG XL. Hier interessieren uns die praktischen Trade-offs.

Komprimierungs-Effizienz

Für klassische Web-Fotos (24-Bit-RGB, mittlere Komplexität, kein Alpha) gilt bei identischer wahrgenommener Qualität ungefähr:

  • JPG (Mozjpeg, Q78): 100 % Referenz-Größe
  • WebP-Lossy: ~65–75 % der JPG-Größe
  • AVIF: ~45–55 % der JPG-Größe
  • JPEG XL: ~50–60 % der JPG-Größe (verlustfrei aus JPG re-komprimiert: ~80 %)

AVIF gewinnt bei reiner Bytes-Effizienz für Fotos. JPEG XL gewinnt bei einem einzigartigen Use-Case: verlustfreie Re-Komprimierung existierender JPGs — ein bestehendes JPG-Archiv lässt sich ohne Pixel-Verlust ~20 % verkleinern. Das kann keines der anderen Formate.

Für Grafiken (Logos, UI-Elemente, harte Kanten) sieht es anders aus: WebP-Lossless und JPEG XL schlagen AVIF deutlich. AVIFs Block-basierte Codierung produziert subtile Artefakte an scharfen Linien, wo WebP-Lossless und JPEG XL bit-genau bleiben.

Browser-Coverage 2026

Alle drei Formate sind in den vier großen Browser-Familien verfügbar, aber der Adoption-Zeitpunkt unterscheidet sich:

  • WebP: universell seit 2020 (Safari 14 / iOS 14).
  • AVIF: universell seit Safari 16 (September 2022).
  • JPEG XL: nach der Chrome-Removal-Episode 2022 wieder ab Chrome 135 (Mai 2025), Firefox seit Juli 2025, Safari nativ seit macOS Sonoma (2023).

Heißt: 2026 sind alle drei Formate > 95 % browser-coverage. Wer auf Legacy-Browser (alte Safari-Versionen, In-App-Browser ohne Updates) angewiesen ist, sollte WebP bevorzugen — es hat den längsten Adoption-Vorlauf.

Encoding-Geschwindigkeit

Bei serverseitigem oder build-time-Encoding ist die Geschwindigkeit relevant. Auf einer modernen 8-Core-CPU für ein 8-Megapixel-Foto:

  • JPG (Mozjpeg): 0,1–0,3 s
  • WebP (Effort 4): 0,3–0,6 s
  • AVIF (SVT-AV1, Speed 6): 1–3 s
  • JPEG XL (Effort 7): 0,5–1,5 s

AVIF ist klar der langsamste Encoder. Bei großen Build-Pipelines (10 000+ Bilder) summiert sich das zu Stunden. Wer im CI/CD Bilder neu komprimieren muss, sollte WebP oder JPEG XL bevorzugen — oder ein Image-CDNnutzen, das die Aufgabe an die Edge verlagert.

HDR und Wide Color Gamut

AVIF und JPEG XL unterstützen HDR und Wide Color Gamut (BT.2020, 10-Bit/12-Bit). WebP ist auf 8-Bit-sRGB beschränkt — eine harte Einschränkung für 2026, weil moderne Smartphone-Displays Display-P3 oder mehr bieten. Für Foto-Galerien mit Smartphone-Captures ist AVIF strukturell überlegen. WebP-Bilder aus iPhone-15-Pro-RAWs werden auf P3-Displays sichtbar farb-flacher dargestellt.

Animation

WebP und AVIF unterstützen Animation; JPEG XL noch nicht offiziell. Bei animiertem Inhalt:

  • Animiertes GIF: 100 % Referenz
  • Animiertes WebP: ~25–35 % der GIF-Größe
  • Animiertes AVIF: ~15–20 % der GIF-Größe

Für komplexe Animationen ist Lottie oft die noch bessere Wahl — vector-basiert und CSS-interaktionsfähig. Bei Foto-Loops bleibt AVIF die Wahl. Mehr Hintergrund im GIF-vs.-WebP-Beitrag.

Die richtige picture-Tag-Reihenfolge 2026

Das HTML-<picture>-Element wählt das erste unterstützte Format. Die Reihenfolge entscheidet, welches Format der Browser bevorzugt. 2026 empfohlen:

<picture>
  <source srcset="hero.jxl" type="image/jxl">
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="…" width="1600" height="900"
       loading="lazy" decoding="async">
</picture>

Warum JPEG XL zuerst? Es ist das einzige Format, das einen verlustfreien JPG-Migrations- Pfad bietet. Wer ein JPG-Archiv hat und zusätzlich JPEG-XL-Varianten anbietet, bekommt die kleinste-mögliche-pixelgenau-identische Auslieferung für moderne Safari-Nutzer. Browser, die JPEG XL noch nicht haben (Chrome auf alten Versionen), fallen sauber auf AVIF zurück.

Entscheidungs-Matrix nach Use-Case

  • Foto-Galerie, modern, Mobile-First: AVIF als primär, WebP als Fallback, JPG als Legacy-Safety-Net.
  • UI-Sprites, Logos, harte Kanten: WebP-Lossless oder JPEG XL. Auf AVIF verzichten — die Block-Artefakte fallen auf.
  • E-Commerce-Produktfotos: AVIF primär, JPG-Fallback. Mehr in unserem E-Commerce-Beitrag.
  • Foto-Archiv, langfristig: JPEG XL, weil verlustfreie JPG-Migration möglich. Plus AVIF als Auslieferungs-Variante.
  • HDR-Inhalte (iPhone-Pro-Fotos): AVIF mit BT.2020-Profil.
  • Animation: AVIF für Foto-Loops, Lottie für UI-Animationen, WebP für Slack-Reactions.

Die ehrliche Empfehlung 2026

Wenn du heute ein Projekt aufsetzt und nur ein modernes Format wählen darfst, ist AVIF die richtige Wahl. Beste Komprimierung, HDR-Support, universelle Browser-Coverage, robuste Hardware-Beschleunigung. WebP bleibt die solide Backup-Wahl, JPEG XL die ambitionierte Migrations-Wahl für JPG-Archive. Klassisches JPG ist 2026 nur noch als Fallback im <picture> sinnvoll, niemals als Default.

Wer die Komprimierung selbst betreiben will, findet in unserem JPG-zu-WebP-Konverter und beim JPG-Komprimierer die richtigen Tools — alles browser-lokal, kein Upload.

Quellen

AVIF-1.0-Spezifikation · RFC 9649 — WebP Format · jpegxl.info · Can I Use — AVIF · Can I Use — WebP · Can I Use — JPEG XL · Cloudinary — JPEG XL Pareto Front · Netflix Tech Blog — AVIF for Next-Generation Image Coding.