WebP und AVIF sind die beiden Bildformate, die heute auf schnellen Websites den Ton angeben. Beide verkleinern Fotos und Grafiken deutlich gegenüber JPEG und PNG, ohne dass man den Unterschied auf den ersten Blick sieht. Für eine Website heißt das: weniger Daten pro Seite, kürzere Ladezeiten, vor allem auf dem Smartphone. Dieser Ratgeber erklärt, worin sich die Formate unterscheiden, wann welches passt und wie du sie einbindest, ohne ältere Browser auszusperren.
Was WebP ist
WebP stammt von Google. Verlustbehaftete WebP-Bilder komprimieren mit derselben Vorhersagetechnik, die der Videocodec VP8 für Schlüsselbilder nutzt. Verlustfreie WebP-Bilder rekonstruieren neue Pixel aus bereits gesehenen Bildteilen [1].
Google nennt diese Werte: Verlustfreie WebP-Bilder sind 26 Prozent kleiner als PNG. Verlustbehaftete WebP-Bilder sind 25 bis 34 Prozent kleiner als vergleichbare JPEG-Bilder bei gleichem SSIM-Qualitätsindex. Transparenz kostet im verlustfreien Modus nur 22 Prozent zusätzliche Bytes. Im verlustbehafteten Modus mit Transparenz ist eine WebP-Datei in der Regel etwa dreimal kleiner als ein PNG [1]. WebP kann außerdem Animationen speichern und kann dabei kleiner sein als GIF oder APNG [1].
WebP wird nativ von Chrome, Safari, Firefox, Edge und Opera unterstützt. Zum Umwandeln stellt Google die Kommandozeilenwerkzeuge cwebp und dwebp bereit [1].
Was AVIF ist
AVIF steht für AV1 Image File Format und baut auf dem Videoformat AV1 auf. Laut dem Entwicklerhandbuch MDN sind verlustbehaftete AVIF-Bilder rund 50 Prozent kleiner als JPEG bei optisch ähnlicher Qualität. In einem dort zitierten Vergleich lag die mittlere Ersparnis gegenüber denselben JPEG-Dateien bei AVIF bei 50 Prozent, bei WebP bei 30 Prozent [2]. AVIF kann verlustfrei speichern, Animationen und Transparenz abbilden und unterstützt hohe Farbtiefe, HDR und erweiterte Farbräume [2].
Einen Nachteil nennt MDN ebenfalls: AVIF lädt nicht schrittweise. Der Browser zeigt das Bild erst, wenn die Datei vollständig geladen ist. Weil AVIF-Dateien klein sind, fällt das meist nicht auf. Bei großen Dateien kann ein Format mit schrittweisem Aufbau die bessere Wahl sein [2].
Video zu deinem Thema? Jan macht das.
Schreib Jan, worum es gehen soll. Die Anfrage geht an 301@seo-manager.info, die Abstimmung läuft über SEO NW.
Wie gut Browser die Formate unterstützen
Für AVIF weist die Datenbank Can I use eine weltweite Unterstützung von rund 96 Prozent der Nutzung aus, gemessen an den Browserstatistiken von StatCounter für September 2026. Chrome unterstützt AVIF seit Version 85, Firefox seit Version 93, Safari vollständig seit Version 16.4. Opera Mini und der Internet Explorer können AVIF nicht anzeigen [3].
MDN empfiehlt trotzdem, bei AVIF ein Ersatzformat wie WebP, JPEG oder PNG über das picture-Element mitzuliefern [2]. Das kostet wenig Aufwand und schützt vor leeren Bildflächen in älteren Browsern, auf manchen Geräten in Firmennetzen oder in Programmen, die Links mit Vorschau anzeigen.
WebP und AVIF im Vergleich
| Merkmal | WebP | AVIF |
|---|---|---|
| Ersparnis gegenüber JPEG | 25 bis 34 Prozent laut Google | rund 50 Prozent laut MDN |
| Verlustfrei | ja, 26 Prozent kleiner als PNG | ja |
| Transparenz | ja | ja |
| Animation | ja | ja |
| HDR und große Farbräume | nicht genannt | ja |
| Schrittweiser Bildaufbau | nicht genannt | nein |
| Browser | alle großen Browser | alle großen Browser, Safari ab 16.4 |
Quellen der Werte: Google für WebP [1], MDN für AVIF [2], Can I use für die Browserdaten [3].
Welches Format wofür
Für Fotos auf Produkt- und Ratgeberseiten ist AVIF meist die kleinste Datei. Wer AVIF als erste Wahl ausliefert und WebP oder JPEG als Ersatz, bekommt die Ersparnis ohne Risiko.
Für Grafiken mit Transparenz, etwa freigestellte Produkte vor neutralem Hintergrund, lohnt der Vergleich beider Formate. Verlustfreies WebP mit Alphakanal ist laut Google nur wenig größer als ohne Transparenz [1].
Für Logos, Symbole und einfache Zeichnungen sind Vektorformate wie SVG oft besser als jedes Pixelformat, weil sie bei jeder Größe scharf bleiben. Für animierte Kurzclips, die heute noch als GIF auf Seiten liegen, können WebP oder AVIF kleiner sein. Längere Bewegtbilder gehören als Video eingebunden. Wie das ohne Ladezeitverlust geht, steht im Ratgeber Video auf der Website einbinden ohne Ladezeitverlust.
Qualitätsstufe richtig wählen
Beide Formate arbeiten mit einer Qualitätsstufe, die du beim Umwandeln einstellst. Eine feste Zahl, die für jedes Bild passt, gibt es nicht. Ein Porträt mit weichem Hintergrund verträgt eine stärkere Kompression als ein Foto mit feinen Mustern, Haaren oder Schrift auf einem Produkt. Bewährt hat sich ein einfacher Test: Wandle drei typische Bilder deiner Website in mehreren Stufen um und vergleiche sie in Originalgröße nebeneinander. Die niedrigste Stufe, bei der du keinen Unterschied mehr erkennst, wird die Vorgabe für ähnliche Bilder. Achte dabei besonders auf Hauttöne, Verläufe am Himmel und Kanten. Dort zeigen sich Kompressionsfehler zuerst, etwa als Stufen im Verlauf oder als unscharfe Ränder.
Einbinden mit Fallback
Das picture-Element nimmt mehrere Quellen auf. Der Browser nimmt die erste, die er versteht. In der Praxis steht oben eine source-Zeile für AVIF, darunter eine für WebP und am Ende ein normales img-Element mit JPEG oder PNG. Das img-Element trägt den Alt-Text, die Breite und die Höhe.
Für die Google-Suche ist das unproblematisch. Google findet Bilder über das src-Attribut des img-Elements, auch wenn es in einem picture-Element steht. Die Google-Suche unterstützt BMP, GIF, JPEG, PNG, WebP, SVG und AVIF. Die Dateiendung sollte zum Dateityp passen [4]. Google empfiehlt außerdem, bei picture oder srcset immer eine Ersatzadresse im src-Attribut anzugeben, weil nicht alle Browser und Crawler diese Attribute verstehen [4]. Bilder, die nur als CSS-Hintergrund eingebunden sind, indexiert Google nicht [4].
Wie du zusätzlich verschiedene Bildgrößen für unterschiedliche Bildschirme auslieferst, erklärt der Ratgeber responsive Bilder mit srcset. Einen Überblick über alle Schritte zur Bildoptimierung gibt Bilder für Websites optimieren.
Was die Umstellung bringt
Bilder sind auf vielen Seiten der größte Teil der Daten. Kleinere Dateien verkürzen die Zeit, bis das größte Element im sichtbaren Bereich geladen ist. Dieser Wert heißt Largest Contentful Paint und gehört zu den Core Web Vitals, die das Glossar unter Core Web Vitals erklärt. Wie groß der Gewinn auf deiner Seite ist, hängt davon ab, wie die Bilder heute gespeichert sind. Wer schon gut komprimierte JPEG-Dateien in passender Größe ausliefert, gewinnt weniger als jemand, der Fotos direkt aus der Kamera hochlädt.
Viele Content-Management-Systeme können WebP und AVIF inzwischen selbst erzeugen oder über Erweiterungen umwandeln. Prüfe nach der Umstellung, ob die Bilder tatsächlich im neuen Format ausgeliefert werden. In den Entwicklerwerkzeugen des Browsers zeigt der Netzwerkreiter den Dateityp jedes geladenen Bildes.
Häufige Fehler
- AVIF ohne Ersatzformat ausliefern.
- Bilder in WebP umwandeln, aber weiterhin in Kameragröße ausliefern.
- Dateiendung .jpg für eine Datei, die in Wahrheit WebP ist.
- Wichtige Bilder nur als CSS-Hintergrund einbinden.
- Qualitätsstufe so niedrig wählen, dass Kanten und Schrift im Bild ausfransen.
Fotos bereitest du mit den Schritten oben selbst vor, Fotobearbeitung bietet SEO NW nicht an. Soll ein Video auf deine Website, das trotz hoher Qualität schnell lädt? Jan produziert es und liefert es samt Vorschaubild in passenden Formaten und Größen. Schick Jan eine kurze Anfrage, dann bekommst du eine Einschätzung.
- Organisation An image format for the Web (WebP). Google for Developers. Stand 07.08.2025. abgerufen am 30.10.2026
- Organisation Image file type and format guide. MDN Web Docs, Mozilla. Stand laufend. abgerufen am 30.10.2026
- AVIF image format. Can I use, Alexis Deveria. Stand Nutzungsdaten September 2026. abgerufen am 30.10.2026
- Organisation Best Practices für die Suchmaschinenoptimierung für Bilder. Google Search Central. Stand 02.03.2026. abgerufen am 30.10.2026
Häufige Fragen
Ist AVIF besser als WebP?
AVIF komprimiert in den meisten Fällen stärker. MDN nennt rund 50 Prozent Ersparnis gegenüber JPEG, Google für WebP 25 bis 34 Prozent. Dafür lädt AVIF nicht schrittweise. Für Fotos ist AVIF mit WebP als Ersatz meist die beste Lösung.
Unterstützen alle Browser WebP und AVIF?
Alle großen Browser zeigen beide Formate an, Safari AVIF vollständig seit Version 16.4. Ältere Browser und Opera Mini können AVIF nicht darstellen, deshalb lohnt ein Ersatzformat.
Erkennt Google WebP- und AVIF-Bilder?
Ja. Die Google-Suche unterstützt beide Formate, wenn sie über das src-Attribut eines img-Elements eingebunden sind. Die Dateiendung sollte zum tatsächlichen Dateityp passen.
Soll ich alle alten Bilder umwandeln?
Lohnend ist es vor allem bei großen Fotos auf viel besuchten Seiten. Wandle immer aus dem Original um und prüfe danach im Browser, ob das neue Format auch ausgeliefert wird.
Was ist mit JPEG XL?
JPEG XL ist ein weiteres modernes Format mit schrittweisem Bildaufbau. MDN empfiehlt auch hier ein Ersatzformat über das picture-Element, weil die Unterstützung noch nicht überall gegeben ist.
Video anfragen bei Jan
Schreib Jan, worum es gehen soll. Die Anfrage geht an 301@seo-manager.info, die Abstimmung läuft über SEO NW.
Zuletzt geprüft am 03.11.2026, nächste Prüfung spätestens im November 2027. Fehler entdeckt? Schreib uns.
