AVIF komprimiert ein Bild grob 20 Prozent kleiner als WebP bei gleicher Qualität, während WebP um ein Vielfaches schneller kodiert und an mehr Orten funktioniert. Bei beiden handelt es sich um Formate der nächsten Generation, die von Video-Codecs abgeleitet sind: WebP von VP8 im Jahr 2010, AVIF vom neueren AV1 im Jahr 2019. AVIF ist der stärkere Kompressor mit Unterstützung für HDR und 12-Bit-Farbe. WebP ist der pragmatische Standard mit umfassenderer Softwareunterstützung und schnellerer Kodierung. Dieser Vergleich befasst sich mit der Herkunft jedes Formats, der Komprimierung, der Kodierungsgeschwindigkeit, der Farbtiefe, der Browserunterstützung, der Transparenz und der Animation sowie mit der Frage, welches Format für eine bestimmte Verwendung am besten geeignet ist.

Keiner von beiden gewinnt direkt. AVIF erzeugt die kleinsten Dateien und die breiteste Farbvielfalt; WebP lässt sich heute schneller erstellen und sicherer bereitstellen. Viele Websites bieten beides an, zuerst AVIF und dann WebP, mit einem JPG- oder PNG-Fallback als letztes, sodass jeder Browser das beste Format erhält, das er lesen kann.

Woher jedes Format kommt

Bei beiden Formaten handelt es sich um Standbilder, die aus der Videokomprimierung stammen. WebP übernimmt seine Codierung von VP8, ein Google-Videocodec aus dem Jahr 2010, ist also mittlerweile weit über ein Jahrzehnt alt und wird umfassend unterstützt. AVIF übernimmt seine Codierung von AV1, ein lizenzfreier Codec aus dem Jahr 2019 der Alliance for Open Media, zu deren Mitgliedern Google, Netflix und Apple gehören. AV1 ist VP8 eine Generation voraus, weshalb AVIF stärker komprimiert, aber auch mehr Rechenleistung erfordert.

Komprimierung: AVIF gewinnt

Die Komprimierung begünstigt AVIF, da AV1 neuer und intelligenter ist. Auf demselben Foto in angepasster Qualität landet AVIF etwa 20 Prozent kleiner als WebPund viel kleiner als JPG. AVIF verarbeitet auch flache Farben und Verläufe sauber und vermeidet die Streifenbildung, die in schwächeren Formaten auftritt. Für die kleinstmögliche Datei ist AVIF der Gewinner, und bei Bildern mit großen glatten Bereichen wird die Lücke größer.

Die sparenden Verbindungen auf einer bildlastigen Website. Wenn WebP Ihre Bilder bereits um ein Drittel unter JPG schneidet, schneidet AVIF darüber hinaus ein weiteres Fünftel ab, sodass die Gesamtreduzierung im Vergleich zum Original-JPG sich der Hälfte nähern kann. Für Seiten, die anhand von Core Web Vitals gemessen werden, ist das ein bedeutender Geschwindigkeitsgewinn.

Kodierungsgeschwindigkeit: WebP gewinnt

Bei der Kodierung zahlt AVIF für die Komprimierung. AV1 ist also rechenintensiv AVIF kodiert um ein Vielfaches langsamer als WebP. Das ist wichtig, wenn eine Site Tausende von Bildern verarbeitet, sie spontan generiert oder auf begrenzten Serverressourcen läuft. WebP kodiert schnell genug für die Verwendung in Echtzeit, was einer der Gründe dafür ist, dass es zum Standard wurde. Die Dekodierung, die der Browser zur Anzeige des Bildes durchführt, ist für beide Seiten schnell, sodass Besucher in beiden Fällen keine Verlangsamung spüren.

Farbtiefe und HDR: AVIF gewinnt

Die Farbtiefe trennt die beiden deutlich. AVIF unterstützt bis zu 12 Bit pro Kanal und HDR, sodass es Bilder mit großem Farbraum und hohem Dynamikbereich enthält, die WebP nicht kann. WebP ist auf 8 Bit pro Kanal begrenzt, genau wie JPG. Für Fotografie, moderne Wide-Gamut-Displays und HDR-Inhalte ist AVIF die einzige Wahl. Auf einem Standard-8-Bit-Bildschirm ist der Unterschied unsichtbar, aber auf leistungsfähiger Hardware zeigt AVIF Farben, die WebP einfach nicht speichern kann.

