Bilder in WebP und AVIF umwandeln: leichtere Bilder, schnellere Website, besseres SEO

Auf fast jeder Website, die wir auditieren, sind Bilder das mit Abstand schwerste Element der Seite. Sie machen regelmassig 50 bis 70 Prozent des gesamten Seitengewichts aus, weit mehr als Skripte, Schriften und CSS zusammen. Damit ist das Bildformat der gunstigste und risikoarmste Performance-Gewinn, den es gibt: Sie verandern die ubertragenen Bytes, ohne Layout, Code oder Design anzufassen. Wir sind gdefoto, ein Studio fur Produktfotografie und Retusche, und wir liefern taglich optimierte Bilder fur Onlineshops aus. In diesem Leitfaden gehen wir WebP und AVIF so durch, wie wir sie Kunden und Entwicklern erklaren: was sie wirklich sind, wie viel Gewicht sie gegenuber JPEG und PNG sparen, wie sich das in schnellere Seiten und bessere Core Web Vitals ubersetzt, wo der Browser-Support 2026 steht und in welchen konkreten Fallen ein Format das andere schlagt. Wenn Sie nur Ergebnisse wollen, koennen Sie Ihre Bilder in einer Minute online in WebP und AVIF umwandeln und direkt zu einer leichteren Website springen. Wenn Sie die Entscheidung dahinter verstehen wollen, lesen Sie weiter.

WebP und AVIF sind moderne Bildformate der nachsten Generation, die das in die Jahre gekommene JPEG und PNG ersetzen sollen. JPEG stammt aus dem Jahr 1992 und PNG aus 1996, beide sind alter als die Kompressionsmathematik, die wir heute aus Video-Codecs als selbstverstandlich voraussetzen. WebP und AVIF leihen sich diese Mathematik, und genau deshalb pressen sie dasselbe Bild in deutlich weniger Bytes.

WebP wurde 2010 von Google veroeffentlicht. Es leitet sich von den Video-Codecs VP8 und spater VP9 ab. Es unterstutzt verlustbehaftete und verlustfreie Kompression, Transparenz (einen Alphakanal wie PNG) und Animation (wie GIF). In der Praxis sehen wir WebP-Dateien bei optisch identischer Qualitat 25 bis 35 Prozent kleiner als ein JPEG, und bei derselben transparenten Grafik dramatisch kleiner als PNG, oft 60 bis 80 Prozent leichter.

AVIF kam 2019 und baut auf dem Video-Codec AV1 auf. Es ist das aggressivere der beiden Formate. AVIF unterstutzt einen weiten Farbraum, HDR, 10- und 12-Bit-Farbtiefe, Transparenz und Animation. Bei fotografischen Inhalten messen wir AVIF typischerweise 30 bis 50 Prozent kleiner als JPEG und haufig 20 Prozent kleiner als das vergleichbare WebP. Es halt Details in Hauttoenen, Verlaufen und Flachen mit gleichmassiger Farbe, wo JPEG kloetzige Artefakte erzeugt.

Ein paar echte Zahlen aus Dateien, die wir bearbeiten. Ein Produktfoto mit 1500 mal 1500 Pixeln, das als JPEG mit Qualitat 85 bei rund 420 KB liegt, wird als WebP etwa 280 KB und als AVIF rund 190 KB gross, ohne einen Unterschied, den ein Kaufer je bemerken wurde. Auf einer Produktseite mit 40 Bildern ist das der Unterschied zwischen einer 16-MB-Seite und einer 7-MB-Seite.

Haufige Fehler, die wir bei Webmastern an dieser Stelle sehen:

• Ein bereits komprimiertes JPEG konvertieren und Wunder erwarten. Den groessten Gewinn erzielen Sie, wenn Sie aus einer hochwertigen Quelle kodieren, nicht aus einer Datei, die schon Details verloren hat.
• Die Qualitat auf 100 hochdrehen. AVIF und WebP sehen bei Qualitat 75 bis 85 hervorragend aus. Auf 100 zu gehen blaht die Datei auf und loescht den Vorteil.
• PNG fur Fotos verwenden. PNG ist fur flache Grafiken und Transparenz gedacht, niemals fur Fotos. Diese auf WebP oder AVIF umzustellen ist auf den meisten Websites die groesste einzelne Einsparung.

Kleinere Bilder sind nicht nur ein nettes Extra. Google bewertet Seiten teilweise anhand der realen Ladeleistung uber die Core Web Vitals, und Bilder hangen direkt mit den wichtigsten Kennzahlen zusammen. Der Wechsel zu WebP oder AVIF bewegt jede einzelne davon.

Largest Contentful Paint (LCP) ist meist Ihr Hero- oder Hauptproduktbild. Es ist die Kennzahl, die Google am staerksten gewichtet, und der Zielwert liegt unter 2,5 Sekunden. Da LCP misst, wann Ihr groesstes sichtbares Element fertig geladen ist, kann das Verringern dieses Bildes von 420 KB auf 190 KB auf einer mittleren Mobilverbindung eine ganze Sekunde oder mehr sparen. In unseren Vorher-Nachher-Tests holt allein die Formatumstellung den LCP regelmassig aus dem Bereich "verbesserungswurdig" in den Bereich "gut".

