AVIF und WebP: das richtige Bildformat für Ladezeit
AVIF, WebP oder die alten JPEG und PNG: welches Format zu welchem Bild passt und wie automatische Formatkonvertierung eine Website wirklich beschleunigt.
rabbitclip-TeamVeröffentlicht: 4 Min. Lesezeit
Kurz gesagt
AVIF eignet sich für fotolastige Bilder, WebP für alles, was breite Browserunterstützung mit Transparenz braucht, und JPEG oder PNG bleiben als Fallback für die älteren Browser, die keins von beiden lesen. Alle drei gleichzeitig auszuliefern, geschieht über das picture-Element oder serverseitige automatische Konvertierung; die besuchende Person tut nichts zusätzlich, ihr Browser erhält einfach die kleinste Datei, die er lesen kann.
Lädt die Galerieseite einer Spa-Kette als Reihe hochauflösender JPEGs, kann das Erscheinen mehrere Sekunden dauern. Werden dieselben Bilder als AVIF oder WebP ausgeliefert, sinkt die Dateigröße spürbar; nach den Messungen von web.dev fallen verlustfreie WebP-Bilder rund 26 Prozent kleiner aus als PNG, und verlustbehaftetes WebP kommt 25 bis 35 Prozent kleiner als ein gleichwertiges JPEG heraus.
Was sind AVIF und WebP, und wie unterscheiden sie sich von JPEG?
AVIF ist ein quelloffenes Bildformat auf Basis des AV1-Videocodecs; es erzeugt bei gleicher visueller Qualität eine deutlich kleinere Datei als JPEG. WebP, von Google entwickelt, unterstützt sowohl verlustbehaftete als auch verlustfreie Kompression sowie Transparenz; seine Browserunterstützung ist breiter als die von AVIF.
Beide sind dafür gebaut, die älteren Formate JPEG und PNG abzulösen, ersetzen sich aber nicht gegenseitig. AVIF komprimiert stärker, braucht aber länger zum Kodieren; WebP kodiert schneller und läuft in mehr Browsern. Die meisten Seiten liefern beide, in Prioritätsreihenfolge.
Welches Format passt zu welchem Bild?
Das richtige Format hängt davon ab, was das Bild tatsächlich ist: ein Foto, ein Logo, ein Icon und eine Animation liefern jeweils in einem anderen Format das bessere Ergebnis.
- Fotos und Produktaufnahmen: AVIF zuerst, WebP als Fallback
- transparente Logos und Icons: WebP, da es Transparenz sowohl verlustbehaftet als auch verlustfrei unterstützt
- einfache Zeichnungen und flächige Grafiken: SVG, ganz ohne Rasterformat
- kurze Animationen: ein animiertes WebP anstelle eines GIF
Wie wird automatische Konvertierung eingerichtet?
Der einfachste Weg ist das picture-Element; dem Browser werden der Reihe nach AVIF, dann WebP, dann JPEG angeboten, und er wählt das erste, das er unterstützt. Die Einrichtung kann auf einer von drei Ebenen erfolgen.
- Auf einer Next.js-Seite erzeugt die eingebaute Image-Komponente das passende Format pro Anfrage automatisch, keine zusätzliche Einrichtung nötig
- auf WordPress oder einer statischen Seite erzeugen Werkzeuge wie sharp oder squoosh-cli AVIF- und WebP-Kopien beim Build
- auf CDN-Ebene wählt ein Bilddienst das Format mit einer Option wie format=auto selbst, je nachdem, was der anfragende Browser unterstützt
- in allen drei Wegen bleibt das ursprüngliche JPEG oder PNG als Fallback erhalten, sodass kein Browser je ohne Bild bleibt
Warum wird ein Fallback trotzdem noch gebraucht?
AVIF und WebP laufen in der großen Mehrheit aktueller Browser, aber ältere Browserversionen in Firmennetzen, manche E-Mail-Programme oder Vorschauen innerhalb einer App erkennen möglicherweise keines der beiden Formate. Ein ohne Fallback veröffentlichtes AVIF-Bild erscheint auf diesen Clients einfach nicht; es wird zu einem defekten Symbol.
MDNs Leitfaden zu Bildformaten empfiehlt aus genau diesem Grund neben jedem neuen Format einen Fallback; das picture-Element oder serverseitige Content-Aushandlung macht diesen Fallback automatisch, ohne jedes Bild von Hand doppelt hochzuladen.
Automatische Formatauslieferung auf CDN- und Hosting-Ebene
Die Konvertierung dem CDN statt dem Build-Prozess zu überlassen, hat den Vorteil, dass das Ursprungsbild unverändert bleibt, während sich das ausgelieferte Format selbst an den Browser anpasst. Cloudflares Bildoptimierungsdienste tun das mit einer Option wie format=auto; ein Browser, der AVIF unterstützt, bekommt AVIF, einer, der es nicht tut, bekommt stattdessen WebP.
Wichtig ist dabei, die aktuelle Dokumentation im Blick zu behalten; Cloudflare hat 2026 seinen älteren Polish-Dienst für neue Zonen eingestellt und leitet neue Einrichtungen stattdessen auf Image Resizing und Cloudflare Images um. Welcher Dienst hinter einer Seite steht, entscheidet direkt darüber, ob AVIF überhaupt angeboten wird.
Häufige Fehler
Eine Konvertierung einmalig einzurichten, beendet das Thema nicht; drei Fehler zeigen sich regelmäßig weiterhin.
- AVIF ohne Fallback veröffentlichen und das Bild auf älteren Clients ganz verlieren
- die Kompression auf der aggressivsten Stufe belassen, ohne die Qualität mit dem Auge zu prüfen
- ein Ursprungsbild hochladen, das weit größer ist als seine tatsächliche Anzeigegröße, was die Datei unabhängig vom Format aufbläht
- das Format konvertieren, aber Breite und Höhe nicht im HTML setzen, was beim Laden der Seite zu Layoutverschiebung führt
Die Wahl zwischen AVIF und WebP ist kein Geschwindigkeitstrick für sich allein; das richtige Format zahlt sich erst mit der richtigen Größe und einem Fallback aus. Ein Erstgespräch mit rabbitclip ist ein guter Weg, um zu messen, wie viel Bildgewicht Ihre Website tatsächlich ausbremst.
Häufige Fragen
Ist AVIF immer besser als WebP?
Bei der Dateigröße meist ja, aber es braucht länger beim Kodieren und läuft in weniger Browsern. Die meisten Seiten liefern beide, mit AVIF zuerst.
Sollten PNG und JPEG ganz aufgegeben werden?
Nein, sie sollten als Fallback bleiben. Ältere Browser und Clients brauchen sie weiterhin.
Beeinflusst ein Formatwechsel das SEO?
Nicht direkt, aber schnellere Seiten verbessern die Core-Web-Vitals-Werte und damit indirekt Signale zur Nutzererfahrung.
Wann sollte stattdessen SVG verwendet werden?
Bei Logos, Icons und flächigen Zeichnungen; als Vektorformat bleibt es bei jeder Größe scharf und ist meist auch kleiner.
