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. Drei aktuelle Beispiele aus unserer Pipeline, identische Auflösung, visuell gleichwertig:

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). Laut caniuse liegt die globale Abdeckung 2026 bei rund 94 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 ehrlichen Grenzen des Formats:

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.

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, 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