Muss ich mich für ein einziges Format entscheiden?

Nein, und der professionelle Ansatz besteht ohnehin darin, sich nicht auf ein Format festzulegen. Das `picture`-Element von HTML erlaubt es, mehrere Fassungen desselben Bildes anzugeben; der Browser wählt das effizienteste Format, das er unterstützt, und überspringt die übrigen still. So nehmen Sie in modernen Browsern den Geschwindigkeitsgewinn von AVIF mit, ohne in älteren Umgebungen einen einzigen Besucher zu verlieren. Der Zwang zu einem einzigen Format entsteht nur in Kontexten, in denen Sie diesen Mechanismus nicht nutzen können, etwa bei einem E-Mail-Newsletter.

Ist WEBP inzwischen überflüssig, soll ich direkt zu AVIF wechseln?

WEBP ist weiterhin eine wertvolle Zwischenstufe und keineswegs überflüssig. AVIF bietet in der Regel die effizientere Kompression, doch die Browser- und Werkzeugunterstützung von WEBP ist seit längerem etabliert und wird von einem breiteren Softwarespektrum erkannt, von Content-Management-Systemen bis zu Bildbearbeitungsprogrammen. Wenn Sie eine Rückfallkette aufbauen, ist AVIF als erste, WEBP als zweite und PNG oder JPG als letzte Stufe eine ausgewogene Lösung. Können Sie nur ein einziges modernes Format ausliefern, entscheiden Sie nach dem technischen Profil Ihrer Zielgruppe.

Welches soll ich bei Bildern mit Transparenzbedarf verwenden?

Alle drei unterstützen den Alphakanal, Transparenz ist also kein Kriterium mehr, das die Formatwahl allein bestimmt. Früher waren Sie, wenn Sie Transparenz wollten, auf PNG und damit auf große Dateien festgelegt; WEBP und AVIF haben dieses Dilemma beseitigt. Die Entscheidung fällt in diesem Fall wieder entlang der Achsen Effizienz und Kompatibilität. Achten Sie lediglich darauf: Prüfen Sie im verlustbehafteten Modus, ob an weichen Kantenübergängen Störungen entstehen, besonders bei Logos mit scharfen Kanten.

Was tue ich bei Screenshots und textlastigen Bildern?

Bei dieser Inhaltsart ist Vorsicht geboten, denn verlustbehaftete Kompression kann feine Textkanten weichzeichnen, und die Lesbarkeit leidet unmittelbar. Mit hohen Qualitätseinstellungen liefern WEBP und AVIF meist ein sauberes Ergebnis, und die Datei bleibt trotzdem kleiner als das PNG, doch eine Massenkonvertierung mit aggressiven Einstellungen ist riskant. Machen Sie bei solchen Bildern Versuche an einigen Beispielen und prüfen Sie das Ergebnis bei hundertprozentigem Zoom. Ist absolute Schärfe zwingend, ist es am sichersten, bei PNG zu bleiben oder die verlustfreien Modi in Betracht zu ziehen.

PNG, WEBP oder AVIF für die Geschwindigkeit Ihrer Website?

Die Frage ist komplizierter, als sie aussieht

Antworten auf die Frage "Welches Bildformat soll ich für meine Website verwenden?" küren meist einen Sieger. Tatsächlich lässt sich diese Frage nicht mit einem einzigen Sieger beantworten, denn die drei Formate sind an unterschiedlichen Stellen stark, und die größte Variable des Webs — das Gerät und der Browser des Besuchers — liegt nicht in Ihrer Hand.

In diesem Beitrag vergleichen wir die drei Formate anhand echter Kriterien und beschreiben anschließend die praktische Strategie, die die meisten Websites umsetzen sollten.

Kurzporträt der drei Formate

PNG

Es arbeitet verlustfrei: Es speichert den exakten Wert jedes Pixels und verwirft keine Information. Es unterstützt den Alphakanal, und diese Unterstützung ist außerordentlich einheitlich. Es öffnet sich in jedem Browser, auf jedem Gerät, in jedem Programm.

Wo es stark ist: Grafiken mit scharfen Kanten, Logos, Screenshots, Bilder mit feinem Text, Zeichnungen mit wenigen Farben. Bei diesen Inhalten arbeitet die verlustfreie Kompression effizient und die Datei bleibt vertretbar.

Wo es schwach ist: fotografische Inhalte. Natürliche Textur und kontinuierliche Farbübergänge lassen sich mit verlustfreien Algorithmen nicht effizient codieren; die PNG-Fassung eines Fotos wird überraschend groß. Im Web bedeutet das unmittelbar eine langsame Seite.

WEBP

Die erste weit verbreitete Generation der modernen Formate. Es kann sowohl im verlustbehafteten als auch im verlustfreien Modus arbeiten und unterstützt den Alphakanal. Es ist deutlich effizienter als JPG.

Wo es stark ist: in der Balance zwischen Effizienz und Kompatibilität. Die Browserunterstützung ist seit langem etabliert, und ein breites Softwarespektrum von Content-Management-Systemen bis zu Bildbearbeitungsprogrammen kennt WEBP. Das ist ein Vorteil, den man in der Praxis nicht unterschätzen sollte.

Wo es schwach ist: Es ist nicht so effizient wie AVIF. Bei gleicher visueller Qualität erzeugt es in der Regel größere Dateien.

AVIF

Das Format der neuen Generation, das auf der Intra-Frame-Codierung des Videocodecs AV1 beruht. Es unterstützt Alphakanal, HDR, weiten Farbumfang und hohe Farbtiefe. Es hat einen verlustbehafteten und einen verlustfreien Modus.

