Kategorien

PageSpeed-Optimierung: Schnelleres Laden von Bildern Teil 2 - AVIF

Die Seitengeschwindigkeit ist eine entscheidende Komponente für eine Website. Sie können die Geschwindigkeit Ihrer Website erhöhen, indem Sie eine Reihe von Änderungen zur Optimierung der Seitengeschwindigkeit vornehmen. Eine davon ist die Bildoptimierung.

In Teil 1 unserer PageSpeed-Optimierung: Schneller ladende Bilder Artikel haben wir über WebP gesprochen, was es ist und wie Sie es auf Ihrer Website implementieren können. Ein weiteres Bildformat der nächsten Generation, das aufgrund seiner Komprimierungsmöglichkeiten ohne Einbußen bei der Bildqualität immer beliebter wird, ist AVIF.

AVIF ist ein offenes, lizenzfreies Bildformat, das auf dem AV1-Video-Codec basiert, der von der Alliance for Open Media (AOMedia) in Zusammenarbeit mit Google, Cisco und Xiph.org.

Mit AVIF werden Bilder komprimiert und verkleinert, ohne dass die Qualität des Originalbildes beeinträchtigt wird. AVIF bietet die beste Komprimierung auf dem Markt, während die Qualität der Bilder hoch bleibt. Es unterstützt jeden Bildcodec und reduziert die Dateigröße im Vergleich zu JPEG, PNG und sogar WebP erheblich.

Im Vergleich zu JPEG hat AVIF eine um 50% geringere Dateigröße und im Vergleich zu WebP eine um 20-30% geringere Dateigröße, ohne Qualitätsverlust.

AVIF wurde von vielen Unternehmen wie Google, Amazon, Cisco, Netflix und anderen entwickelt. Diese Unternehmen entwickeln das Format aufgrund ihres Bedarfs an qualitativ hochwertigen Bildern, die nicht zu viel Bandbreite verbrauchen. Netflix behauptet sogar, dass AVIF den Formaten JPEG, PNG und WebP weit überlegen ist, und verwendet es derzeit für seine Bildminiaturen.

Moomba-Logos

Das AVIF-Bildformat unterstützt die folgenden Merkmale, die es im Vergleich zu anderen Bildformaten potenziell besser machen:

  • 8, 10, 12 Bit Farbtiefe
  • Verlustfreie Kompression und verlustbehaftete Kompression
  • Monochrom (Alpha/Tiefe) oder Mehrkomponenten
  • Enthält einen Alphakanal, der den Bildern einen reicheren Touch verleiht
  • 4:2:0, 4:2:2, 4:4:4 Chroma-Unterabtastung
  • Jeder Farbraum, einschließlich: breiter Farbraum, ISO/IEC CICP und ICC-Profile
  • Hoher Dynamikbereich, der bessere und hellere Bilder liefert
  • Filmkorn
  • Höchste Kompression im lizenzfreien Format

Obwohl das AVIF-Bildformat viele Vorteile hat, besteht der größte Nachteil in der Verfügbarkeit und der Browserunterstützung.

Zum jetzigen Zeitpunkt (November 2021) wird AVIF von Firefox, Chrome, Android und Opera unterstützt. Im Moment unterstützen Microsoft Edge und Safari das Bildformat nicht. Für Microsoft-Nutzer gibt es jedoch ein Add-on, das Sie herunterladen können und das dieses Format unterstützt. Darüber hinaus unterstützt Firefox noch keine animierten AVIFs.

webp und avif

WebP vs. AVIF

WebP und AVIF sind beides Bildformate der nächsten Generation, die beide von Google in seinem PageSpeed Insights-Tool empfohlen werden. WebP ist im Vergleich zu AVIF viel älter und wurde von Google selbst entwickelt. Es ist auch viel weiter verbreitet und wird im Vergleich zu AVIF von mehr Webbrowsern unterstützt.

AVIF ist jedoch viel kleiner und wird schneller gerendert als WebP. Tatsächlich ist es etwa 20-30% kleiner im Vergleich zu WebP. Der einzige Nachteil von AVIF ist, dass es im Vergleich zu WebP derzeit nicht so weit verbreitet ist.

Die Aussichten für AVIF sind jedoch gut, da die Unterstützung für Edge und Safari schneller kommen kann, da es als ein sehr vielversprechendes Bildformat angesehen wird.

Abgesehen von diesen Hauptfaktoren gibt es noch einige weitere Unterschiede zwischen AVIF und WebP zu beachten:

  • WebP arbeitet nur mit einer Farbtiefe von 8 Bit, während AVIF 8, 10 und 12 Bit unterstützt, was eine breitere Palette von Bildern zur Komprimierung zulässt.
  • WebP unterstützt nur 4:2:0-Kanäle, während AVIF 4:2:0, 4:2:2 und 4:4:4 unterstützt.
  • AVIF bietet im Vergleich zu WebP eine bessere Bildqualität
  • AVIF unterstützt HDR, das Bilder mit hoher Leuchtkraft erzeugt.

