WebP vs. AVIF: Welches Bildformat sollten Sie 2026 verwenden?

Veröffentlicht von @SoNiceInfo am 22.09.2026 (Aktualisiert: 24.09.2026)

Die kurze Antwort auf die Frage „WebP oder AVIF?“ lautet: Exportieren Sie beide und liefern Sie sie mit dem <picture>-Element aus. Setzen Sie AVIF an die erste Stelle, WebP an die zweite und JPEG oder PNG als letzten Fallback: Browser mit Unterstützung erhalten die kleinste Datei, alle anderen trotzdem ein normales Bild. Wenn Sie nur ein Format ausliefern können, wählen Sie WebP für Kompatibilität und Encoding-Geschwindigkeit oder AVIF für maximale Ersparnis sowie für HDR und eine Farbtiefe von 10/12 Bit.

Vergleichstabelle WebP vs. AVIF

WebP ist ein Bildformat von Google, das auf dem Videocodec VP8 basiert; AVIF ist ein Bildformat auf Basis des Videocodecs AV1. Beide unterstützen verlustbehaftete und verlustfreie Kompression, Transparenz und Animation. Sie unterscheiden sich bei Kompressionseffizienz, Bittiefe und Encoding-Geschwindigkeit.

Merkmal	JPEG	WebP	AVIF
Kompression (verlustbehaftet, gleiche Qualität)	Referenz	ca. 25–35 % kleiner	ca. 50 % kleiner
Verlustfreie Kompression	Nein	Ja (ca. 26 % kleiner als PNG)	Ja
Transparenz / Animation	Nein	Ja	Ja
Farbtiefe 10 / 12 Bit	Nein	Nein (8 Bit)	Ja
HDR / erweiterter Farbraum	Nein	Eingeschränkt	Volle Unterstützung
Encoding-Geschwindigkeit	Schnell	Schnell	Deutlich langsamer
Maximale Abmessungen	65.535 × 65.535 px	16.383 × 16.383 px	Größere Bilder als WebP möglich
Progressive Darstellung	Ja	Nein	Nein
Browser-Unterstützung	Alle	Alle großen Browser (Safari ab macOS 11 / iOS 14)	Alle großen Browser (Safari ab macOS 13 / iOS 16)

Die Kompressionswerte sind Faustregeln aus veröffentlichten Vergleichsstudien und hängen von Bildinhalt und Encoder-Einstellungen ab.

Ein Messbeispiel: ein JPEG in WebP und AVIF

Das ist herausgekommen, als ich ein JPEG-Foto mit 1600×1064 px (230 KB) auf einem Mac mit den Befehlszeilen-Encodern umgewandelt habe.

# WebP (cwebp 1.6.0)
cwebp -q 80 in.jpg -o out.webp    # 230 KB -> 112 KB

# AVIF (avifenc 1.4.2)
avifenc -q 60 -s 6 in.jpg out.avif    # 230 KB -> 108 KB

Beide Ergebnisse waren weniger als halb so groß wie das Original-JPEG. Bedenken Sie, dass es sich um ein einzelnes Bild handelt und die beiden Qualitätseinstellungen nicht auf gleiche visuelle Qualität abgestimmt sind. Qualitätswerte bedeuten in verschiedenen Encodern Unterschiedliches. Für eine echte Website ist es daher am zuverlässigsten, die umgewandelten Bilder mit dem Auge zu vergleichen, bevor Sie sich auf eine Einstellung festlegen.

Originalbild (JPEG) — Rechts sehen Sie das Original-JPEG, tatsächlich in WebP kodiert (cwebp 1.6.0, -q 80). Zoomen Sie hinein, um Unterschiede auf Pixelebene zu prüfen.

In WebP kodiert (Qualität 80) — Rechts sehen Sie das Original-JPEG, tatsächlich in WebP kodiert (cwebp 1.6.0, -q 80). Zoomen Sie hinein, um Unterschiede auf Pixelebene zu prüfen.

Wann Sie WebP wählen sollten

