AVIF oder WebP: Welches Bildformat passt zu deiner Website?

AVIF und WebP: die entscheidenden Unterschiede

Beide Formate können die Bilddaten reduzieren, die deine Website an Besucher überträgt. Keines garantiert für jedes Motiv eine kleinere Datei. Eine detailreiche Landschaft, eine einfache Grafik und ein freigestelltes Produkt reagieren unterschiedlich auf Kompression. Ausgangsbild, Einstellungen und Darstellungsgröße sind ebenso wichtig wie die Dateiendung.

Das sind Fähigkeiten der Formate, keine Funktionsliste jedes Konverters. Der Bildformatleitfaden von MDN erläutert AVIF. Die WebP-Dokumentation von Google beschreibt Kompression und Transparenz bei WebP. Für die breitere Auswahl einschließlich JPG, PNG und Grafiken mit Text lies den Leitfaden zu Bildformaten für Websites.

Ist AVIF immer kleiner als WebP?

Nein. Der Schieberegler unten zeigt zwei echte Pixilo-Exporte aus demselben JPG mit 1920 × 1440 Pixeln: ein WebP mit 299,0 kB bei Qualität 80 und ein AVIF mit 275,7 kB mit der festen Qualitätsvorgabe 65. Das AVIF spart 23,3 kB, also rund 8 % gegenüber dem WebP. Das ist der relevante Vergleich beim Ersetzen dieses WebP, auch wenn AVIF gegenüber dem 413,1 kB großen Quell-JPG etwa 33 % spart.

Beide Versionen wurden direkt aus diesem JPG ohne Größenänderung erstellt. Dies sind vollständige Dateigrößen mit unterschiedlichen, formatspezifischen Qualitätseinstellungen; die Exporte wurden nicht auf gleiche sichtbare Qualität abgestimmt. Die Quelle war bereits komprimiert, deshalb kann keine Version verlorene Details zurückholen. Das Ergebnis beschreibt diese Dateien und Einstellungen, keine garantierte AVIF-Ersparnis.

Ziehe die Trennlinie über die Felsstruktur, die Bergkante und den gleichmäßigen Himmel. Suche in der Detailansicht nach weicheren Texturen, Säumen und Farbstufen. Kehre dann zur Gesamtansicht zurück und beurteile, ob der Unterschied in der vorgesehenen Anzeigegröße stört. Wenn dir das Aussehen einer Version nicht genügt, prüfe einen anderen Export, bevor du nach Größe entscheidest.

Pixilo-WebPPixilo-AVIF

Wann ist AVIF eine gute Wahl?

Teste AVIF für Fotos, die merklich zum Datenvolumen einer Seite beitragen: große Produktansichten, redaktionelle Fotos und Banner. Bewerte die Ersparnis in Bytes und Prozent. Die oben eingesparten 23,3 kB sind für ein Bild eine mäßige Verringerung; ihr Nutzen hängt davon ab, wie oft das Bild geladen wird und wie viel zusätzliche Arbeit die Alternative beim Veröffentlichen verursacht.

Teste vor dem Konvertieren einer ganzen Bildsammlung eine repräsentative Auswahl: feine Stoffe oder Haare, dunkle Bereiche und weiche Verläufe. Halte die Abmessungen gleich und verwerfe Versionen, die wichtige Details verlieren. AVIF ist ein sinnvoller Ersatz, wenn die verbleibende Ersparnis relevant ist und deine Website die Datei zuverlässig ausliefert. Behalte WebP bei Bildern, für die sich dieser Kompromiss nicht lohnt.

Die HDR-Unterstützung des Formats macht eine gewöhnliche Konvertierung nicht zu einem HDR-Verfahren. Pixilos AVIF-Werkzeug erstellt derzeit aus den vom Browser dekodierten Pixeln eine verlustbehaftete 8-Bit-Datei. Es bietet weder HDR-Erhalt noch einen Schalter für verlustfreies Speichern. Bewahre das Original für Archivierung, Druck oder anspruchsvolle Farbbearbeitung auf.

Wann solltest du bei WebP bleiben?

Bleibe bei WebP, wenn es gut aussieht, die Dateigröße passt und deine Website es zuverlässig anzeigt. Ein Wechsel nur wegen eines neueren Formats verursacht Arbeit ohne garantierten Nutzen. Auch dein CMS, Bilddienst oder Editor kann für WebP einen einfacheren Ablauf bieten.

Prüfe Grafiken mit Text und scharfen Kanten besonders sorgfältig. Werden kleine Beschriftungen beschädigt oder entstehen Störungen an Linien, nutze gegebenenfalls ein Werkzeug für verlustfreies WebP oder behalte PNG. Pixilos WebP-Konverter bietet keinen eigenen verlustfreien Modus. Der Ratgeber PNG oder WebP vertieft diese Entscheidung.

