AVIF statt JPG und WebP: Lohnt sich der Umstieg 2026?

Bilder sind auf den meisten Websites der größte Performance-Posten: schwerer als alles andere zusammen, und oft entscheidend dafür, wie schnell sich eine Seite anfühlt. Mit AVIF gibt es seit ein paar Jahren ein Format, das Fotos bei gleicher Qualität auf rund die Hälfte eines JPGs schrumpft und auch WebP klar unterbietet. 2026 ist der Browser-Support da, die Werkzeuge sind reif. Wir zeigen dir mit echten Zahlen aus unserer eigenen Bild-Pipeline, wann sich der Umstieg lohnt und wo die Grenzen liegen.

Derselbe Bildausschnitt, zwei Formate: Oben zeichnet AVIF sauber, unten zerfällt JPG beim gleichen Datei-Budget in Klötzchen. Bild: Collective Brain

Was ist AVIF überhaupt?

AVIF steht für AV1 Image File Format und ist das jüngste der drei Formate: 2019 von der Alliance for Open Media spezifiziert, dem Konsortium hinter dem Videocodec AV1, in dem unter anderem Google, Apple, Amazon, Netflix, Meta und Mozilla sitzen. Vereinfacht gesagt ist ein AVIF-Bild ein einzelnes, hochoptimiertes Videobild im AV1-Format, verpackt in einen Bild-Container. Genau daher kommt die Effizienz: Videocodecs sind über Jahre darauf getrimmt worden, mit möglichst wenig Daten möglichst viel Bildinformation zu transportieren.

Dazu bringt AVIF Funktionen mit, die JPG nie hatte: Transparenz wie bei PNG, Animationen wie bei GIF, 10- und 12-Bit-Farbtiefe, HDR und erweiterte Farbräume. Das Format ist lizenzkostenfrei, es fallen also anders als bei manchen Vorgängern keine Patentgebühren an. Netflix hat als einer der ersten großen Anbieter ab 2020 auf AVIF gesetzt und die Vorteile gegenüber JPG ausführlich dokumentiert.

Der Größenvergleich: AVIF vs. WebP vs. JPG

Die Kernfrage zuerst, mit den typischen Werten aus unabhängigen Benchmarks für Fotos bei vergleichbarer wahrgenommener Qualität:

Wie groß der Effekt in der Praxis ist, hängt stark vom Motiv ab. Deshalb hier echte Zahlen statt Laborwerte: Auf collectivebrain.de erzeugen wir für jedes Artikel-Cover automatisch eine AVIF-Version neben dem JPG. Für dieses Update haben wir am 7. August 2026 alle 53 Cover-Paare aus Juli und August nachgemessen, identische Auflösung, visuell gleichwertig. Die Bandbreite reicht von 30 bis 89 Prozent Ersparnis, der Median liegt bei 79 Prozent, und 48 der 53 Bilder sparen mindestens 65 Prozent. Vier Beispiele aus der Reihe:

Der Ausreißer nach unten ist lehrreich: Bei sehr feinkörnigen, rauschreichen Fotos schrumpft der Vorsprung, weil Rauschen sich schlecht komprimieren lässt. Bei flächigeren Motiven mit klaren Farbverläufen zieht AVIF dagegen davon.

Browser-Support 2026: Das Argument hat sich erledigt

Jahrelang war der Standard-Einwand gegen AVIF der Browser-Support. Der ist Geschichte: Chrome unterstützt AVIF seit Version 85 (2020), Firefox seit Version 93 (2021), Safari seit Version 16.4 (2023), Edge seit Version 121, Samsung Internet seit Version 14 und iOS Safari seit iOS 16. Laut caniuse liegt die globale Abdeckung im September 2026 bei 95,36 Prozent, in Deutschland mit seinem hohen iOS- und Desktop-Anteil eher darüber.

Die fehlenden Prozent entfallen vor allem auf alte Geräte mit iOS 15 und früher sowie auf einzelne In-App-Browser und gesperrte Firmen-Umgebungen. Genau dafür gibt es den Fallback im picture-Element, dazu gleich mehr. Wichtig: Niemand bleibt ohne Bild zurück, ältere Browser bekommen einfach das JPG.

Wo AVIF nicht gewinnt

Damit das hier keine Werbeveranstaltung wird, die Grenzen des Formats im Klartext:

Die Faustregel daraus: AVIF für Fotos und fotoähnliche Bilder, die einmal erzeugt und oft ausgeliefert werden. WebP oder PNG für verlustfreie Anwendungsfälle und für Pipelines, in denen jede Sekunde Encoding-Zeit zählt.

Was ist mit JPEG XL?

Diese Frage kommt seit dem Frühjahr regelmäßig, deshalb hier die Einordnung. JPEG XL galt lange als das technisch elegantere Format, bis Google es Ende 2022 aus Chrome warf und als überholt einstufte. Am 24. November 2025 hat das Chromium-Team diese Entscheidung zurückgenommen, unter anderem weil Safari das Format inzwischen ausliefert, weil die PDF-Spezifikation es aufgenommen hat und weil über tausend Stimmen im Chromium-Bugtracker dafür zusammengekommen waren. Mit Chrome 145 vom 10. Februar 2026 ist ein Decoder zurück im Browser, diesmal als speichersichere Rust-Implementierung namens jxl-rs.