Sowohl WebP als auch AVIF haben Vor- und Nachteile gegenüber dem jeweils anderen Format. Wenn es darum geht, welche der beiden zu wählen, hängt es hauptsächlich von Ihren Vorlieben ab, welche Art von Website Sie haben und welche Ihnen den größten Nutzen bringt.

Wie Sie AVIF auf Ihrer Website implementieren

Avif-Implementierung

Es gibt eine Reihe von Programmen und Anwendungen, die Sie verwenden können, um Ihre Bilder in AVIF zu konvertieren. Empfehlenswert ist Squoosh, eine Web-App zur Bildkomprimierung, die vom Google Chrome Labs-Team selbst entwickelt wurde. Andere Programme, die Sie verwenden können, sind GIMP und Microsoft Paint. Leider unterstützt Photoshop diese Funktion zur Zeit nicht.

Da es sich bei AVIF noch um eine recht neue Technologie handelt, die noch nicht von allen Browsern vollständig unterstützt wird, gibt es bei der Implementierung zwei Hauptwege, um das Format zu nutzen - über das Bildelement und über Content Negotiation.

Wenn der verwendete Browser AVIF nicht unterstützt, kann er stattdessen einen anderen Bildtyp anzeigen.

Hier ist ein Beispiel für den Code, den Sie in die <body> Tags auf Ihrer Seite.

<picture>
<source srcset=”images/example.avif” type=”image/avif”>
<source srcset=”images/example.webp” type=”image/webp”>
<img src=”images/example.jpg” alt=&quot;Beschreibung of example image”>

</picture>

Die Inhaltsaushandlung ermöglicht es dem Server, Formate auf der Grundlage der vom Browser unterstützten Formate bereitzustellen. Browser, die ein bestimmtes Format unterstützen, können es ankündigen, indem sie das Format zu ihrem Accept Request Header hinzufügen. Zum Beispiel lautet der Accept Request Header für Bilder in Chrome:


Akzeptieren: image/avif,image/webp,image/apng,image/*,*/*;q=0.8

Der Code zur Überprüfung, ob AVIF im Fetch-Event-Handler unterstützt wird, kann etwa so aussehen:


const hdrAccept = event.request.headers.get("accept");
const sendAVIF = /image\/avif/.test(hdrAccept);


Sie können diesen Wert verwenden, um AVIF oder ein anderes Standardformat zu verwenden.

Eine andere Möglichkeit ist die Verwendung eines CDN, das AVIF unterstützt. Wenn Sie Ihre Bilder bei Cloudflare hosten, sollte dies kein Problem sein, da sie die Unterstützung dafür hinzugefügt haben.

Wenn Ihre Website in WordPress ist, gibt es Plugins, die Sie verwenden könnten, die Ihnen helfen könnten, AVIF-Bilder an Browser zu liefern, die es unterstützen und für diejenigen, die es nicht unterstützen, würden stattdessen andere Bildformate verwenden.

Beispiele für diese Plugins sind Shortpixel, Imagekit, Cloudinary, ImageEngine und andere.

Schlussfolgerung

Immer mehr Bildformate der nächsten Generation kommen auf den Markt, da die Unternehmen versuchen, die Webleistung zu verbessern und die bisherigen Bildformate und ihre Einschränkungen zu übertreffen.

Sowohl WebP als auch AVIF sind Formate der nächsten Generation, die von Google empfohlen werden, um die Geschwindigkeit Ihrer Website zu erhöhen und die Benutzerfreundlichkeit zu verbessern.

Letzten Endes haben beide Vor- und Nachteile, und es liegt an Ihnen als Website-Besitzer und Unternehmer, zu entscheiden, welches Format Sie bevorzugen, da es Ihrer Website und Ihren Besuchern/Kunden am besten dienen würde.

Wenn es darum geht, eine Website zu beschleunigen und gleichzeitig qualitativ hochwertige Bilder zu liefern, sind beide Formate im Vergleich zu den gängigeren Formaten wie JPEG und PNG großartige Optionen. Wir haben beide getestet JPEG vs. PNG um zu sehen, ob es ein bevorzugtes Format gibt, und wir fanden heraus, dass es keines gibt und dass es wirklich auf die Seitengeschwindigkeit ankommt. In unserem Test dazu finden Sie weitere Einzelheiten.

Wenn Ihr Ziel darin besteht, Ihre Website zu beschleunigen, um eine bessere Platzierung zu erreichen, ist die Bildkomprimierung nur ein Faktor, an dem Sie arbeiten müssen, und die Verwendung von WebP oder AVIF ist nur ein Schritt in diese Richtung. Wir hoffen, dass Sie durch diese beiden Artikel nun eine bessere Vorstellung davon haben, welches Bildformat der neuen Generation Sie wählen sollten.

Weitere Informationen und Tipps zur Optimierung Ihrer Bilder finden Sie in unserem Bild-Optimierung Artikel.

Marie Aquino

SIA STAFF SEO WRITER

Marie's vollständige Biographie hier.