Verlangt ein Empfänger oder Formular JPG beziehungsweise PNG, erfülle diese Vorgabe zuerst. Ein geeignetes Websiteformat kann bei einem Upload trotzdem abgelehnt werden. Das auf der Seite angezeigte Bild und eine herunterladbare Datei müssen nicht dasselbe Format haben.

AVIF und WebP mit Pixilo vergleichen

1. Vom Original ausgehen. Nutze eine JPG-, PNG- oder WebP-Quelle und bewahre sie separat auf. Erstelle nicht einen Testexport aus einem bereits komprimierten Testexport.
2. Zuerst die Abmessungen festlegen. Bereite bei Bedarf mit dem Werkzeug zum Ändern der Bildgröße eine gemeinsame Quelle vor. Die längste Seite sollte für diesen Vergleich höchstens 4000 Pixel haben.
3. Erstelle die AVIF-Version. Nutze JPG → AVIF / PNG → AVIF / WebP → AVIF. Das aktuelle Werkzeug verwendet eine feste verlustbehaftete Qualitätsvorgabe von 65 und behält die Pixelmaße der Quelle. Einen AVIF-Qualitätsregler gibt es nicht.
4. Erstelle WebP aus derselben Quelle. Nutze JPG zu WebP oder PNG zu WebP. Passe die WebP-Qualität an und prüfe das sichtbare Ergebnis. Die Konverter bieten eine standardmäßig aktivierte Begrenzung der längsten Seite auf 4000 Pixel. Prüfe, dass die Größenänderung nicht nur eine der beiden Versionen verändert hat.
5. Prüfe beide Downloads. Kontrolliere zuerst Maße und sichtbare Qualität. Teile dann die Differenz der Bytezahlen durch die WebP-Dateigröße, um die Ersparnis beim Ersetzen zu berechnen. Behalte WebP, wenn AVIF größer ist oder die kleinere Version notwendige Details verliert.
6. Die Website testen. Prüfe das veröffentlichte Bild auf Smartphone und Computer, einschließlich Ausschnitt und Darstellungsgröße. Behalte die alte Version bis zur Kontrolle.

Qualitätszahlen bilden keine gemeinsame Skala für unterschiedliche Formate oder Encoder. AVIF mit 65 und WebP mit 65 müssen nicht gleich aussehen. Pixilo verarbeitet ausgewählte Bilder lokal im Browser. Der AVIF-Encoder wird bei Bedarf heruntergeladen; bei der ersten Konvertierung gehört dieser Download dazu.

Was solltest du außer der Dateigröße prüfen?

Feine Details und Text

Prüfe Haare, Gras, Stoff und kleine Schrift bei 100 % Zoom und anschließend in der tatsächlichen Darstellungsgröße. Der Zoom zeigt Veränderungen; die normale Ansicht zeigt ihre Bedeutung. Bei Screenshots ist lesbarer Text meist wichtiger als die kleinstmögliche Datei.

Verläufe und dunkle Bereiche

Achte auf sichtbare Farbstufen in Himmel, Studiohintergründen und Schatten. Dunkle Stellen sollten wichtige Details behalten und nicht zu flachen Flecken werden. Sieht eine Version schlecht aus, komprimiere weniger stark oder wähle ein anderes Format.

Transparenz und Kanten

Prüfe transparente Bilder auf hellen und dunklen Hintergründen. Ein heller Saum um ein Produkt kann auf Weiß verschwinden und auf Schwarz auffallen. Bei solchen Problemen hilft der Ratgeber zu schwarzen oder weißen Hintergründen bei transparenten Bildern.

Farben, Animation und Originaldatei

Ein Konverter erhält nicht automatisch jede Funktion des Formats. Pixilo zeichnet das dekodierte Bild für den Export neu. Es ist nicht für den Erhalt einer Animation, von HDR oder sämtlicher ursprünglicher Metadaten gedacht. Prüfe die Ausgabe und bewahre die Quelle auf, wenn diese Eigenschaften wichtig sind.

100 % bedeutet hier die tatsächliche Pixelgröße im Bildbetrachter: Ein Bildpixel wird als ein Bildschirmpixel angezeigt. Der Seitenzoom des Browsers ist eine andere Einstellung.

AVIF mit einer WebP- oder JPG-Alternative ausliefern

Aktuelle große Browser unterstützen beide Formate. Ältere Browser und manche eingebetteten Bildbetrachter benötigen möglicherweise eine Alternative. In deinem eigenen HTML-Code kannst du Varianten mit picture anbieten. Die Dateinamen im Beispiel sind Platzhalter: Erstelle und veröffentliche die echten Dateien zuerst.