Sie müssen ältere Browser und Betriebssystemversionen abdecken – Safari zeigt WebP ab macOS 11 / iOS 14 an, also auf mehr Systemen als AVIF.
Sie wandeln häufig große Mengen an Bildern um – das Encoding ist schnell, was Build- und Upload-Zeiten kurz hält.
Sie möchten kleinere verlustfreie Logos, Screenshots und Strichzeichnungen – verlustfreies WebP ist etwa 26 % kleiner als PNG.
Sie ersetzen animierte GIFs – animiertes WebP bietet volle Farbtiefe und wird breit unterstützt.

Um einen Ordner mit PNG-, JPG-, HEIC- oder GIF-Dateien auf Ihrem Mac in WebP umzuwandeln, eignet sich WebP Converter., ein WebP-Stapelkonverter für den Mac; der Einstieg ist kostenlos.

Wann Sie AVIF wählen sollten

Sie möchten die kleinstmögliche Übertragungsgröße – auf fotolastigen Seiten sind etwa 50 % weniger als bei JPEG mit vergleichbarer Qualität eine realistische Erwartung.
Sie liefern HDR-Fotos oder Fotos mit erweitertem Farbraum aus – eine Farbtiefe von 10 und 12 Bit vermeidet das Banding, das 8-Bit-WebP in weichen Verläufen zeigt.
Ihnen ist die Qualität bei niedrigen Bitraten wichtig – starke Kompression erzeugt weniger Blockartefakte.
Sie wandeln einmal im Voraus um – das langsame Encoding fällt dann kaum ins Gewicht.

Um PNG-, JPG- und HEIC-Dateien stapelweise in AVIF umzuwandeln, probieren Sie AVIF Converter., einen AVIF-Stapelkonverter für den Mac. Auch hier ist der Einstieg kostenlos.

AVIF und WebP gemeinsam mit dem picture-Element ausliefern

Listen Sie innerhalb von <picture> die <source>-Elemente von oben nach unten auf; der Browser wählt das erste Format, das er unterstützt. Das abschließende <img> ist der Fallback, sodass in jeder Umgebung ein Bild angezeigt wird.

<picture>
  <source type="image/avif" srcset="/images/photo.avif" />
  <source type="image/webp" srcset="/images/photo.webp" />
  <img src="/images/photo.jpg" alt="Describe the photo" width="1600" height="1064" loading="lazy" />
</picture>

Wenn Sie width und height angeben, verhindern Sie Layoutverschiebungen (CLS), während das Bild lädt. Fügen Sie loading="lazy" nicht zu einem Bild im sofort sichtbaren Bereich hinzu, das Ihr LCP-Element ist.

Unterstützung in WordPress

WordPress akzeptiert WebP-Uploads seit Version 5.8 und AVIF-Uploads seit Version 6.5. Bilder, die Sie früher als JPEG oder PNG hochgeladen haben, werden nicht automatisch ersetzt; vorhandenes Material muss also weiterhin umgewandelt und ausgetauscht werden. Für AVIF muss außerdem die Bildbibliothek des Servers AVIF unterstützen.

So wandeln Sie auf dem Mac in WebP und AVIF um

Am schnellsten geht es mit einer GUI-App. Ziehen Sie Bilder oder ganze Ordner per Drag & Drop hinein, um sie stapelweise umzuwandeln, und prüfen Sie die Qualität vor und nach der Umwandlung mit dem Auge, bevor Sie exportieren. In allen drei Apps findet die Umwandlung auf Ihrem Mac statt, und es muss nichts hochgeladen werden.

Sie möchten WebP – WebP Converter., ein WebP-Stapelkonverter für den Mac
Sie möchten AVIF – AVIF Converter., ein AVIF-Stapelkonverter für den Mac
Sie möchten WebP und AVIF in einem Durchgang – Image Tool+, ein Stapelkonverter für Bilder auf dem Mac, exportiert in mehrere Formate gleichzeitig

Für die Befehlszeile installieren Sie cwebp und avifenc mit Homebrew.

brew install webp libavif

Die Schritt-für-Schritt-Anleitungen finden Sie in separaten Artikeln.

Die drei Apps in der Übersicht der Mac-Bildkonverter vergleichen →

Die gesamte Umwandlung findet auf Ihrem Mac statt

