AVIF oder WebP: Welches Bildformat Sie 2026 wählen sollten

Wenn Sie einen Onlineshop, einen Blog oder einen Produktkatalog betreiben, sind Bilder mit hoher Wahrscheinlichkeit der schwerste Teil jeder Seite. Genau sie bremsen den Seitenaufbau, fressen das Datenvolumen Ihrer Besucher und drücken die Tempowertung in den Suchmaschinen. Die gute Nachricht: In den letzten Jahren sind Formate entstanden, die Bilder um ein Vielfaches stärker komprimieren als das gewohnte JPG, während das Bild für das Auge identisch aussieht. Die weniger gute Nachricht: Es sind gleich mehrere, jedes hat eigene Stärken und eigene Tücken, und aus dem Bauch heraus lässt sich schwer entscheiden. Stellen Sie sich zwei optisch gleiche Produktfotos vor. Das eine wiegt 800 KB, das andere 180 KB. Für das Auge gibt es keinen Unterschied, für die Seite einen gewaltigen. Eine Katalogseite trägt oft 20 bis 40 Bilder, und wenn jedes davon unnötig schwer ist, bläht sich die Seite auf mehrere Megabyte auf. Ein Besucher aus Hamburg oder München mit durchschnittlichem Mobilfunk schließt den Tab einfach, bevor die Seite geladen ist. Ladezeit ist längst ein Ranking-Faktor: Suchmaschinen messen, wie schnell der Hauptinhalt erscheint, und Bilder haben darauf den größten Einfluss. Dazu kommt die reine Kostenseite, denn jedes Megabyte, das Sie ausliefern, ist Datenvolumen und Serverlast. In diesem Artikel klären wir, wie sich AVIF von WebP unterscheidet, was es mit JPEG XL auf sich hat, wann welches Format passt und wie Sie alles so einrichten, dass es bei jedem Besucher schnell ist, ohne Ausnahme.

WebP kam vor den heutigen Konkurrenten auf den Markt und hat sich praktisch zum Standard entwickelt. Wenn Sie ein einziges Format wollen, das einfach überall funktioniert und keine Umstände macht, ist es dieses. Das Format stammt von Google, erschien 2010 und setzte sich Mitte der 2010er breit durch. Es beherrscht sowohl verlustbehaftete als auch verlustfreie Kompression, dazu Transparenz und Animation. Damit ist es die goldene Mitte zwischen Effizienz und Kompatibilität.

Die Stärken von WebP

• Nahezu vollständige Browser-Unterstützung. WebP verstehen mehr als 97 Prozent der Browser weltweit. Die Unterstützung kam in Chrome bereits zwischen 2010 und 2014, in Firefox ab Version 65 (2019), in Safari ab Version 14 unter macOS Big Sur (2020) und auf dem iPhone vollwertig ab iOS 14. Das bedeutet, dass die überwältigende Mehrheit Ihrer Besucher das Bild ohne jeden Trick sieht.
• Spürbare Gewichtsersparnis. Gegenüber JPG bei gleicher Qualität ist WebP rund 25 bis 35 Prozent leichter. Für die meisten Seiten ist das bereits ein großer Sprung: Eine Seite, die 4 MB wog, landet plötzlich bei etwa 2,5 MB.
• Schnelle Kodierung. Ein Bild nach WebP umzuwandeln geht schnell, um ein Vielfaches schneller als nach AVIF. Das ist entscheidend, wenn Bilder live konvertiert werden, etwa wenn ein Nutzer einen Avatar oder ein Bewertungsfoto hochlädt und sofort ein Ergebnis erwartet.
• Transparenz und Animation. WebP beherrscht den Alphakanal (transparenter Hintergrund) und Animation, daher taugt es sowohl als Ersatz für PNG mit freigestelltem Hintergrund als auch als Ersatz für schwere GIF-Animationen. Ein animiertes WebP ist um ein Vielfaches leichter als derselbe Clip als GIF.
• Verlustfreier Modus. WebP hat auch einen Lossless-Modus, den direkten Konkurrenten zu PNG. Er liefert Dateien, die im Schnitt 20 bis 26 Prozent leichter sind als PNG, bei pixelgenauer Speicherung, was hervorragend zu Screenshots und Grafik passt.
• Reifes Ökosystem. Das Format existiert lange genug, dass alle gängigen Redaktionssysteme, Plugins und Werkzeuge damit umgehen können. Sie werden kaum auf einen Dienst stoßen, der es nicht versteht.

