WebP vs AVIF: Welches Bildformat sollten Sie eigentlich verwenden?
Bilder sind in der Regel die schwerste Sache auf Ihrer Seite, so dass das Format zählt. AVIF quetscht kleiner, WebP ist überall - aber die Entscheidung, die meisten Websites sollten machen ist eine andere ganz.
Lassen Sie uns die Antwort aus dem Weg: dienen AVIF zu Browsern, die es akzeptieren und WebP zu allem anderen, entschieden pro Anfrage, und aufhören, darüber nachzudenken. Content-Verhandlung hat dies zu einem gelösten Problem gemacht, und keine Website sollte manuell wählen Sie ein Format für alle seine Besucher im Jahr 2026.
Die nützlichere Diskussion ist, warum AVIF gewinnt, wo es gewinnt, warum WebP immer noch den größten Teil der Arbeit in der Praxis tut, und warum das Format Argument ist eine Ablenkung von einem viel größeren Sparen, dass die meisten Websites verlassen auf der Tisch. Wir werden zu diesem letzten Teil kommen, denn es ist derjenige, der wirklich zählt.
Wie sie vergleichen
| WebP | AVIF | |
|---|---|---|
| Freigegeben | 2010 | 2019 |
| Basierend auf | VP8-Videocodec | AV1-Videocodec |
| Typische Größe vs. JPEG | ~70% | ~50% |
| Qualität bei aggressiver Kompression | Gut. | Bemerkenswert besser |
| Browser-Unterstützung | Allgemein | Sehr breit, nicht ganz universell |
| Kodierungsgeschwindigkeit | Schnell | Beträchtlich langsamer |
| Transparenz | Nein | Nein |
| Animation | Nein | Nein |
| HDR / breiter Farbraum | Nein | Nein |
| Maximale Abmessungen | 16.383px | Effektiv unbegrenzt |
Grobe relative Größe bei ähnlicher wahrgenommener Qualität. Einzelne Bilder variieren sehr stark; die Rangfolge nicht.
Wo AVIF wirklich vorankommt
AVIF ist vom AV1-Videocodec abgeleitet und erbt die Werkzeuge, die mit einem Jahrzehnt zusätzlicher Forschung kommen. Das zeigt am meisten auf fotografischen Inhalten mit Gradienten — Himmel, Hauttöne, dunkle Szenen, alles mit glatten Übergängen. Wo JPEG und WebP mit niedrigen Bitraten zu bandieren und zu blockieren beginnen, degradiert AVIF anmutig. Wenn Sie ein Foto-Portfolio führen oder etwas Visuelles verkaufen, ist dieser Unterschied wert.
Wo WebP immer noch das bessere Werkzeug ist
Zwei Situationen. Zuerst, kleine Bilder — Ikonen, Thumbnails, UI Sprites. AVIF trägt mehr Container Overhead, und auf einem 3 KB Thumbnail, die Overhead kann die AVIF-Version machen größer als das WebP eins. Immer vergleichen, anstatt anzunehmen.
Zweitens, alles, was Sie brauchen, um schnell oder häufig zu kodieren. AVIF-Kodierung ist teuer — häufig fünf bis zehnmal langsamer als WebP bei vergleichbaren Qualitätseinstellungen. Für eine Build-Time-Asset-Pipeline, die irrelevant ist. Für benutzeruploaded Bilder, die auf Anfrage verarbeitet werden, ist es eine reale Kosten, weshalb On-the-Fly-Konvertierungssysteme normalerweise aggressiv zwischenspeichern.
JPEG XL wird in diesen Diskussionen erwähnt. Es ist technisch ausgezeichnet, vor allem für verlustfreie Rekompression von bestehenden JPEGs, aber Browser-Unterstützung hat eine komplizierte Geschichte hatte und es ist nicht ein realistischer Standard heute. Es lohnt sich zu beobachten, nicht zu planen.
Das Speichern, das die Formatwahl zwängt
Hier ist der Teil, der die WebP-versus-AVIF-Debatte klein erscheinen lässt.
Gehen Sie und schauen Sie sich die Bilder auf Ihrer Website — die tatsächlichen Dateien, nicht, was die Seite zeigt. Auf einer sehr großen Anzahl von Seiten ist ein Foto, das in einer 400-Pixel-breiten Karte angezeigt wird, ein 3000-Pixel-weites Original, direkt von jemandes Telefon oder einer Aktienbibliothek. Dieses Bild ist etwa 56-mal die Pixeldaten, die angezeigt werden.
Das 3000px JPEG in AVIF umzuwandeln könnte es von 1 nehmen. 8 MB bis 900 KB. Es auf die 800px zu rekonstruieren, die es auf einem High-DPI-Bildschirm benötigt, bringt es auf etwa 60 KB. Die Größenänderung ist mehr wert als das Format in einer Größenordnung, und keine Menge an cleveren Codierung rettet Sie vom Senden von Pixeln niemand jemals sehen wird.
- Erst die Größe ändern, dann ein Format wählen. In dieser Reihenfolge. Die zweite Entscheidung ist nur wichtig, wenn die erste getroffen wird.
- Servieren Sie bei etwa 2× die CSS-Anzeigegröße für High-DPI-Bildschirme, und nicht mehr. Jenseits von 2× ist der Unterschied nicht sichtbar.
- Responsive Srcset verwenden So lädt ein Telefon die Desktop-Version überhaupt nicht herunter.
- Breite und Höhe einstellen. Frei, und es verhindert Layout-Verschiebung, während das Bild lädt.
- Nie faul-laden Sie Ihr LCP-Bild. Es ist das eine Bild, das sofort ankommen muss.
Es ohne einen Bauschritt zu tun
Jeder Browser sendet eine Accept Header Liste der Bildformate, mit denen es umgehen kann. Eine Kante, die liest, dass Header konvertieren und ändern können, um die Größe auf der Flucht: Sie laden ein hochwertiges Original, und jeder Besucher erhält das kleinste Format, das ihr Browser unterstützt, in den Dimensionen ihre Layout-Anforderungen, zwischengespeichert nach dem ersten Antrag, so dass die Umwandlungskosten einmal bezahlt werden.
Das lohnt sich nicht, weil es klug ist, sondern weil es der einzige Ansatz ist, der den Kontakt mit der Realität überlebt. Manuelle Exportpipelines funktionieren, bis jemand am Freitagnachmittag ein 4000px Produktfoto durch das CMS hochlädt, und dann hört er leise auf zu arbeiten und niemand bemerkt es für sechs Monate.
Schnelle Antworten
Ist AVIF besser als WebP?
Für fotografische Bilder, ja – AVIF-Dateien sind in der Regel etwa 30% kleiner als WebP in der gleichen Qualität wahrgenommen, und halten viel besser unter aggressiver Kompression auf Gradienten und dunklen Szenen. WebP bleibt besser für sehr kleine Bilder, wo AVIF Container Overhead können Dateien größer machen, und es codiert fünf bis zehn Mal schneller. Beides über Content-Verhandlung zu bedienen, vermeidet die Wahl völlig.
Soll ich alle meine JPEGs durch AVIF ersetzen?
Konvertieren statt ersetzen. Halten Sie Ihre hochwertigen Originale und erzeugen Sie AVIF und WebP-Versionen von ihnen, die jedem Browser das beste Format, das es akzeptiert. Wenn Sie die Originale löschen, können Sie beim erneuten Ändern der Formate nicht mehr neu kodieren, und eine kleine Anzahl von Clients benötigt immer noch einen JPEG-Fallback.
Ist die Größenänderung eines Bildes wichtiger als das Format?
Normalerweise an einem breiten Rand. Ein 3000-Pixel-Foto, das in einem 400-Pixel-Container angezeigt wird, trägt etwa 56-mal die tatsächlich gezeigten Pixeldaten. Die Anpassung an die angezeigte Größe spart in der Regel weit mehr, als das übergroße Original in ein modernes Format umzuwandeln. Erst die Größe ändern, dann das Format auswählen.
Welche Browser unterstützen AVIF?
Chrome, Firefox, Edge, Safari und die wichtigsten mobilen Browser alle unterstützen AVIF in aktuellen Versionen, die die große Mehrheit der realen Verkehr. Der Support ist bei älteren installierten Versionen nicht ganz universell, weshalb AVIF durch Content-Verhandlung mit WebP als Fallback und nicht als einziges angebotenes Format bedient werden sollte.
Also die ehrliche Zusammenfassung: Die Formatfrage hat eine automatische Antwort, und die Frage, die Ihre Aufmerksamkeit wert ist, ob Sie Bilder zehn Mal größer als der Raum, in dem sie angezeigt werden, versenden. Überprüfen Sie ein Produktfoto. Vielleicht gefällt dir nicht, was du findest.
Sehen Sie, wie NordicCDN dies für Ihre Website tut:
Mads hat seit seinem 16. Lebensjahr in der IT gearbeitet — hauptsächlich als Hosting. Er beteiligte sich früh an einer SaaS-Firma und half, sie bis zur Übernahme durch Visma weiterzuentwickeln, hat Data-Center-Netzwerke aufgebaut und betrieben und diente als CTO eines dänischen Rechenzentrums. Er hat NordicCDN gestartet, um eine schnelle, sichere Infrastruktur einfach zu bedienen.
