Verwendung moderner Bildformate wie AVIF und WebP

In diesem Artikel befassen wir uns mit den Spezifikationen von WebP und AVIF und damit, wie man Bilder in höchster Qualität und ohne übermäßige Dateigröße bereitstellt. Schließlich sind Bilder der größte Engpass, wenn es um die Geschwindigkeit einer Website geht.

Wenn eine Website oder Seite nicht richtig geladen wird, ist die Wahrscheinlichkeit groß, dass sie versucht, große Bilder zu laden!

Wenn Sie Ihre Website für Web Vitals optimieren wollen, ist es vielleicht interessant zu wissen, dass Bilder 42 % des größten Bildinhalts ausmachen. In der Tat, ein Bild wird getestet für:

• Dateigröße
• Dateigröße
• Ladepriorität

Warum brauchen wir überhaupt moderne Bildformate?

Wir haben mehrere Formate zur Auswahl, und jedes Format hat seine Vor- und Nachteile. Der größte Unterschied zwischen allen Formaten sind die Codecs die zur Kodierung und Dekodierung eines Bildes verwendet werden.

Ein Codec ist eine mathematische Formel, die dazu dient, die Dateigröße eines Bildes zu verringern und es in ein bestimmtes Dateiformat zu konvertieren, um es dann zu dekodieren und auf Ihrem Bildschirm anzuzeigen. Durch diese neuen Formate wird die Dateigröße erheblich verringert, ohne dass die Qualität beeinträchtigt wird.

Worauf sollte ich bei der Wahl des richtigen Codecs achten?

Sie können den richtigen Codec anhand der folgenden Parameter bestimmen:

• Komprimierung;
• Qualität;
• Kodierung/Dekodierung.

Komprimierung

Die Effizienz eines Codecs lässt sich leicht an der Komprimierung ablesen, die er bieten kann. Je höher die Komprimierung ist, desto kleiner ist die Datei und desto schneller wird Ihr Bild geladen. Dies kann einen großen Einfluss auf Ihr Largest Contentful Paint haben.

Qualität

In einer perfekten Welt sollte die Komprimierung nicht dazu führen, dass sich die Qualität der Bilder verschlechtert. Bei den meisten WordPress-Plugins können Sie den gewünschten Komprimierungsgrad wählen, und je nach Endergebnis Ihrer Bilder können Sie abwägen, wie hoch er sein sollte.

Kodierung/Dekodierung

Komplexe Kompressionsberechnungen können den Webserver, auf dem Ihre Website gehostet wird, stärker beanspruchen. In der Regel werden alle Bilder in großen Mengen optimiert, so dass dies nicht bei jedem Besuch der Website erneut durchgeführt werden muss.
Wäre dies der Fall, würde sich die Ladezeit der Website erheblich verlangsamen, da sie ständig codieren und decodieren müsste.

Aus alten Zeiten: JPEG & PNG

JPEG ist das am meisten unterstützte Dateiformat der Welt. Und das schon seit 25 Jahren! Ein echter “goldener Oldie”, mit anderen Worten. Die Dekodiergeschwindigkeit für diese Art von Bildern ist großartig, aber es fehlen viele Optionen, die moderne Websites benötigen, wie Transparenz und Animationen.

JPEG eignet sich am besten für Fotos, während PNG häufig für schöne Bilder und bei Bedarf an Transparenz verwendet wird. PNG lässt sich jedoch nur sehr wenig komprimieren und kann daher recht große Dateien erzeugen.

Das Ziel moderner Bildformate ist es, das Beste aus beiden Welten zu kombinieren – und zu überwinden -, so dass sie sowohl flexibel in ihren Möglichkeiten sind als auch gut komprimiert werden können.

AVIF

Das AV1-Dateiformat ist ein Open-Source-Format für Bilder und animierte Grafiken. Es wurde im Jahr 2019 von AOMedia veröffentlicht. AVIF ist die Bildversion des beliebten AV1-Videoformats. Ziel war es, ein Format zu schaffen, das auf dem neuesten Stand der Technik ist und frei verwendet werden kann.

Vorteile

Die AVIF-Komprimierung geht kaum Kompromisse bei der Qualität ein, so dass Sie die Vorteile eines kleinen Dateiformats nutzen können, ohne allzu große Kompromisse bei der Endqualität einzugehen. Einige Tests haben sogar gezeigt, dass AVIF eine um 50 % geringere Dateigröße hat als ein herkömmliches JPEG-Bild, aber die gleiche Qualität aufweist!

Zusätzlich zu seiner überlegenen Komprimierung unterstützt AVIF auch:

• Bewegte Bilder;
• Bessere Unterstützung für Grafiken, Logos und Infografiken;
• 12-Bit-Farbtiefe, die es ermöglicht, Bilder mit hohem Dynamikbereich (HDR) und großem Farbraum (WCG) mit einer größeren Bandbreite an hellen und dunklen Farben zu verarbeiten;
• Transparente Grafiken.

Browser-Unterstützung

AVIF wurde in der Desktop-Version von Google Chrome im Jahr 2020 mit Chrome Version 85 eingeführt. Es wird auch von Chrome für Android, Opera, Firefox für Desktop, Opera für Android und Safari unterstützt, allerdings nur unter macOS 13 Ventura oder neuer.

WebP

Dieses Dateiformat wurde 2011 von Google entwickelt, um das Laden von Websites zu beschleunigen. In den letzten Jahren wurde es von vielen Unternehmen und Websites aufgrund seiner Komprimierungsmöglichkeiten und der geringeren Dateigröße im Vergleich zu JPEG und PNG akzeptiert und übernommen. Die Qualität von WebP ist den “goldenen Oldies” ziemlich ähnlich und unterstützt transparente Bilder.

Vorteile

WebP-Bilder sind in der Regel 26 % kleiner als PNG-Bilder und 25-34 % kleiner als JPEG-Bilder. Die Unterstützung von Animationen macht es auch zu einem guten Ersatz für GIF.

WebP unterstützt auch:

• Transparenz;
• Metadaten;
• Animationen.

Browser-Unterstützung

Webp wird von allen gängigen und neuen Browsern unterstützt.

Zusammenfassung

AVIF, WebP, JPEG und PNG. Sie alle haben ihre Vor- und Nachteile. Bei Dtch. Digitals komprimieren wir alle Bilder bei der Lieferung und wir prüfen und besprechen mit Ihnen die Möglichkeit, das Bild auch in AVIF oder WebP zu konvertieren.

Haben Sie bereits eine Website und möchten Sie wissen, was sie für Ihre Website tun kann? Dann kontaktieren Sie uns, wir helfen Ihnen gerne weiter!