Wo es stark ist: in der Kompressionseffizienz. Bei vergleichbarer visueller Qualität erzeugt es deutlich kleinere Dateien als JPG — das oft genannte Verhältnis von grob der Hälfte ist zwar eine Verallgemeinerung, weist aber in die richtige Richtung — und ist meist auch effizienter als WEBP. Bei fotografischen Inhalten wird der Unterschied frappierend.

Wo es schwach ist: bei der Kompatibilität. Aktuelle Mainstream-Browser unterstützen es, aber ältere Geräte, ältere Betriebssysteme, viele Desktop-Programme und manche Plattformen tun es nicht. Zudem ist die Codierung rechnerisch aufwendiger; die Dateierzeugung dauert länger.

Vergleichstabelle

| Kriterium | PNG | WEBP | AVIF | |---|---|---|---| | Kompressionseffizienz | Gering (bei Fotos) | Gut | Am besten | | Verlustfreier Modus | Immer | Vorhanden | Vorhanden | | Transparenz | Ja | Ja | Ja | | Browserunterstützung | Universell | Sehr breit | Aktuelle Browser | | Unterstützung in Desktop-Programmen | Universell | Breit | Begrenzt | | Codiergeschwindigkeit | Schnell | Schnell | Langsamer |

Die entscheidende Einsicht: Das ist keine Entweder-oder-Frage

Wenn Sie bis hierher gelesen haben, ist Ihnen eine Spannung aufgefallen. AVIF ist am effizientesten, aber am riskantesten. PNG ist am sichersten, aber am langsamsten. Auch die Mitte wirkt nicht wie eine Lösung.

Die Lösung besteht nicht darin, zwischen den Formaten zu wählen, sondern alle zugleich auszuliefern.

Genau dafür gibt es das picture-Element von HTML. Sie geben mehrere Fassungen desselben Bildes an; der Browser wählt das effizienteste Format, das er unterstützt, und überspringt die übrigen still. Der Besucher bemerkt nichts davon — die Seite lädt im modernen Browser nur schneller.

Eine typische Rückfallkette baut sich so auf:

AVIF — Browser, die es unterstützen, erhalten die kleinste Datei
WEBP — moderne Umgebungen ohne AVIF-Unterstützung landen hier
JPG oder PNG — das letzte Sicherheitsnetz für die ältesten Umgebungen

Der Preis dieses Ansatzes ist, dass Sie von jedem Bild mehrere Fassungen erzeugen und vorhalten müssen. Der Gewinn sind Geschwindigkeit und Erreichbarkeit zugleich; Sie opfern keines von beidem.

Und wenn Sie doch ein einziges Format wählen müssen?

In manchen Kontexten können Sie den picture-Mechanismus nicht nutzen — E-Mail-Newsletter, Uploads auf bestimmte Plattformen, direkte Dateiweitergabe. Dann entscheidet der Inhalt zusammen mit der Zielgruppe:

Fotografischer Inhalt, aktuelles Webpublikum → AVIF oder WEBP. WEBP ist sicherer, AVIF ist schneller.
Fotografischer Inhalt, Publikumsprofil unbekannt → JPG ist weiterhin die sicherste universelle Wahl.
Logo, Icon, Grafik mit scharfen Kanten → PNG. Verlustfrei, mit einheitlicher Transparenz, überall zu öffnen und bei diesen Inhalten ohnehin klein.
Screenshot, viel Text → PNG oder ein hochwertiges WEBP. Lesbarkeit ist das wichtigste Kriterium.
Transparenz nötig, Datei muss klein sein → WEBP oder AVIF; beide unterstützen den Alphakanal.

Ein häufiger Fehler: die Quelle opfern

In der Formatdiskussion wird ein Punkt oft übersprungen. Die optimierten Dateien, die Sie fürs Web erzeugen, sind Auslieferungskopien, nicht die Master-Kopie.

Wenn Sie ein verlustbehaftetes WEBP oder AVIF erzeugen, kommen die verworfenen Daten nicht zurück. Müssen Sie das Bild später neu skalieren, mit einer anderen Qualitätseinstellung erzeugen oder in ein anderes Format wandeln, brauchen Sie die verlustfreie Quelle.

Löschen Sie deshalb bei der Umwandlung von PNG in AVIF das ursprüngliche PNG nicht. Die Quelle soll verlustfrei bleiben; die Auslieferungskopie können Sie beliebig oft neu erzeugen.

Was das Format nicht lösen kann

Eine letzte Warnung: Formatoptimierung ist nur ein Teil des Problems der Seitengeschwindigkeit und löst für sich allein nicht alles.

Wenn Sie ein Bild, das auf dem Bildschirm 400 Pixel breit erscheint, mit 4000 Pixeln Breite ausliefern, beseitigt der Wechsel zu AVIF diese Verschwendung nicht — er verpackt die Verschwendung nur etwas effizienter. Bilder in der Größe zu erzeugen, in der sie verwendet werden, bringt meist mehr Gewinn als ein Formatwechsel.

Ebenso sind das verzögerte Laden von Bildern außerhalb des sichtbaren Bereichs und das Entfernen überflüssiger Bilder von der Seite Gewinne, die vom Format unabhängig sind.

Kurz gefasst

AVIF ist am effizientesten, WEBP am ausgewogensten, PNG am sichersten und bei Inhalten mit scharfen Kanten weiterhin die richtige Wahl. Die eigentliche Antwort besteht aber nicht darin, eines davon zu wählen: Bauen Sie eine Rückfallkette auf und lassen Sie den Browser selbst das für ihn Beste wählen. Überall dort, wo Sie das können, erhalten Sie Geschwindigkeit und Erreichbarkeit zugleich. Wo Sie es nicht können, entscheiden die Art des Inhalts und das Profil Ihres Publikums — und vergessen Sie in jedem Fall nicht, Ihre verlustfreie Quelle aufzubewahren.