Wo WebP verliert

Der Hauptvorwurf an WebP ist, dass es ein Format gibt, das noch stärker komprimiert. Bei sehr großen Bildmengen, also Tausenden Artikeln im Katalog, wird jedes gesparte Prozent zu echter Ersparnis beim Datenvolumen und zu schnellerem Laden. Geht es nur um ein paar Dutzend Bilder, ist der Unterschied zwischen WebP und aggressiverer Kompression kaum spürbar. Bei einem großen Katalog oder einer Fotogalerie mit Hunderten Aufnahmen summieren sich diese Prozente jedoch zu Dutzenden und Hunderten Megabyte, und hier zieht WebP den Kürzeren.

Ein weiterer Punkt: Verlustbehaftetes WebP kommt mit sehr weichen Verläufen auf großen Fotos manchmal etwas schlechter zurecht als das modernste Format. In der Praxis fällt das selten und nur bei starker Kompression auf, aber man sollte es wissen, wenn man mit künstlerischen Aufnahmen arbeitet. WebP hat außerdem eine technische Grenze bei der Auflösung: höchstens 16383 mal 16383 Pixel, was fast immer reicht, aber riesige Panoramen passen nicht hinein.

Es hilft zu verstehen, woher diese Ersparnis überhaupt kommt. WebP nutzt klügere Verfahren zur Vorhersage benachbarter Pixel als das alte JPG und packt sich wiederholende Bildbereiche effizienter. Grob gesagt errät das Format besser, wie der nächste Bildabschnitt aussieht, und speichert nur die Differenz statt alles am Stück. Für den Besucher heißt das eines: dieselbe visuelle Schärfe bei geringerem Gewicht, ganz ohne eigene Einstellungen.

Wo WebP in der Praxis besonders hilft

• Blog und Ratgeber. Hier sind Bilder überwiegend illustrativ, es sind nicht viele, und maximale Kompatibilität ist wichtiger als das letzte Prozent Kompression. WebP deckt die Aufgabe vollständig ab.
• Vorschauen und Thumbnails im Katalog. Kleine Bilder in Listenform, bei denen es vor allem darauf ankommt, dass sie sofort und überall gleich erscheinen. WebP wird schnell kodiert und lädt flott.
• Seiten auf fertigen Plattformen. Bei einem typischen Shopsystem lässt sich die Umstellung auf WebP meist mit einer fertigen Lösung erledigen, die WebP automatisch an alle ausliefert, die es unterstützen, und das gewohnte JPG an den Rest.
• Ersatz für schwere GIF. Animierte Banner und kurze Endlosclips als GIF wiegen enorm viel. Derselbe Clip als animiertes WebP ist um ein Mehrfaches leichter und sieht genauso gut oder besser aus.

Für viele Seitenbetreiber reicht allein der Umstieg auf WebP, um das Thema Bildoptimierung für die nächsten Jahre abzuhaken. Das heißt nicht, dass AVIF überflüssig ist, aber WebP liefert achtzig Prozent des Ergebnisses mit zwanzig Prozent des Aufwands, und damit lässt sich sinnvoll starten. Das Fazit zu WebP ist einfach: ein sicherer Standard. Wer sich nicht in Feinheiten und Fallback-Ketten einarbeiten will, wandelt alles in WebP um und hat bereits den Großteil des Nutzens moderner Formate. Ein Fehler ist hier praktisch ausgeschlossen.

AVIF ist ein neueres Format, das auf Technik moderner Videokodierung aufsetzt: Es nutzt die Intraframe-Kompression des Codecs AV1, also desselben, auf dem heutige Streamingdienste laufen. Sein größter Trumpf ist die aggressive Kompression, und hier ist es der Spitzenreiter. Das Format erschien 2019 und hat bis 2026 eine hervorragende Reife erreicht.

Womit AVIF besser ist