Bis einschließlich Chrome 154 blieb der Decoder abgeschaltet und ließ sich nur über chrome://flags/#enable-jxl-image-format von Hand aktivieren. Mit Chrome 155 fällt dieses Flag weg: Die Beta vom 16. September 2026 dekodiert JPEG XL standardmäßig, der stabile Kanal folgt laut Chromium-Zeitplan am 6. Oktober 2026. Mozilla hat am 24. August 2026 seine Absicht veröffentlicht, das Format auszuliefern, und setzt dafür denselben Rust-Decoder jxl-rs ein. Geplant war Firefox 157 Ende September, der Start ist inzwischen auf Firefox 158 am 13. Oktober 2026 gerutscht. Safari liefert JPEG XL seit Version 17 aus, weiterhin unvollständig, ohne Animationen und ohne progressives Laden.

Das Bild dreht sich damit im Oktober, die Zahlen aber noch nicht. caniuse wertet Chrome 155 und Firefox 158 zwar als volle Unterstützung, nur sind beide Ende September noch nicht beim Großteil der Nutzer installiert. Chrome aktualisiert sich meist binnen zwei bis drei Wochen, Firmenrechner mit verwalteten Browsern hängen oft Monate hinterher.

Heute erreicht JPEG XL nur ein Siebtel deiner Besucher und taugt deshalb noch nicht als Hauptformat. Ab Oktober lohnt es sich aber, das Format als Zusatz einzuplanen, vor allem für einen Fall, in dem es AVIF schlägt: Bestehende JPGs lassen sich verlustfrei in JPEG XL umpacken, laut Mozilla noch einmal kleiner und ohne jeden Qualitätsverlust. Wer ein großes Archiv an Produktfotos hat, gewinnt dort ohne neue Bildbearbeitung. Die AVIF-Umstellung kostet dich dabei nichts an Zukunftssicherheit, weil das picture-Element beliebig erweiterbar ist: Du schiebst eine <source type="image/jxl">-Zeile über die AVIF-Zeile, Browser ohne JPEG XL nehmen weiter AVIF oder JPG. Genau diese Struktur ist auch der Grund, warum wir Browser-Baselines regelmäßig nachziehen, statt einmal zu entscheiden und es dann zu vergessen. Wie wir das für Ladezeit-Kennzahlen handhaben, steht im Beitrag zur Multi-Browser-Baseline für Core Web Vitals.

So stellst du um: drei Wege in die Praxis

Weg 1: Das picture-Element (volle Kontrolle)

Der sauberste Weg ohne zusätzliche Infrastruktur. Der Browser wählt selbst das beste Format, das er versteht:

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

Genau so machen wir es auf collectivebrain.de: Jedes Artikel-Cover liegt als JPG plus AVIF-Schwesterdatei auf dem Server, das picture-Element liefert automatisch die passende Version aus. Du kannst es im Quelltext dieser Seite direkt nachsehen.

Weg 2: Tools für die Konvertierung

Für die Erzeugung der AVIF-Dateien brauchst du keinen Spezialisten. Die wichtigsten Werkzeuge:

1. Squoosh (squoosh.app): Browser-Tool von Google, ideal zum Ausprobieren und für einzelne Bilder, inklusive Vorher-nachher-Vergleich.
2. sharp (Node.js) und ImageMagick: für Build-Prozesse und Batch-Konvertierung ganzer Bildordner. Unsere eigene Pipeline nutzt sharp und erzeugt AVIF-Versionen vollautomatisch beim Publizieren.
3. CMS und Plugins: WordPress unterstützt AVIF-Uploads seit Version 6.5 nativ, Optimierungs-Plugins und die gängigen Shop-Systeme konvertieren auf Wunsch automatisch.

Weg 3: Bild-CDN mit Auto-Format

Wer gar nicht konvertieren will, lässt einen Dienst die Arbeit machen: Bild-CDNs erkennen am Accept-Header des Browsers, welche Formate er versteht, und liefern automatisch AVIF, WebP oder JPG aus derselben URL. Das ist der bequemste Weg für große Bestandsbibliotheken, kostet aber laufende Gebühren und macht dich vom Anbieter abhängig.

Lohnt sich der Aufwand? Die Rechnung

Zurück zur Ausgangsfrage. Der Umstieg kostet einmalig Zeit für die Pipeline oder ein Plugin, danach läuft er von selbst. Dem stehen dauerhafte Effekte gegenüber:

1. Schnellere Ladezeiten: Bilder sind auf typischen Websites der größte Einzelposten. Sie zu halbieren ist der größte einzelne Performance-Hebel, den du hast.
2. Bessere Core Web Vitals: Kleinere Hero-Bilder verbessern direkt den Largest Contentful Paint. Seitengeschwindigkeit ist ein bestätigter Ranking-Faktor, und sie wirkt doppelt, weil schnellere Seiten messbar besser konvertieren. Mehr dazu in unserem Beitrag zu den Conversion-Hebeln für B2B-Websites.
3. Weniger Bandbreite: Wer viel Traffic hat, spart Hosting- und CDN-Kosten, und nebenbei Energie.

Für eine durchschnittliche Unternehmens-Website mit ein paar hundert Bildern ist das Fazit eindeutig: umstellen, mit Fallback, fertig. Wenn du gerade ohnehin an deiner Website arbeitest, etwa im Zuge einer SEO-Überarbeitung oder eines Neubaus mit unserem Team für Web Development, nimm die Bilder direkt mit. Die Grundlagen dazu findest du in unserem Leitfaden SEO für KMU.

Arno Hoffrichter

Chief Technology Officer, Collective Brain GmbH · Hamburg

CTO bei Collective Brain. Verantwortlich für die technische Umsetzung von Web-Projekten und SEO-Architektur.

Beratung anfragen