Empfehlungen nach Einsatzzweck

Fotografen und Portfolio-Websites – AVIF an erster Stelle. Bei weichen Verläufen und bei HDR-Fotos oder Fotos mit erweitertem Farbraum hält die Farbtiefe von 10 / 12 Bit bei AVIF das Banding gering. Stellen Sie WebP als Fallback bereit.
Blogs und Unternehmenswebsites – WebP ist die sichere Standardwahl: Es wird breiter unterstützt und schnell kodiert. Wer AVIF nur für große Bilder im sofort sichtbaren Bereich ergänzt, verringert die Übertragungsgröße weiter.
Onlineshops – Liefern Sie beide Formate mit dem <picture>-Element aus. Bei einem großen Sortiment summiert sich die Encoding-Zeit von AVIF. Eine praktikable Aufteilung ist daher WebP für den Großteil der Produktbilder und AVIF für Key Visuals und hervorgehobene Bilder.
Logos, Screenshots und Strichzeichnungen – Verwenden Sie verlustfreies WebP (etwa 26 % kleiner als PNG) oder bleiben Sie bei PNG.

Häufige Fragen

Q. Sollte ich WebP oder AVIF verwenden?

Exportieren Sie beide und liefern Sie sie mit dem picture-Element aus: AVIF zuerst, WebP an zweiter Stelle, JPEG oder PNG als letzter Fallback. Wenn Sie nur eines wählen können, nehmen Sie WebP wegen der Kompatibilität und der Encoding-Geschwindigkeit oder AVIF wegen der größten Ersparnis bei der Dateigröße sowie für HDR und eine Farbtiefe von 10/12 Bit.

Q. Um wie viel ist AVIF kleiner als WebP?

Als Faustregel gilt bei vergleichbarer Qualität: WebP ist etwa 25–35 % kleiner als JPEG, AVIF etwa 50 % kleiner als JPEG. Der tatsächliche Abstand hängt stark vom Bild und von den Encoder-Einstellungen ab. Bei Fotos und weichen Verläufen liegt AVIF meist vorn, während kleine Icons und einfache Grafiken kaum einen Unterschied zeigen.

Q. Was passiert in einem Browser, der AVIF nicht unterstützt?

Ein img-Tag, das nur auf eine AVIF-Datei verweist, zeigt in einem Browser ohne AVIF-Unterstützung nichts an. Mit einem picture-Element, das AVIF-, WebP- und JPEG-Quellen in dieser Reihenfolge auflistet, wählt der Browser das erste Format, das er unterstützt, sodass jeder Besucher ein Bild erhält.

Q. Welche Nachteile hat AVIF?

Das Encoding ist deutlich langsamer als bei WebP oder JPEG, es gibt keine progressive Darstellung, und ältere Betriebssysteme und Apps können die Dateien unter Umständen nicht öffnen. In einem Workflow, der bei jedem Build viele Bilder umwandelt, macht sich die Encoding-Zeit bemerkbar.

Q. Wie wandle ich Bilder auf dem Mac in WebP oder AVIF um?

In der Befehlszeile verwenden Sie cwebp für WebP und avifenc für AVIF, beide über Homebrew erhältlich. Für die Stapelumwandlung in einer grafischen Oberfläche ohne Upload decken WebP Converter. und AVIF Converter. jeweils ein Format ab, und Image Tool+ exportiert beide aus einer einzigen App.

Zusammenfassung

Verwenden Sie standardmäßig das <picture>-Element mit AVIF → WebP → JPEG/PNG in dieser Reihenfolge.
Wenn Sie nur ein Format ausliefern: WebP für Kompatibilität und Encoding-Geschwindigkeit, AVIF für Dateigröße sowie HDR und eine Farbtiefe von 10–12 Bit.
Die Ersparnis variiert je nach Bild. Prüfen Sie daher Qualität und Dateigröße der umgewandelten Bilder, bevor Sie Ihre Einstellungen festlegen.

SoNice! entwickelt Bild- und Datei-Apps für Mac, iPhone und iPad.
Apps und Benutzerhandbücher
Datenschutzerklärung (Englisch)