• Stärkste Kompression. Bei gleicher visueller Qualität sind AVIF-Dateien 20 bis 30 Prozent leichter als WebP und rund 50 Prozent leichter als JPG. AVIF kann also halb so schwer sein wie ein gewohntes JPG-Bild, und das Auge bemerkt keinen Unterschied.
• Gut bei komplexen Bildern. Auf Fotos mit weichen Verläufen (Himmel, Haut, unscharfer Hintergrund) hinterlässt AVIF fast keine der hässlichen Artefakte und Klötzchen, die JPG bei starker Kompression zeigt. Statt eckiger Blockbildung liefert es ein sanftes Weichzeichnen, das das Auge viel besser verträgt.
• Transparenz und Animation. AVIF unterstützt den Alphakanal (transparenter Hintergrund) und Animation, genau wie WebP, sodass es sowohl PNG als auch GIF ersetzen kann.
• Erweiterte Farbe und HDR. Das fehlt WebP völlig. AVIF beherrscht 10- und 12-Bit-Farbtiefe, erweiterte Farbräume und HDR. Für einen Schuhkatalog ist das nebensächlich, aber für eine Fotogalerie, ein Fotografen-Portfolio oder eine Reiseseite wirken lebendige, satte Aufnahmen auf modernen Bildschirmen deutlich reicher.
• Gutes Verhalten bei niedriger Bitrate. Bei sehr starker Kompression zerfällt AVIF am schönsten: Selbst wenn das Gewicht bis zum Anschlag gedrückt ist, bleibt das Bild akzeptabel, während JPG in derselben Lage zum Mosaik wird.

Die Tücken von AVIF

• Langsame Kodierung. Das ist der Hauptnachteil. Ein Bild nach AVIF umzuwandeln ist 5 bis 10 Mal langsamer als nach WebP, bei maximalen Qualitätseinstellungen noch mehr. Warum das gerade bei nutzergenerierten Inhalten (UGC) zählt: Wenn jemand gerade jetzt ein Bewertungsfoto oder einen Avatar hochlädt und wartet, verderben zusätzliche Sekunden das Erlebnis. Für statische Seitenbilder ist das kein Problem, einmal konvertiert und vergessen.
• Support etwas geringer, aber schon ausgezeichnet. Bis 2026 verstehen rund 95 Prozent und mehr der Browser AVIF. Chrome unterstützt es ab Version 85 (2020), Firefox ab Version 93 (2021), Safari ab Version 16 unter iOS 16 und macOS Ventura (2022). Ein sehr guter Wert, aber immer noch ein paar Prozent unter WebP. Also braucht es eine Rückfalloption für jene, bei denen das Format nicht öffnet.
• Alte Software öffnet es nicht. Viele Desktop-Programme, Mailclients, Messenger und Fotoeditoren können AVIF bis heute nicht öffnen. Lädt ein Besucher so ein Bild auf den Rechner, öffnet es sich womöglich nicht im gewohnten Betrachter. AVIF eignet sich daher gut zur Anzeige auf der Seite, als Datei zum Herunterladen oder Weiterleiten ist es noch heikel.
• Etwas höherer Ressourcenbedarf beim Anzeigen. Das Entpacken von AVIF belastet den Prozessor des Geräts etwas stärker als WebP. Auf modernen Telefonen und Rechnern ist das unmerklich, auf sehr alten und schwachen Geräten kann es theoretisch die Darstellung leicht bremsen. Angesichts des Gewichtsvorteils eine Kleinigkeit, aber ehrlicherweise zu erwähnen.

Damit es anschaulicher wird, nehmen wir eine typische Produktkarte mit einem Foto von 1200 mal 1200 Pixeln. Als JPG in ordentlicher Qualität wiegt es rund 350 KB. Derselbe Ausschnitt als WebP etwa 230 KB. Und als AVIF rund 140 KB. AVIF ist hier also zweieinhalb Mal leichter als JPG und anderthalb Mal leichter als WebP. Multiplizieren Sie das mit Hunderten Artikeln, und das Ausmaß der Ersparnis wird offensichtlich.

So konvertieren Sie Bilder nach AVIF und WebP