<picture>
  <source srcset="/images/product.avif" type="image/avif">
  <source srcset="/images/product.webp" type="image/webp">
  <img src="/images/product.jpg" width="1200" height="800"
       alt="Grüne Jacke von vorn">
</picture>

Der Browser wählt die erste passende unterstützte Quelle. Er lädt nicht alle drei Dateien zum Größenvergleich. Stelle AVIF nur dann an die erste Stelle, wenn unterstützende Browser es verwenden sollen. img liefert Alternative, Maße und Alternativtext. Verwende als Ersatz PNG statt JPG, wenn Transparenz erhalten bleiben muss. Siehe MDNs Dokumentation des picture-Elements.

Prüfe im CMS, welche Dateien dein Bilddienst oder Plugin tatsächlich erzeugt und ausliefert. Ein AVIF-Upload erstellt allein weder responsive Varianten noch Ersatzdateien. Untersuche nach der Veröffentlichung die Bildanfragen, besonders wenn Cache oder CDN noch eine ältere Version liefern könnten.

Verbessert AVIF Ladezeit und SEO?

Eine kleinere Datei kann die Übertragung beschleunigen. Die Endung allein garantiert keine schnellere Seite. Darstellungsmaße, responsive Auswahl, Cache und der Zeitpunkt, an dem der Browser das Bild entdeckt, spielen ebenfalls eine Rolle. Ein übergroßes AVIF kann schlechter sein als ein passend dimensioniertes WebP.

Trenne Exportzeit und Auslieferungszeit. Für die Slider-Dateien haben wir die Kodierungsgeschwindigkeit nicht gemessen. Miss zur Bewertung deines Ablaufs einen repräsentativen Stapel auf deinem Gerät und erfasse die erste Konvertierung getrennt: Pixilo lädt den AVIF-Encoder bei Bedarf. Bei vorbereiteten Dateien warten Besucher nicht auf diesen Exportschritt. Ein Dienst, der Varianten auf Anfrage erzeugt, muss auch Verarbeitung und Caching berücksichtigen. Einstellungen und Implementierung beeinflussen den Aufwand, wie web.dev zur AVIF-Kodierung erläutert.

Google Bilder unterstützt AVIF und WebP. Ein Formatwechsel ersetzt weder nützlichen Inhalt noch aussagekräftigen Alternativtext oder eine erreichbare Bildadresse. Behalte in picture ein img mit src und verwende eine passende Dateiendung. Siehe Googles Hinweise zur Bild-SEO.

Miss die fertige Seite, statt bessere Rankings aus einem Dateiaustausch abzuleiten. Zu Ladeprioritäten und Layoutstabilität lies den Ratgeber zu Bildern und Core Web Vitals.

Häufige Fragen

Sollte ich alle WebP-Bilder in AVIF umwandeln?

Nein. Teste zuerst eine kleine, repräsentative Auswahl. Ersetze Bilder, wenn das Ergebnis nützt und deine Auslieferung es unterstützt. Behalte WebP, wenn es für das jeweilige Bild besser passt.

Warum ist mein AVIF größer als mein WebP?

Prüfe zuerst Pixelmaße und sichtbare Qualität. Unterschiedliche Einstellungen oder eine für WebP günstige Bildstruktur können die Ursache sein. Ein größeres AVIF ist kein Grund, ein gutes WebP zu ersetzen.

Stellt JPG zu AVIF verlorene Qualität wieder her?

Nein. Eine Konvertierung kann bei früherer JPEG-Kompression verlorene Details nicht wiederherstellen. Nutze die beste Quelle und beurteile die neue Kopie nach Aussehen und Größe.

Kann ich .webp einfach in .avif umbenennen?

Nein. Umbenennen ändert den Namen, nicht die Bildkodierung. Konvertiere die Datei und liefere sie mit korrekter Endung und korrektem Inhaltstyp aus.

Was tun, wenn AVIF in Pixilo schlechter aussieht?

Pixilo verwendet derzeit eine feste AVIF-Einstellung. Passt sie nicht, teste WebP mit angepasster Qualität, behalte das Original oder nutze einen Encoder mit den benötigten Reglern. Ein festes Ergebnis steht nicht für alle möglichen AVIF-Exporte.

Zusammenfassen mitChatGPT (öffnet sich in einem neuen Tab)Grok (öffnet sich in einem neuen Tab)Google (öffnet sich in einem neuen Tab)Perplexity (öffnet sich in einem neuen Tab)Claude (öffnet sich in einem neuen Tab)