AVIF-Bilder: Bis zu 40 % Datenersparnis im Vergleich zu WebP

Das WebP-Format ist großartig. Aber was, wenn Sie noch mehr wollen? AVIF ist wie WebP, nur mit Turbolader.

Dieses auf dem Videocodec AV1 basierende Format kann 30–40 % mehr Daten einsparen als WebP, und das bei gleicher oder besserer Qualität.

AVIF (AV1 Image File Format) entstand 2019 als Gemeinschaftsprojekt der Alliance for Open Media. Genau wie WebP nutzt es Technologien aus Videocodecs, diesmal jedoch aus dem moderneren AV1. Das Ergebnis? Noch effizientere Kompression und kleinere Dateien.

Wenn Sie bereits WebP verwenden und die Bildoptimierung auf das nächste Level bringen möchten, ist AVIF der logische nächste Schritt.

AVIF (AV1 Image File Format) – modernes Format für noch effizientere Bildkompression.

Warum AVIF verwenden?#

AVIF bietet mehrere Vorteile gegenüber älteren Formaten:

• Bessere Kompression als WebP
  AVIF spart typischerweise 20–30 % mehr Daten als WebP bei gleicher Qualität. Im Vergleich zu JPEG ist die Ersparnis noch deutlicher – bis zu 50 % und mehr.
• Unterstützung von Transparenz
  Genau wie WebP unterstützt AVIF einen Alphakanal, sodass Sie transparente Bilder verwenden können, ohne auf das inzwischen veraltete PNG-Format zurückgreifen zu müssen.
• Kein Blockrauschen
  Während JPEG bei hoher Kompression „kachelt“ (Blocking-Artefakte), neigt AVIF dazu, das Bild eher sanft zu verwischen, was für das menschliche Auge viel angenehmer ist.
• Unterstützung von HDR
  AVIF kann Bilder mit höherem Dynamikbereich anzeigen, was vor allem Fotografen zu schätzen wissen.
• Mehr Farbräume
  Unterstützt eine breitere Palette von Farbräumen, einschließlich Rec2020.

Unterstützung in Browsern#

Die Unterstützung von AVIF in Browsern verbessert sich schnell. Derzeit wird es von allen modernen Browsern unterstützt:

• Chrome (ab Version 85) und andere auf Chromium basierende Browser
• Firefox (ab Version 93)
• Safari (ab Version 16)
• Edge (ab Version 85)

Siehe AVIF-Unterstützung bei CanIUse. Es gibt jedoch immer noch ältere Browserversionen, die AVIF nicht unterstützen, daher empfehlen wir, Ihre Browserstatistiken im Auge zu behalten und einen Fallback auf WebP oder JPEG zu implementieren.

Implementierung mit Fallback auf WebP#

Um die Kompatibilität mit älteren Browsern sicherzustellen, können Sie das HTML-Element <picture> mit mehreren Quellen verwenden. Der Browser wählt automatisch das Format aus, das er unterstützt:

<picture>
  <source srcset="bild.avif" type="image/avif" />
  <source srcset="bild.webp" type="image/webp" />
  <img src="bild.jpg" alt="Bildbeschreibung" width="1600" height="900" loading="lazy" />
</picture>

Der Browser durchläuft die Quellen von oben nach unten und verwendet die erste, die er unterstützt. Wenn er AVIF nicht unterstützt, greift er auf WebP zurück. Wenn er auch WebP nicht unterstützt, wird JPEG als letzte Option verwendet.

Automatisierung der Umwandlung#

Ideal ist es, die Generierung von AVIF-Bildern zu automatisieren. Es gibt mehrere Möglichkeiten:

• Cloudflare
  Cloudflare kann mit einer bestimmten Einstellung Bilder automatisch in AVIF umwandeln, wenn der Browser dieses Format unterstützt. Sie müssen sich um nichts auf Ihrem eigenen Server kümmern.
• PHP 8.1+
  Ab PHP 8.1 steht die native Funktion imageavif() zur Erstellung von AVIF-Bildern zur Verfügung. Sie können die Parameter quality und speed einstellen.
• ImageMagick
  Das Tool ImageMagick unterstützt die Umwandlung in AVIF mit dem Befehl magick convert.
• Externe Dienste
  Sie können Dienste wie AWS Lambda mit CloudFront nutzen, die Bilder automatisch auf Anfrage konvertieren.

Unsere Praxiserfahrungen#

Im Rahmen unserer Webgeschwindigkeits-Beratung haben wir bei PageSpeed.ONE die Implementierung von AVIF in mehreren Projekten unterstützt. Hier sind unsere Erfahrungen und Empfehlungen:

Erwartete Dateneinsparung#

Mit dem AVIF-Format können Dateneinsparungen bei der Bildgröße von ca. 30 bis 40 % im Vergleich zu WebP erzielt werden. Dies variiert natürlich je nach Bildtyp – bei Fotos ist die Ersparnis in der Regel höher als bei Grafiken mit scharfen Kanten.

Empfohlene Parametereinstellungen#

Basierend auf unseren Tests empfehlen wir die folgenden Einstellungen:

• Quality (Qualität): etwa 50
• Effort: Wert 4

Ein höherer effort-Wert erhöht die Erzeugungszeit des Bildes, aber auch das Potenzial für Dateneinsparungen. Wir empfehlen, diese Einstellung an Ihren spezifischen Bildern zu testen, da sich die optimalen Werte je nach Inhaltstyp unterscheiden können.

Praktischer Vergleich der Dateneinsparung beim Einsatz von AVIF im Vergleich zu WebP. Quelle: report Technische im monitoring PLUS auf der Content-Website des Kunden PageSpeed.ONE. Tool: Squoosh

Implementierungsmöglichkeiten#

Es gibt zwei Hauptwege, AVIF einzusetzen:

1. Eigene Generierung
   Wenn Sie die Kontrolle über den Server haben, können Sie AVIF-Bilder selbst generieren. Der Vorteil ist die volle Kontrolle, der Nachteil ist die höhere Serverbelastung.

2. Externe Dienste
   Es gibt vielfältige Möglichkeiten, manchmal passt Cloudflare, manchmal CloudFront und AWS Lambda. Wir empfehlen, eine eigene Einschätzung je nach Ihren Bedürfnissen und dem Bildvolumen vorzunehmen.

3. Manuelle Umwandlung
   Für kleinere statische Websites komprimieren Sie die Bilder manuell in das AVIF-Format, z.B. mit Tools wie Squoosh, Image to Avif auf Cloudinary oder dem bekannten TinyPNG.

Überwachung der Auswirkungen#

Genau wie bei WebP ist es auch bei AVIF wichtig, die Datenmenge der Bilder und ihren Einfluss auf die LCP-Metrik zu überwachen. In unserem monitoring PLUS können Sie verfolgen, wie sich die Größe der Bilder im Laufe der Zeit verändert und welchen Einfluss sie auf die Ladegeschwindigkeit der Seite haben.

Überwachen Sie stets die Datenmenge von Bildern. Selbst die Änderung eines einzigen Bildes kann Schwankungen in der Geschwindigkeit verursachen und sich auf die Konversionsrate Ihrer Website auswirken. Quelle: report Technische im monitoring PLUS.

Wann sollte man AVIF vs WebP verwenden?#

AVIF ist nicht immer die bessere Wahl gegenüber WebP. Hier eine kurze Anleitung, wann welches Format zu verwenden ist:

• Verwenden Sie AVIF, wenn: Sie maximale Dateneinsparung möchten. Sie auf moderne Browser abzielen. Und Sie Zeit und Ressourcen für das Testen von Einstellungen haben.

• Bleiben Sie bei WebP, wenn: Sie eine universelle Lösung mit maximaler Kompatibilität benötigen. Die Erzeugung von AVIF Ihren Server verlangsamen würde. Und Sie eine einfachere Implementierung wünschen.

• Ideale Lösung:
  Verwenden Sie AVIF mit Fallback auf WebP. Browser, die AVIF unterstützen, erhalten die kleinsten Dateien. Ältere Browser erhalten WebP. Alle sind zufrieden.

Fazit#

AVIF ist der logische nächste Schritt nach WebP. Es bietet eine deutlich bessere Kompression, erfordert jedoch etwas mehr Arbeit bei der Implementierung und beim Testen von Einstellungen.

Wenn Sie bereits WebP nutzen und die Optimierung noch weiter vorantreiben wollen, ist AVIF eine Überlegung wert. Insbesondere, wenn Sie die Möglichkeit haben, Automatisierung über Cloudflare oder ähnliche Dienste zu nutzen.

Denken Sie jedoch immer an einen Fallback für ältere Browser und überwachen Sie den Einfluss auf die Webgeschwindigkeit. Jeder eingesparte Kilobyte zählt, aber nicht auf Kosten der Kompatibilität.

Hier finden Sie weitere Tipps zur Bildoptimierung im Web und detaillierte Informationen zum WebP-Format.