1. Online-Konverter für Einzelfälle. Der einfachste Weg, wenn ein paar Bilder umgewandelt werden sollen: Bild laden, AVIF oder WebP erhalten, herunterladen und auf die Seite legen. Ideal für das Bild des ersten Bildschirms, für Banner und ein Dutzend Schlüsselfotos.
2. Stapelverarbeitung eines Ordners. Bei Hunderten Bildern lohnt es sich, sie im Paket durchzujagen. Viele Konverter nehmen einen ganzen Ordner an und liefern fertige Dateien im neuen Format mit denselben Namen.
3. Automatisierung auf Seiten des Systems. Für große Kataloge ist es sinnvoll, dass die Seite selbst bei jedem neuen Bild AVIF und WebP erzeugt und die passende Variante nach Browsertyp ausliefert. Dann lässt sich das manuelle Konvertieren ganz vergessen.

Worauf beim Konvertieren zu achten ist: Setzen Sie die Qualität im mittleren bis hohen Bereich an, drehen Sie die Kompression nicht bis zum Anschlag für ein paar Kilobyte (das gibt Matsch), und heben Sie das Original als JPG oder PNG als Fallback auf. Auch die Pixelgröße zählt: Es hat keinen Sinn, ein 4000 Pixel breites Foto vorzuhalten, wenn es auf der Seite nur mit 800 Pixeln erscheint. Erst auf die nötige Größe verkleinern, dann konvertieren, so wird der Gewinn maximal. Kurz gesagt: AVIF ist für Fälle gemacht, in denen minimales Gewicht am wichtigsten ist und Sie bereit sind, einmalig Zeit ins Konvertieren zu stecken. Einmal ein paar Sekunden investiert, und den Tempogewinn holen Sie bei jedem Seitenaufruf ab.

Damit Sie sich nicht in Kennzahlen verlieren, halten Sie eine praktische Regel bereit. Sie deckt fast alle realen Situationen ab, und darunter finden Sie die elegante Lösung, jedem Browser das beste verfügbare Format auszuliefern.

Spickzettel: Format nach Inhaltstyp

• Produktfotos im Katalog: AVIF mit Fallback auf WebP. Viele Bilder, häufig geladen, maximale Ersparnis.
• Große Banner und Titelbilder: AVIF. Das sind die schwersten Elemente und profitieren am stärksten von aggressiver Kompression.
• Icons, Logos, einfache Grafik: SVG, wenn möglich, sonst PNG oder verlustfreies WebP.
• Illustrationen in Artikeln: WebP, bei großen Mengen AVIF.
• Von Nutzern hochgeladene Fotos (UGC): WebP, weil sofortige Verarbeitung zählt.
• Bilder in E-Mails: nur JPG oder PNG, neue Formate versteht E-Mail nicht.
• Vorschau für soziale Netze (og:image): JPG oder PNG, sonst baut sich die Vorschau eventuell nicht auf.
• Animation: animiertes WebP oder AVIF statt GIF, Ersparnis um ein Mehrfaches.

Nehmen Sie AVIF, wenn

• Bilder statisch sind und selten wechseln: Produktfotos im Katalog, Illustrationen in Artikeln, Banner, Bilder in Kopf- und Fußzeile.
• Es viele Bilder sind und jedes gesparte Kilobyte mit Tausenden Aufrufen multipliziert wird.
• Sie Bilder vorab aufbereiten (einmal beim Hochladen konvertiert), nicht live.
• Sie lebendige, satte Fotos mit erweiterter Farbe oder HDR brauchen, etwa im Portfolio oder in der Fotogalerie.

Nehmen Sie WebP, wenn

• Inhalte von Nutzern stammen: Avatare, Fotos in Bewertungen, Bilder, die gerade jetzt hochgeladen werden und sofort verarbeitet sein müssen.
• Ihnen Einfachheit und Vorhersagbarkeit wichtig sind, ohne Gefummel mit Fallbacks.
• Es nicht so viele Bilder sind, dass der Kompressionsunterschied entscheidend wird.

Was ist mit JPEG XL?