Transparenz und Animation

Beide Formate decken Transparenz und Animation ab, sodass keines von beiden hier gewinnt. Jeder trägt einen Vollständiger Alphakanal, sodass ein transparentes Logo in beiden Fällen durchsichtig bleibt, und beide unterstützen animierte Clips, die weitaus kleiner als GIF sind. Die Animation von AVIF wird dank AV1 stärker komprimiert, während die Animation von WebP schneller produziert werden kann. Für eine einfache animierte Grafik ist beides deutlich besser als GIF.

Browser- und Softwareunterstützung: WebP gewinnt

Support ist der Vorteil von WebP. Jeder moderne Browser kann WebP seit Jahren lesen, und es gibt eine große Auswahl an Software, Plugins und CDNs, die damit umgehen. Die AVIF-Unterstützung ist jetzt in Browsern umfassend, einschließlich Chrome, Firefox und Safari, liegt jedoch hinter WebP zurück, und Desktop-Editoren, ältere Systeme und einige CDNs hinken noch weiter hinterher. Für eine Datei, die heute in gemischter Software zuverlässig geöffnet werden muss, ist WebP die sicherere Wahl.

Dateigröße in realen Zahlen

Reelle Zahlen machen den Handel konkret. Ein Foto, das als JPG 400 KB groß ist, kann bei gleicher Qualität bei etwa 280 KB als WebP und etwa 220 KB als AVIF landen. Eine transparente Grafik, die als PNG 120 KB groß ist, könnte als WebP 80 KB und als AVIF 60 KB groß sein. Die genauen Zahlen hängen vom Bild ab, die Reihenfolge gilt jedoch: AVIF am kleinsten, WebP in der Mitte, Legacy-Formate am größten. Wählen Sie basierend darauf, ob die zusätzlichen 20 Prozent die langsamere Kodierung und die engere Unterstützung von AVIF wert sind.

Dekodierungsgeschwindigkeit und wie Besucher sie empfinden

Der Besucher erlebt das Dekodieren, nicht das Kodieren, und hier liegen die beiden Formate nahe beieinander. Wenn ein Browser ein Bild anzeigt, muss er es dekodieren, und zwar sowohl AVIF als auch WebP dekodieren Sie schnell genug, um reibungslose Seitenladevorgänge zu ermöglichen. Die umfangreiche AV1-Berechnung in AVIF findet auf der Kodierungsseite statt und wird einmal bei der Erstellung des Bildes durchgeführt, nicht jedes Mal, wenn es geladen wird. Ein Besucher zahlt also niemals die Kodierungskosten von AVIF; Sie profitieren nur von dem kleineren Download.

Diese Aufteilung ist wichtig für die Art und Weise, wie Sie die einzelnen Formate bereitstellen. Kodieren Sie AVIF im Voraus, in einem Build-Schritt oder einem CDN, und speichern Sie das Ergebnis im Cache. Kodieren Sie es niemals bei jeder Anfrage, da dies Ihren Server belasten würde, ohne dass ein Besucher davon profitiert. WebP ist nachsichtig genug, um im laufenden Betrieb zu kodieren, aber AVIF belohnt die Vorabgenerierung.

Erstellen des Fallbacks in HTML

Bei der sicheren Bereitstellung beider Formate wird das Bildelement verwendet, wodurch der Browser die beste Quelle auswählen kann, die er versteht. Sie listen zuerst AVIF, dann WebP und zuletzt ein JPG oder PNG auf. Der Browser liest die Liste herunter und lädt die erstes Format, das es dekodieren kann, den Rest ignorierend. Ein moderner Browser verwendet AVIF, ein älterer verwendet WebP und ein alter Browser verwendet JPG. Kein Besucher sieht ein kaputtes Bild und jeder erhält die kleinste Datei, die seine Software zulässt.

Die meisten Content-Management-Systeme und Bild-CDNs erstellen dieses Markup für Sie, Sie laden also eine Datei hoch und das System generiert die Formate und die Fallback-Kette. Für eine kleine Website ist es in Ordnung, dies manuell zu tun, aber die Automatisierung lässt sich besser über Hunderte von Bildern skalieren.

AVIF für Fotografie und HDR

