Was sind WebP und AVIF?

WebP und AVIF: Definition und Herkunft

WebP hat Google 2010 vorgestellt. AVIF (AV1 Image File Format) entstand später auf Basis des Videocodecs AV1 der Alliance for Open Media. Beide Formate sind offen und lizenzfrei nutzbar, komprimieren Bilder effizienter als die Klassiker JPEG und PNG und beherrschen Transparenz. Laut Google sind verlustbehaftete WebP-Bilder bei gleicher Qualität rund ein Viertel bis ein Drittel kleiner als JPEG.

Bilder machen auf vielen Websites den größten Teil der übertragenen Daten aus. Wer sie in WebP oder AVIF ausliefert, verkürzt die Ladezeit spürbar, besonders im mobilen Netz. Das wirkt sich auf das Nutzererlebnis und auf die Core Web Vitals aus.

Unterschiede und Browser-Unter­stüt­zung

WebP funktioniert seit 2020 in allen großen Browsern, AVIF seit 2022. Mit dem picture-Element liefert man die Formate gestaffelt aus: zuerst AVIF, dann WebP und zuletzt ein JPEG als Rückfallebene. Der Browser wählt das erste Format, das er versteht, ältere Geräte erhalten so trotzdem ein Bild.

• WebP: meist deutlich kleiner als JPEG, schnell zu erzeugen, sehr breit unterstützt
• AVIF: meist noch kleiner als WebP, unterstützt HDR und weite Farbräume, braucht bei der Erstellung mehr Rechenzeit
• JPEG und PNG: universell lesbar, aber größere Dateien, weiterhin sinnvoll als Rückfallebene

Praxis­bei­spiel: Archi­tek­tur­büro

Ein Architekturbüro präsentiert seine Projekte mit großformatigen Fotos. Die Originale sind JPEGs mit mehreren Megabyte, die Seite lädt auf dem Smartphone zäh. Eine Bildpipeline erzeugt beim Hochladen automatisch passende Größen in AVIF und WebP, liefert sie über das picture-Element aus und behält das JPEG als Rückfallebene.

Die Fotos bleiben scharf, die Seite wird deutlich schlanker. Auch der Wert für den Largest Contentful Paint, die Ladezeit des größten sichtbaren Elements, verbessert sich, weil das Titelbild weniger Daten umfasst. Das Büro lädt weiterhin Originale hoch, die Umwandlung läuft automatisch.

Vorteile, Grenzen und typische Fehler

Moderne Formate bringen kürzere Ladezeiten, weniger Datenverbrauch und geringere Hostingkosten. Grenzen: Sehr stark komprimierte Bilder zeigen Artefakte, AVIF braucht in der Erzeugung deutlich mehr Rechenleistung, und für Logos und einfache Grafiken ist SVG oft die bessere Wahl, weil es verlustfrei skaliert. Typische Fehler:

• Datei nur umbenannt statt neu kodiert: Die Dateigröße bleibt hoch
• Qualitätsstufe zu niedrig: sichtbare Blockbildung
• Keine Rückfallebene für ältere Browser und E-Mail-Programme
• Zu große Pixelmaße ausgeliefert statt passender Größen (srcset)

Umsetzung

Viele CMS- und Shopsysteme sowie CDNs konvertieren Bilder automatisch. Nano Concepts richtet solche Bildpipelines ein, stimmt Größen und Qualität auf Ihre Motive ab, ergänzt Rückfallebenen für ältere Browser und überprüft anhand der Core Web Vitals, ob das Ergebnis messbar schneller lädt.