JPEG XL (JXL) ist ein neues Format, auf das viele hoffen, und nicht ohne Grund. Technisch beeindruckt es: Es komprimiert Fotos etwa auf AVIF-Niveau oder leicht besser, kodiert schneller als AVIF, beherrscht Transparenz, Animation, erweiterte Farbe und HDR, progressives Laden und kann besonders wertvoll ein bestehendes JPG verlustfrei um rund 20 Prozent nachkomprimieren, wobei der Rückweg zum Original erhalten bleibt. Das eine, aber entscheidende Problem ist die Browser-Unterstützung. Stand 2026 versteht Safari JPEG XL ab Version 17 von Haus aus, Chrome hat die Unterstützung jedoch entfernt, und Firefox schaltet sie nur hinter einem Flag frei. Daher lässt sich JXL vorerst nicht ohne verlässlichen Fallback an die breite Besucherschaft ausliefern. Fazit: Behalten Sie JPEG XL als sehr vielversprechendes Format auf dem Schirm, aber für eine produktive Seite in 2026 ist die Kombination aus AVIF plus WebP zuverlässiger.

Wie der picture-Tag funktioniert

Die eleganteste Lösung ist, nicht ein Format zu wählen, sondern jedem Browser das beste ihm verfügbare zu geben. Innerhalb von picture zählen Sie die Varianten vom effizientesten zum kompatibelsten auf. Der Browser liest sie von oben nach unten und nimmt die erste passende. Zuerst kommt AVIF, dann WebP, am Ende das gewohnte img mit JPG oder PNG als Absicherung. Das Schema sieht so aus:

• <picture>
•   <source srcset="foto.avif" type="image/avif">
•   <source srcset="foto.webp" type="image/webp">
•   <img src="foto.jpg" alt="Beschreibung" width="800" height="600" loading="lazy" decoding="async">
• </picture>

Ein wichtiges Detail: Die Attribute alt, width, height, loading und die übrigen gehören genau an das img innerhalb von picture, nicht an die source. Die source-Tags sind nur für die Dateiauswahl zuständig, alles Weitere übernimmt das abschließende img.

Schritt-für-Schritt-Plan zur Umsetzung

1. Bildversionen vorbereiten. Für jedes Bild zwei Kopien anlegen: AVIF und WebP. Das originale JPG oder PNG als letzten Fallback behalten.
2. width und height am img eintragen. Das reserviert Platz für das Bild und verhindert, dass die Seite beim Laden springt, was zugleich die Wertung der Layoutstabilität (Metrik CLS) verbessert.
3. loading lazy für Bilder unterhalb des ersten Bildschirms. Sie werden erst geladen, wenn der Besucher zu ihnen scrollt, und der erste Bildschirm öffnet sich noch schneller.
4. Kein lazy am Hauptbild des ersten Bildschirms. Im Gegenteil, ihm sollten Sie fetchpriority high geben, damit der Browser es zuerst lädt und es so früh wie möglich erscheint.
5. In verschiedenen Browsern prüfen. Stellen Sie sicher, dass das Bild überall erscheint und moderne Browser tatsächlich das leichte AVIF ziehen. Das prüfen Sie leicht im Reiter Netzwerk der Entwicklerwerkzeuge.

Häufige Fehler und Mythen

Der häufigste Fehler ist der vergessene Fallback: Liefert man nur AVIF ohne Rückfalloption, laden bei einem kleinen Prozentsatz die Bilder schlicht nicht. Lassen Sie stets wenigstens WebP oder JPG am Ende der Kette. Ein zweiter Klassiker ist das falsch gesetzte type-Attribut: Der Browser richtet sich nach dem type der source, also muss image/avif an der AVIF-Datei und image/webp an der WebP-Datei stehen. Und zu den Mythen: Neue Formate sind nicht schlechter in der Qualität, im Gegenteil sehen AVIF und WebP bei gleichem Gewicht besser aus als JPG. Auch der Glaube, die Hälfte der Besucher sehe keine Bilder, stimmt nur ohne Fallback, mit der picture-Kette sehen garantiert hundert Prozent ein Bild. Und dass Suchmaschinen neue Formate nicht mögen, ist falsch: Die Tempo-Prüfwerkzeuge empfehlen den Umstieg sogar aktiv.