Der Farbvorteil von AVIF ist in der Fotografie am wichtigsten. Es ist 12-Bit-Farbe und HDR-Unterstützung bieten den großen Tonumfang einer modernen Kamera und die lebendige Ausgabe eines HDR-Displays, die WebP nicht speichern kann. Eine Landschaft mit hellem Himmel und tiefen Schatten behält in beiden Fällen mehr Details als AVIF. Auf einem Wide-Gamut-Bildschirm bleiben gesättigte Rot- und Grüntöne, die WebP abschneiden würde, erhalten.

Bei alltäglichen Webgrafiken auf Standardbildschirmen ist dieser Vorteil unsichtbar, da eine 8-Bit-Anzeige den zusätzlichen Bereich nicht darstellen kann. Aber für Fotoseiten, HDR-Inhalte und High-End-Displays ist AVIF das einzige der beiden, das dem Bild gerecht wird.

Die Server- und Werkzeugkosten von AVIF

Die Komprimierung von AVIF ist zum Zeitpunkt der Erstellung nicht kostenlos. Seine langsamere Kodierung bedeutet höhere CPU-Kosten und längere Bauzeiten, was sich summiert, wenn eine Website Tausende von Bildern generiert. Ältere Bildbibliotheken und einige Editoren können AVIF ebenfalls noch nicht schreiben, daher müssen Ihre Tools dies unterstützen. Im Gegensatz dazu wird WebP von fast jeder Bildbibliothek verarbeitet und kodiert schnell, was es vorerst zur unkomplizierten Wahl macht.

Die praktische Erkenntnis besteht darin, die zusätzliche Größeneinsparung von 20 Prozent gegen die Kodierungskosten und Werkzeuglücken abzuwägen. Für einen großen Medienbetrieb, bei dem jedes Byte optimiert wird, verdient AVIF seinen Platz. Für eine kleine Website bietet WebP die meisten Vorteile ohne Reibungsverluste.

Welches Format gewinnt

Keiner von beiden gewinnt bei jedem Job. Wählen Sie AVIF für kleinste Dateien, HDR und breite Farben wenn Ihr Tool dies unterstützt und die Codierungszeit kein Engpass darstellt. Wählen Sie WebP für schnelle Kodierung, umfassende Unterstützung und einen sicheren Standard Das funktioniert heute mit mehr Software. Das stärkste Setup bedient beides: zuerst AVIF, dann WebP und zuletzt ein JPG- oder PNG-Fallback, sodass jeder Besucher das beste Format erhält, das sein Browser dekodieren kann.

So erstellen Sie diese Formate

Für die Erstellung moderner Formate sind für WebP keine schweren Werkzeuge erforderlich. Unser PNG-zu-WebP-Konverter Läuft in Ihrem Browser, stapelt Dateien und fügt kein Wasserzeichen hinzu. Die AVIF-Kodierung ist anspruchsvoller und wird daher normalerweise von einem Image-CDN oder einem Build-Schritt und nicht von einem schnellen Browser-Tool übernommen. Für die meisten Websites ist es praktisch, jetzt WebP zu generieren und AVIF später über Ihr CDN hinzuzufügen.

Häufig gestellte Fragen

Verlangsamt AVIF meine Website beim Laden?

Nein. AVIF dekodiert schnell; Nur die Kodierung ist langsam, und die Kodierung erfolgt einmal, wenn das Bild erstellt wird, nicht bei jedem Laden der Seite. Besucher erhalten nur den kleineren Download.

Wie stelle ich AVIF mit einem WebP-Fallback bereit?

Verwenden Sie das Bildelement. Listen Sie zuerst AVIF, dann WebP und zuletzt ein JPG oder PNG auf, und der Browser lädt das erste Format, das er dekodieren kann.

Lohnt sich AVIF für eine kleine Website?

Oft noch nicht. WebP bietet den größten Teil der Einsparungen bei weniger Reibung, da die langsame Codierung und die Tooling-Lücken von AVIF zusätzliche Kosten verursachen, die eine kleine Website selten benötigt.

Ist AVIF besser als WebP?

Was die Komprimierung betrifft, ja. AVIF ist etwa 20 Prozent kleiner und unterstützt HDR. WebP kodiert schneller und bietet eine breitere Unterstützung, sodass es heute die sicherere Standardeinstellung ist.

Wie viel kleiner ist AVIF als WebP?

Um 20 Prozent kleiner bei gleicher Qualität und viel kleiner als JPG, da AVIF den neueren AV1-Codec verwendet.

Warum ist AVIF langsamer zu erstellen?