Cumulative Layout Shift (CLS) betrifft die visuelle Stabilitat, Zielwert unter 0,1. Leichtere Bilder, die schneller laden, in Kombination mit expliziten Breiten- und Hoehenangaben, verhindern, dass Inhalte springen, wenn Bilder auftauchen. Die Formatumstellung unterstutzt das indirekt: schnellere Ladezeiten bedeuten weniger Zeit, in der das Layout neu umbricht.

Interaction to Next Paint (INP) profitiert, weil weniger Zeit fur das Dekodieren und Herunterladen riesiger Bilder den Haupt-Thread freigibt, um auf Tipps und Klicks zu reagieren.

Uber die Vitals hinaus gibt es nachgelagerte SEO- und Geschaeftseffekte. Geringeres Seitengewicht bedeutet niedrigere Absprungraten, und Google hat Forschung veroeffentlicht, die zeigt, dass die Absprungwahrscheinlichkeit stark steigt, sobald die Ladezeit drei Sekunden uberschreitet. Leichtere Bilder senken ausserdem Ihre Bandbreitenkosten und Ihre CDN-Kosten. Fur mobile Kaufer mit Datenlimit ist eine 7-MB-Seite gegenuber einer 16-MB-Seite der Unterschied zwischen einem Verkauf und dem Zuruck-Button.

Ein paar praktische Regeln, die wir anwenden:

• Liefern Sie das moderne Format an Browser, die es unterstutzen, und fallen Sie mit dem picture-Element und mehreren source-Tags auf JPEG zuruck.
• Setzen Sie loading="lazy" auf Bilder unterhalb des sichtbaren Bereichs, aber niemals auf Ihr LCP-Bild, das sofort laden sollte.
• Geben Sie dem Hero-Bild fetchpriority="high", damit der Browser es zuerst holt.
• Geben Sie immer Breite und Hoehe an, um CLS zu schutzen.

Wenn Ihre Produktfotos vor dem Optimieren noch saubere Kanten oder einen weissen Hintergrund brauchen, passen unsere Freistell-Services naturlich zur Formatumwandlung.

Der haufigste Einwand, den wir hoeren, lautet: "Bricht das in alteren Browsern?" Im Jahr 2026 liegt diese Sorge weitgehend hinter uns, doch die beiden Formate sind unterschiedlich weit gereift, und die richtige Wahl haengt von Ihrem Publikum und Ihren Werkzeugen ab.

Der WebP-Support ist praktisch universell. Chrome, Firefox, Edge, Safari und alle modernen Mobil-Browser unterstutzen es seit Jahren. Safari hat WebP 2020 mit Version 14 hinzugefugt. Die weltweite Unterstutzung liegt deutlich uber 96 Prozent. Praktisch gesehen koennen Sie WebP heute an jeden ausliefern, und nur die allerantiquiertesten Browser werden es verpassen.

Der AVIF-Support ist stark und waechst. Chrome und Firefox unterstutzen es seit 2020 beziehungsweise 2021. Safari hat AVIF 2022 in Version 16 hinzugefugt, mit voller Unterstutzung, die in spateren Versionen ausgereift ist. Die weltweite Unterstutzung liegt inzwischen im niedrigen bis mittleren 90-Prozent-Bereich. Ein kleiner Teil alterer Safari-Versionen und veralteter Umgebungen kann es noch nicht.

Deshalb ist das sichere Muster, beide auszuliefern und den Browser wahlen zu lassen. Mit dem picture-Element listen Sie zuerst AVIF, dann WebP, dann ein JPEG als Ruckfalloption. Der Browser nimmt das erste Format, das er versteht, also bekommen moderne Browser AVIF, etwas altere WebP und alles andere JPEG. Niemand sieht ein kaputtes Bild.

Wann Sie zu welchem greifen sollten:

• Verwenden Sie AVIF fur fotografische Inhalte, bei denen jedes Kilobyte zaehlt: grosse Hero-Banner, dichte Produktgalerien, Marktplatz-Anzeigen mit dutzenden Bildern. Es liefert die kleinsten Dateien und die besten Farbverlaufe.
• Verwenden Sie WebP, wenn Sie ein Format mit nahezu universeller Reichweite und einfacherem Werkzeug wollen, oder fur Grafiken mit Transparenz, die breite Kompatibilitat brauchen. Es laesst sich ausserdem schneller kodieren als AVIF, was bei sehr grossen Stapeln zaehlt.
• Behalten Sie JPEG nur als Ruckfalloption in Ihrem picture-Element, niemals als primar ausgeliefertes Format.

Ein Vorbehalt ist wissenswert: Die AVIF-Kodierung ist langsamer und CPU-intensiver als WebP. Bei einer Handvoll Bilder ist das unsichtbar, aber bei Tausenden brauchen Sie ein Tool, das es effizient bewaltigt. Mit unserem kostenlosen Konverter koennen Sie Ihre Bilder online in WebP und AVIF umwandeln und beide Formate erhalten, ohne etwas zu installieren oder sich mit Kommandozeilen-Encodern herumzuschlagen.