Weil Die AV1-Kodierung ist rechenintensiv. AVIF tauscht die Kodierungsgeschwindigkeit gegen eine bessere Komprimierung ein, was bei der Massenverarbeitung von Bildern oder auf begrenzten Servern wichtig ist.

Unterstützt WebP HDR?

Nein. WebP ist auf 8 Bit pro Kanal begrenztDaher kann weder HDR noch Wide-Gamut-Farben gespeichert werden. AVIF unterstützt bis zu 12 Bit und HDR.

Welche Browser unterstützen AVIF?

Chrome, Firefox und Safari unterstützen AVIF, obwohl die Akzeptanz hinter WebP zurückbleibt und einige CDNs und Editoren zurückbleiben. Stellen Sie älteren Clients einen WebP- oder JPG-Fallback zur Verfügung.

Sorgen sowohl AVIF als auch WebP für Transparenz?

Ja. Beide verfügen über einen vollständigen Alphakanal, sodass eine transparente Grafik im Gegensatz zu JPG in beiden Formaten durchsichtig bleibt.

Ist AVIF oder WebP besser für Animationen?

Beide schlagen GIF; AVIF komprimiert stärker. AVIF-Animationen sind kleiner, WebP ist schneller zu erstellenWählen Sie also aus, ob Größe oder Kodierungsgeschwindigkeit wichtiger sind.

Sollte ich AVIF oder WebP für meine Website verwenden?

Beides servieren. Zuerst AVIF für die kleinste Datei, dann WebP Aus Kompatibilitätsgründen mit einem JPG- oder PNG-Fallback für den Rest.

Wird AVIF WebP ersetzen?

Nicht bald. AVIF komprimiert besser, aber WebP kodiert schneller und bietet eine breitere UnterstützungDaher ist es wahrscheinlich, dass beide Jahre lang nebeneinander existieren und zusammen dienen.

Können ältere Browser AVIF öffnen?

Oft nein. Die AVIF-Unterstützung ist jünger als die von WebPDaher ist ein JPG- oder PNG-Fallback für Besucher älterer Software unerlässlich.

AVIF und WebP sind beides Formate der nächsten Generation, die auf Video-Codecs basieren, aber AVIF komprimiert etwa 20 Prozent kleiner und fügt HDR und 12-Bit-Farbe hinzu, während WebP schneller kodiert und eine breitere Unterstützung genießt. Beide behalten Transparenz und Animation, sodass die Wahl darauf ankommt, ob Sie die kleinste Datei oder die sicherste und schnellste Datei wünschen. Stellen Sie zuerst AVIF aus Gründen der Größe, dann WebP aus Kompatibilitätsgründen und ein JPG- oder PNG-Fallback für den Rest bereit. Erstellen Sie WebP in Ihrem Browser mit unserem oben genannten Konverter und fügen Sie AVIF über Ihre Bildpipeline hinzu.

Kurzreferenz: AVIF oder WebP

Greifen Sie nach AVIF wenn Sie die absolut kleinste Datei wünschen, wenn das Bild HDR oder breite Farben benötigt und wenn Ihr CDN oder Build-Schritt es vorkodieren kann, ohne jede Anfrage zu verlangsamen. Greifen Sie nach WebP wenn Sie eine schnelle Kodierung, die umfassendste Softwareunterstützung und eine reibungslose Standardeinstellung wünschen, die fast jedes Tool bereits beherrscht. Das stärkste Setup ist nicht das eine oder das andere, sondern beide, der Reihe nach bereitgestellt: AVIF zuerst für die Größe, WebP an zweiter Stelle für die Reichweite und zuletzt ein JPG- oder PNG-Fallback, damit kein Besucher mit einem kaputten Bild zurückbleibt.

Was kommt nach AVIF

Bildformate entwickeln sich weiter, und JPEG XL ist der nächste Anwärter, der eine starke Komprimierung mit verlustfreier JPG-Transkodierung verspricht. Die Browserunterstützung ist heute begrenzt, daher ist es noch keine praktische Wahl. Derzeit sind AVIF und WebP die beiden Formate der nächsten Generation, die es wert sind, eingesetzt zu werden, wobei JPEG XL sehenswert ist. Der Aufbau einer Fallback-Kette bedeutet, dass Sie später ein neueres Format hinzufügen können, ohne ältere Browser zu beschädigen, weshalb der Bildelement-Ansatz zukunftssicher ist.