Verwendung moderner Bildformate: AVIF und WebP

Wir haben kürzlich Addys Bildoptimierungsbuch mit allem, was Sie über Bilder wissen müssen, veröffentlicht, wie man Bilder komprimiert, bereitstellt und verwaltet. Jetzt Versand mit handgeschriebener persönlicher Nachricht, signiert von Addy. Springen Sie zum Inhaltsverzeichnis und holen Sie sich das Buch gleich.

Bilder sind der beliebteste Ressourcentyp im Web und oft auch der größte. Benutzer schätzen hochwertige Grafiken, aber es muss darauf geachtet werden, diese Heldenbilder, Produktfotos und Katzenmemes so effizient und effektiv wie möglich bereitzustellen.

Wenn Sie für die Web Vitals optimieren, interessiert es Sie vielleicht, dass Bilder etwa 42 % des Largest Contentful Paint-Elements für Websites ausmachen. Wichtige benutzerorientierte Metriken hängen oft von der Größe, Anzahl, dem Layout und der Ladepriorität der Bilder auf der Seite ab. Aus diesem Grund sprechen viele unserer Hinweise zur Leistung von der Bildoptimierung.

Eine ganze Reihe von Empfehlungen finden Sie weiter unten.

tl;dr

• AVIF ist eine solide erste Wahl, wenn eine verlustbehaftete Low-Fidelity-Komprimierung akzeptabel ist und die Einsparung von Bandbreite oberste Priorität hat. Angenommen, die Codierungs-/Decodierungsgeschwindigkeiten entsprechen Ihren Anforderungen.
• WebP wird umfassender unterstützt und kann zum Rendern normaler Bilder verwendet werden, wenn erweiterte Funktionen wie ein breiter Farbumfang oder Textüberlagerungen nicht erforderlich sind.
• AVIF ist möglicherweise nicht in der Lage, nicht-fotografische Bilder sowie PNG oder verlustfreies WebP zu komprimieren. Die Komprimierungseinsparungen von WebP können geringer sein als bei JPEG für verlustbehaftete High-Fidelity-Komprimierung.
• Wenn sowohl AVIF als auch WebP keine praktikablen Optionen sind, sollten Sie MozJPEG (Optimieren von JPEG-Bildern), OxiPNG (nicht fotografische Bilder) oder JPEG 2000 (verlustbehaftete oder verlustfreie fotografische Bilder) in Erwägung ziehen.
• Die progressive Verbesserung über <picture> lässt den Browser das erste unterstützte Format in der bevorzugten Reihenfolge auswählen. Diese Implementierung wird erheblich vereinfacht, wenn Image-CDNs verwendet werden, bei denen der Accept Header und die Inhaltsaushandlung (z. B. automatisches Format und Qualität) das beste Image liefern können.

Warum brauchen wir moderne Formate?

Wir haben eine relativ große Auswahl an Bildformaten zur Auswahl, wenn Sie Bilder im Internet rendern. Der wesentliche Unterschied zwischen Bildformaten besteht darin, dass der zum Kodieren oder Dekodieren jedes Bildtyps verwendete Bildcodec unterschiedlich ist. Ein Bild-Codec stellt den Algorithmus dar, der verwendet wird, um Bilder zu komprimieren und in einen bestimmten Dateityp zu codieren und sie für die Anzeige auf dem Bildschirm zu decodieren.

Auswerten von Codecs

Welches Bildformat für Sie geeignet ist, können Sie anhand verschiedener Parameter beurteilen.

• Kompression
  Die Effizienz eines Codecs kann hauptsächlich daran gemessen werden, wie viel Komprimierung er erreichen kann. Die erzielte Komprimierung ist relevant, denn je höher die Komprimierung, desto kleiner die Dateigröße und desto geringer die Datenmenge, die zum Übertragen des Bildes im Netzwerk erforderlich ist. Eine kleinere Dateigröße wirkt sich direkt auf die LCP-Metrik (Last Contentful Paint) für die Seite aus, da die von der Seite benötigten Bildressourcen schneller geladen werden.
• Qualität
  Idealerweise sollte die Komprimierung zu keinem Verlust von Bilddaten führen; es sollte verlustfrei sein. Komprimierungsformate, die zu einem gewissen Verlust von Bilddaten führen und dadurch die Bildqualität verringern, werden als verlustbehaftet bezeichnet. Sie können Tools wie DSSIM oder ssimulacra verwenden, um die strukturelle Ähnlichkeit zwischen Bildern zu messen und zu beurteilen, ob der Qualitätsverlust akzeptabel ist.
• Kodierungs-/Dekodierungsgeschwindigkeit
  Komplexe Komprimierungsalgorithmen erfordern möglicherweise eine höhere Verarbeitungsleistung zum Codieren/Decodieren von Bildern. Dies kann dadurch erschwert werden, ob die Codierung im Voraus (statisch/Build) oder spontan (On-Demand) erfolgt. Während die Codierung bei statischen Bildern einmalig sein kann, muss der Browser die Bilder dennoch decodieren, bevor er sie rendert. Ein komplexer Dekodierungsprozess kann das Rendern von Bildern verlangsamen.

Komprimierungsgrad, Bildqualität und Dekodierungsgeschwindigkeit sind Schlüsselfaktoren, die beim Vergleich der Bildleistung für das Internet berücksichtigt werden müssen. Bestimmte Anwendungsfälle können Bildformate erfordern, die andere Funktionen unterstützen, wie:

• Softwareunterstützung: Ein Bildformat kann sehr gut funktionieren, ist aber nutzlos, wenn Browser, CDNs und andere Bildbearbeitungstools es nicht erkennen.
• Für einige Bilder im Web (z. B. GIF) kann eine Animationsunterstützung erforderlich sein. Solche Bilder sollten Sie jedoch idealerweise durch Videos ersetzen.
• Alpha-Transparenz: Die Möglichkeit, Bilder mit unterschiedlichen Deckkraftstufen mithilfe des Alpha-Kanals zu erstellen. (z. B. PNG-Bilder mit transparentem Hintergrund)
• Es sollte HDR-Bildgebung (High Dynamic Range) und einen breiten Farbraum unterstützen.
• Die progressive Dekodierung zum schrittweisen Laden von Bildern ermöglicht es Benutzern, eine angemessene Vorschau des Bildes zu erhalten, bevor es verfeinert wird.
• Tiefenkarten, mit denen Sie Effekte auf den Vorder- oder Hintergrund des Bildes anwenden können.
• Bilder mit mehreren überlappenden Ebenen, z. B. Textüberlagerungen, Rahmen usw.

Tipp: Bei der Bewertung von Qualität, Komprimierung und Feinabstimmung moderner Formate ist die Fähigkeit von Squoosh.app, einen visuellen direkten Vergleich durchzuführen, hilfreich. Durch das Vergrößern können Sie besser einschätzen, wo ein Format Blockierungen oder Kantenartefakte aufweist, um über Kompromisse nachzudenken.

Die alten Wächter: JPEG und PNG

JPEG ist seit 25 Jahren das am weitesten verbreitete Bildformat. Klassische JPEG-Codierer führen zu einer relativ schwachen Komprimierung, während modernere JPEG-Codierungsversuche (wie MozJPEG) die Komprimierung verbessern, aber nicht ganz so optimal sind wie moderne Formate. JPEG ist auch ein verlustbehaftetes Komprimierungsformat. Während die Dekodierungsgeschwindigkeit für JPEGs ausgezeichnet ist, fehlen andere wünschenswerte Funktionen, die für Bilder auf modernen, auffälligen Websites erforderlich sind. Transparenz in Bildern, Animationen, Tiefenkarten oder Überlagerungen wird nicht unterstützt.

JPEG funktioniert am besten mit Fotos, während PNG das Gegenstück zu anderen Standbildern ist. PNG ist ein verlustfreies Format und kann Alpha-Transparenz unterstützen, aber die erzielte Komprimierung, insbesondere für Fotos, ist beträchtlich niedrig. JPEG und PNG werden je nach benötigtem Bildtyp häufig verwendet.

Das Ziel für moderne Bildformate ist es daher, die Einschränkungen von JPEG und PNG zu überwinden, indem sie eine bessere Komprimierung und Flexibilität bieten, um die anderen zuvor besprochenen Funktionen zu unterstützen. Sehen wir uns vor diesem Hintergrund an, was AVIF und WebP zu bieten haben.

AVIF

Das AV1-Bilddateiformat (AVIF) ist ein Open-Source-Bildformat zum Speichern von Standbildern und animierten Bildern. Es wurde im Februar 2019 von der Alliance for Open Media (AOMedia) veröffentlicht. AVIF ist die Bildversion des beliebten AV1-Videoformats. Ziel war es, ein neues Open-Source-Videokodierungsformat zu entwickeln, das sowohl State-of-the-Art als auch lizenzfrei ist.

AVIF-Vorteile

AVIF unterstützt eine sehr effiziente verlustbehaftete und verlustfreie Komprimierung, um nach der Komprimierung qualitativ hochwertige Bilder zu erzeugen. AVIF komprimiert viel besser als die meisten heute gängigen Formate im Internet (JPEG, WebP, JPEG 2000 usw.). Bilder können bis zu zehnmal kleiner sein als JPEGs mit ähnlicher visueller Qualität. Einige Tests haben gezeigt, dass AVIF im Vergleich zu JPEG bei ähnlicher Wahrnehmungsqualität eine Einsparung von 50 % der Dateigröße bietet. Beachten Sie, dass es Fälle geben kann, in denen WebP Lossless besser sein kann als AVIF Lossless, also werten Sie es unbedingt manuell aus.

Hier sehen Sie einen Größenvergleich zwischen einem JPEG-Bild und dem entsprechenden (verlustbehafteten) AVIF-Bild, das mit der Squoosh-App konvertiert wurde:

Neben der überlegenen Komprimierung bietet AVIF auch die folgenden Funktionen:

• AVIF unterstützt Animationen, Live-Fotos und mehr durch mehrschichtige Bilder, die in Bildsequenzen gespeichert sind.
• Es bietet eine bessere Unterstützung für grafische Elemente, Logos und Infografiken, bei denen JPEG Einschränkungen hat.
• Es bietet eine bessere verlustfreie Komprimierung als JPEG.
• Es unterstützt zwölf Bit Farbtiefe und ermöglicht Bilder mit hohem Dynamikbereich (HDR) und breitem Farbraum (WCG) mit einer besseren Spannweite von hellen und dunklen Tönen und einem breiteren Spektrum an Leuchtkraft.
• Es umfasst Unterstützung für monochrome Bilder und Mehrkanalbilder, einschließlich transparenter Bilder, die den Alphakanal verwenden.

Formate vergleichen

Um die Unterschiede in Qualität und Komprimierung, die die verschiedenen Formate bieten, besser zu verstehen, können wir Bilder visuell vergleichen und die Unterschiede bewerten.

Bewertung von Qualität und Komprimierung

Wir beginnen unsere Qualitätsbewertung von JPEG, WebP und AVIF mit den Standardausgabeeinstellungen für hohe Qualität von Squoosh für jedes Format – absichtlich nicht abgestimmt, um die Erfahrung eines neuen Benutzers mit ihnen nachzuahmen. Zur Erinnerung: Sie sollten darauf abzielen, die Qualitätskonfiguration und die Formate zu evaluieren, die Ihren Anforderungen am besten entsprechen. Wenn Sie wenig Zeit haben, automatisieren Image-CDNs einiges davon.

In diesem ersten Test erzeugt das Codieren eines 560-KB-Fotos eines Sonnenuntergangs (mit vielen Texturen) ein Bild, das für beide visuell und wahrnehmungsmäßig ziemlich ähnlich ist. Die Ausgabe liegt bei 289 KB (JPEG@q75), 206 KB (WebP@q75) und 101 KB (AVIF@q30) – bis zu 81 % weniger Komprimierung.

Tolles Zeug, aber lass uns tiefer graben.

Es gibt verschiedene Tools zum Vergleichen der Unähnlichkeit zwischen verschiedenen Bildformaten (z. B. DSSIM, Simulacra). Mit diesen Tools können Sie die vergleichbare Qualitätseinstellung annähern, wenn Sie beispielsweise JPEG zu WebP oder WebP zu AVIF bewerten. Unten sind die gleichen Bilder in vergleichbarer Qualität kodiert, die auf die 70%-Qualität von JPEG abzielen. Die Ausgabe beträgt 323 KB (JPEG), 214 KB (WebP@q75) und 117 KB (AVIF@60) – die Größen sind etwas größer als den Standardwerten zu vertrauen, aber die Komprimierungsgewinne sind immer noch signifikant.

Wir können uns auch die niedrigere Qualität in jedem Format ansehen, wo WebP und AVIF wirklich glänzen. Hier ist JPEG@q10 (35 KB), WebP@q1 (35 KB), AVIF@q17 (36 KB) – das WebP weist im Vergleich zum JPEG deutlich weniger blockartige Artefakte auf, während das AVIF sowohl weniger blockartig als auch schärfer in wichtigen Details im Bild ist .

Hinweis: Dieser Sonnenuntergang ist ein Bild mit höherer Auflösung ( 2400 × 1595 ), und auf 2×-Bildschirmen kann die Qualität viel geringer sein und immer noch scharf aussehen, je nachdem, wie Benutzer mit dem Bild interagieren (z. B. wie stark sie zusammenziehen und zoomen).

Als extremeres Beispiel für die Unterschiede zwischen JPEG und AVIF können wir uns ein Beispiel aus dem Kodak-Datensatz (ausgewertet von Netflix) ansehen, in dem ein JPEG (4:4:4) mit 20 KB mit einem AVIF (4:4:4) verglichen wird. bei 19,8 KB. Beachten Sie, wie das JPEG sichtbare blockartige Artefakte im Himmel und auf dem Dach aufweist. Das AVIF ist sichtbar besser und enthält weniger blockierende Artefakte. Es gibt jedoch einen gewissen Texturverlust auf dem Dach und etwas Unschärfe. Es ist immer noch ziemlich beeindruckend, wenn man bedenkt, dass der Gesamtkomprimierungsfaktor 59x beträgt.

Lassen Sie uns als Nächstes die Qualität eines Strandbildes mit vielen feinen Details, Texturen und kontrastarmen Bereichen in den Wolken bewerten. Wir werden das Original (bei 482 KB) mit dem vergleichen, was JPEG, WebP und AVIF mit einer Dateigrößenbeschränkung von 45 KB (ohne erweitertes Tuning) erzeugen können – mit Squoosh; dies funktioniert bei JPEG (MozJPEG) bei 50 % Qualität, WebP bei 54 % und AVIF bei 36 %.

Das JPEG hat blockartige Artefakte und sichtbare Farbbänder in den Wolken und im Wasser, während bei WebP und AVIF merklich weniger von dieser Blockigkeit zu beobachten ist. Meiner Meinung nach bietet das AVIF das insgesamt reibungsloseste Erlebnis von allen dreien.

Apropos Texturen, wir können auch eine ähnliche Bewertung in geringerer Qualität auf einem Netflix-Poster für „The Witcher“ durchführen (Zielgröße: 36 KB). Beachten Sie die Blockbildung in den Wolken für das JPEG und einige Unschärfe um den roten Text für WebP (das nur 4:2:0-Chroma-Subsampling ohne Problemumgehungen unterstützt). Das AVIF sieht am besten aus, gefolgt vom WebP.

Schauen wir uns zum Schluss ein Foto mit viel mehr Textelementen als vorherige Bilder an – ein Poster. Wenn wir zu niedrigeren Qualitäten gehen und eine relativ kleine Größe (25 KB) anstreben, können wir beobachten, dass das JPEG starke Farbstreifen und Lichthöfe um den Text herum aufweist. Es gibt deutliche blockartige Artefakte an den Rändern. Das WebP vermeidet einen Teil der Blockigkeit und sieht inkrementell besser aus. Das AVIF bewahrt die scharfen Kanten etwas besser als JPEG oder WebP und erzeugt ein glattes Bild.

Für Fotografie und Illustrationen sind zusätzliche Vergleiche zwischen Format und Qualität verfügbar.

AVIF-Tools und Support

Seit seiner Veröffentlichung im Jahr 2019 hat die Unterstützung für AVIF erheblich zugenommen. Während es früher keine direkte Methode zum Erstellen oder Anzeigen von AVIF-Dateien gab, können Sie dies jetzt mit den verfügbaren Open-Source-Dienstprogrammen problemlos tun.

AVIF-Bilder im Browser

AVIF wurde im August 2020 mit Chrome 85 in der Desktop-Version von Chrome eingeführt. Es wird auch von Chrome für Android, Opera und Firefox für Desktop sowie Opera für Android unterstützt.

Um ein AVIF-Bild auf Ihrer Seite einzufügen, können Sie es als Bildelement hinzufügen. Browser, die AVIF nicht unterstützen, können dieses Bild jedoch nicht darstellen.

 <img src="/images/sky.avif" width="360" height="240" alt="a beautiful sky">

Eine Problemumgehung , um sicherzustellen , dass mindestens ein unterstütztes Bildformat an alle Browser geliefert wird , besteht darin , AVIF als progressive Erweiterung anzuwenden . Dazu gibt es zwei Möglichkeiten.

Progressive Enhancement

1. Verwendung des <picture> -Elements
   Da <picture> es Browsern ermöglicht, Bilder zu überspringen, die sie nicht erkennen, können Sie Bilder in Ihre bevorzugte Reihenfolge aufnehmen. Der Browser wählt den ersten aus, den er unterstützt.

 <picture> <source type="image/avif"> <source type="image/webp"> <img src="img/photo.jpg" alt="Description" width="360" height="240"> </picture>

1. Content-Negotiation verwenden
   Die Inhaltsaushandlung ermöglicht es dem Server, verschiedene Ressourcenformate bereitzustellen, je nachdem, was vom Browser unterstützt wird. Browser, die ein bestimmtes Format unterstützen, können es ankündigen, indem sie das Format zu ihrem Accept-Request-Header hinzufügen. Der Accept-Request-Header für Bilder in Chrome lautet beispielsweise:
   Accept: image/avif,image/webp,image/apng,image/*,*/*;q=0.8
   Der Code zum Prüfen, 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 dem Client AVIF oder ein anderes Standardformat bereitzustellen.

Das Erstellen des Markups für die progressive Verbesserung kann entmutigend sein. Bild-CDNs bieten die Option, automatisch das für den Kunden am besten geeignete Format bereitzustellen. Wenn Sie jedoch kein Bild-CDN verwenden, können Sie ein Tool wie just-gimme-an-img verwenden. Dieses Tool kann das Markup für das Bildelement für ein bestimmtes Bild mit unterschiedlichen Formaten und Breiten generieren. Es erstellt auch die dem Markup entsprechenden Bilder mit Squoosh vollständig clientseitig. Hinweis: Das Kodieren mehrerer Formate kann eine Weile dauern, also möchten Sie vielleicht einen Kaffee trinken, während Sie warten.

Hinweis: Image-CDNs werden in diesem Artikel einige Male erwähnt. CDN-Server befinden sich häufig näher an den Benutzern als Ursprungsserver und können kürzere Roundtrip-Zeiten (RTT) haben, wodurch die Netzwerklatenz verbessert wird. Allerdings kann die Bereitstellung von einem anderen Ursprungsort Roundtrips hinzufügen und sich auf Leistungssteigerungen auswirken. Dies kann in Ordnung sein, wenn das CDN andere Website-Inhalte bereitstellt, aber im Zweifelsfall experimentieren und messen.

Kodieren und dekodieren Sie AVIF-Dateien

Mehrere Open-Source-Projekte bieten verschiedene Methoden zum Kodieren/Dekodieren von AVIF-Dateien:

• Bibliotheken
  Libaom ist der Open-Source-Encoder und -Decoder, der von AOMedia, den Machern von AVIF, gepflegt wird. Die Bibliothek wird kontinuierlich mit neuen Optimierungen aktualisiert, die darauf abzielen, die Kosten für die Codierung von AVIF zu reduzieren, insbesondere für häufig geladene Bilder oder Bilder mit hoher Priorität. Libavif ist ein Open-Source-Muxer und -Parser für AVIF, der in Chrome zum Decodieren von AVIF-Bildern verwendet wird. Sie können libavif mit libaom verwenden, um AVIF-Dateien aus unkomprimierten Originalbildern zu erstellen oder sie aus anderen Formaten zu transkodieren. Es gibt auch Libheif, einen beliebten AVIF/HEIF-Encoder/Decoder und Cavif. Dank Ben Morss unterstützt libgd AVIF und kommt im November auch für PHP.
• Web-Apps und Desktop-Apps
  Squoosh, eine Web-App, mit der Sie verschiedene Bildkomprimierer verwenden können, unterstützt auch AVIF, wodurch es relativ einfach ist, .avif Dateien online zu konvertieren und zu erstellen. Auf dem Desktop unterstützt GIMP den AVIF-Export. ImageMagick und Paint.net unterstützen auch AVIF, während Photoshop-Community-Plugins für AVIF ebenfalls verfügbar sind.
• JavaScript-Bibliotheken
  
  • AVIF.js ist ein AVIF-Polyfill für Browser, die AVIF noch nicht unterstützen. Es verwendet die Service Worker API, um das Abrufereignis abzufangen und AVIF-Dateien zu decodieren.
  • Avif.io ist ein weiteres Web-Dienstprogramm, das Dateien von verschiedenen Bildtypen auf der Client-Seite in AVIF konvertieren kann. Es ruft Rust-Code im Browser über einen WebWorker auf. Die Konverterbibliothek wird mit wasm-pack in WASM kompiliert.
  • Sharp ist ein Node.js-Modul, das große Bilder in Standardformaten in kleinere webfreundliche Bilder konvertieren kann, einschließlich AVIF-Bilder.
• Dienstprogramme
  Dienstprogramme zur Bildkonvertierung oder -transformation unterstützen das AVIF-Format. Sie können MP4Box verwenden, um AVIF-Dateien zu erstellen und zu dekodieren.
• In Code
  go-avif implementiert einen AVIF-Encoder für Go mit libaom . Es wird mit einem Dienstprogramm namens avif , das JPEG- oder PNG-Dateien in AVIF kodieren kann.

Jeder, der lernen möchte, wie man AVIF-Images mit Squoosh erstellt oder den Befehlszeilen-Encoder avifenc , kann dies im Codelab zum Bereitstellen von AVIF-Dateien tun.

AVIF und Leistung

AVIF kann die Dateigröße von Bildern aufgrund einer besseren Komprimierung reduzieren. Dadurch werden AVIF-Dateien schneller heruntergeladen und verbrauchen weniger Bandbreite. Dies kann möglicherweise die Leistung verbessern, indem die Zeit zum Laden von Bildern verkürzt wird.

Die Best-Practices-Prüfung von Lighthouse geht jetzt davon aus, dass die AVIF-Bildkomprimierung erhebliche Verbesserungen bringen kann. Es sammelt alle BMP-, JPEG- und PNG-Bilder auf der Seite, konvertiert sie in WebP und schätzt die AVIF-Dateigröße. Diese Schätzung hilft Lighthouse dabei, die potenziellen Einsparungen im Abschnitt „Bilder in Next-Gen-Formaten bereitstellen“ zu melden.

Tim Vereecke berichtete von 25 % Byte-Einsparungen und einer positiven Auswirkung auf LCP (im Vergleich zu JPEG) nach der Konvertierung von 14 Millionen Bildern auf der Website in AVIF, gemessen mit Real User Monitoring (RUM).

AVIF-Fallstricke

Der größte Nachteil von AVIF ist derzeit, dass es keine einheitliche Unterstützung für alle Browser gibt. Die Einführung von AVIF als progressive Verbesserung hilft, dies zu überwinden. Ein paar andere Aspekte, in denen AVIF nicht die idealen Standards für ein modernes Dateiformat erfüllt.

• Moderne Versionen von Chrome (Chrome 94+) unterstützen progressives AVIF-Rendering, während ältere Versionen dies nicht tun. Während es zum Zeitpunkt der Erstellung dieses Artikels keinen Encoder gibt, der diese Bilder einfach erstellen kann, besteht Hoffnung, dass sich dies ändern wird.
• Das Kodieren und Erstellen von AVIF-Bildern dauert länger. Dies könnte ein Problem für Sites sein, die Bilddateien dynamisch erstellen. Das AVIF-Team arbeitet jedoch daran, die Codierungsgeschwindigkeit zu verbessern. AVIF-Mitwirkende bei Google haben auch einige nette Leistungssteigerungen gemeldet. Seit dem 1. Januar 2021 hatte die AVIF-Codierung eine Verbesserung der Transcodierungszeit um ~47 % (das ist Geschwindigkeit 6, die aktuelle Standardeinstellung für libavif) und über das Kalenderjahr hinweg eine Verbesserung um 73 %. Seit Juli hat sich auch die Transcodierungszeit bei Geschwindigkeit 9 (On-the-Fly-Codierung) um 72 % verbessert.

• Das Dekodieren von AVIF-Bildern für die Anzeige kann auch mehr CPU-Leistung beanspruchen als andere Codecs, obwohl kleinere Dateigrößen dies möglicherweise ausgleichen.
• Einige CDNs unterstützen AVIF noch nicht standardmäßig für ihre automatischen Formatierungsmodi, da die Generierung bei der ersten Anforderung immer noch langsamer sein kann.

WebP

Wir haben WebP ein paar Mal erwähnt, aber lassen Sie uns kurz seine Geschichte behandeln. Google hat das WebP-Format im Jahr 2011 als Bildformat entwickelt, das dazu beitragen würde, das Web schneller zu machen. Im Laufe der Jahre wurde es aufgrund seiner Fähigkeit, Bilder im Vergleich zu JPEG und PNG auf niedrigere Dateigrößen zu komprimieren, akzeptiert und weit verbreitet. WebP bietet sowohl verlustfreie als auch verlustbehaftete Komprimierung bei akzeptabler visueller Qualität und unterstützt Alphakanal-Transparenz und -Animation.

Die verlustbehaftete WebP-Komprimierung basiert auf dem VP8-Videocodec und verwendet prädiktive Codierung, um ein Bild zu codieren. Es verwendet Werte in den benachbarten Pixelblöcken, um den Wert in einem Block vorherzusagen, und codiert nur die Differenz. Verlustfreie WebP-Bilder werden generiert, indem mehrere Transformationstechniken auf Bilder angewendet werden, um sie zu komprimieren.

WebP-Vorteile

Verlustfreie WebP-Bilder sind im Allgemeinen 26 % kleiner als PNG, und verlustbehaftete WebP-Bilder sind 25–34 % kleiner als JPEG-Bilder ähnlicher Qualität. Die Animationsunterstützung macht sie auch zu einem hervorragenden Ersatz für GIF-Bilder. Das Folgende zeigt links ein transparentes PNG-Bild und rechts das entsprechende WebP-Bild, das von der Squoosh-App mit einer 26-prozentigen Größenreduzierung generiert wurde.

Darüber hinaus bietet WebP weitere Vorteile wie:

• Transparenz
  WebP hat einen verlustfreien 8-Bit-Transparenzkanal mit nur 22 % mehr Bytes als PNG. Es unterstützt auch verlustbehaftete RGB-Transparenz, eine einzigartige Funktion von WebP.
• Metadaten
  Das WebP-Dateiformat unterstützt EXIF-Fotometadaten und digitale Dokumentmetadaten der Extensible Metadata Platform (XMP). Es kann auch ein ICC-Farbprofil enthalten.
• Animation
  WebP unterstützt animierte Bilder in Echtfarbe.

Hinweis: Bei transparenten, vektorähnlichen Bildern wie den oben genannten kann ein optimiertes SVG im Vergleich zu einem Rasterformat letztendlich eine schärfere, kleinere Datei liefern.

WebP-Tools und Support

Im Laufe der Jahre haben andere Ökosysteme als Google WebP übernommen, und es stehen viele Tools zum Erstellen, Anzeigen und Laden von WebP-Dateien zur Verfügung.

Bereitstellen und Anzeigen von WebP-Dateien

WebP wird heute von den neuesten Versionen fast aller gängigen Browser unterstützt.

Wenn Entwickler WebP in Zukunft auf anderen Browsern bereitstellen möchten, können sie dies tun, indem sie das <picture> -Element verwenden oder Header anfordern, wie im Abschnitt zu AVIF gezeigt.

Image Content Delivery Networks (CDN) unterstützen auch responsive Bilder mit automatischer Formatauswahl für Bilder in WebP oder AVIF, je nach Browserunterstützung. WebP-Plug-Ins sind für andere beliebte Stacks wie WordPress, Joomla, Drupal usw. verfügbar. Erste Unterstützung für WebP ist auch im WordPress-Kern verfügbar, beginnend mit WordPress 5.8.

Sie können WebP-Bilder einfach anzeigen, indem Sie sie in einem Browser öffnen, der sie unterstützt. Darüber hinaus können Sie sie mit einem Add-on auch unter Windows und macOS in der Vorschau anzeigen. Durch die Installation des Quick Look-Plug-Ins für WebP ( qlImageSize ) können Sie WebP-Dateien mithilfe des Quick Look-Dienstprogramms in der Vorschau anzeigen. Das WebP-Team hat vorkompilierte Bibliotheken und Dienstprogramme für den WebP-Codec für Windows, macOS und Linux veröffentlicht. Wenn Sie diese unter Windows verwenden, können Sie eine Vorschau von WebP-Bildern im Datei-Explorer oder in der Windows-Fotoanzeige anzeigen.

Konvertieren von Bildern in WebP

Zusätzlich zu den vom WebP-Team bereitgestellten Bibliotheken unterstützen mehrere kostenlose Open-Source- und kommerzielle Bildbearbeitungstools WebP.

Dienstprogramme:
Wie AVIF kann auch Squoosh Dateien online in WebP konvertieren, wie im vorherigen Abschnitt gezeigt. XnConvert ist ein Dienstprogramm, das Sie auf dem Desktop installieren können, um verschiedene Bildformate, einschließlich WebP, zu konvertieren. XnConvert kann auch beim Entfernen und Bearbeiten von Metadaten, Zuschneiden und Ändern der Größe, Helligkeit und Kontrast, Anpassen der Farbtiefe, Weichzeichnen und Schärfen, Masken und Wasserzeichen und anderen Transformationen helfen.

Node.js-Module:
Imagemin ist ein beliebtes Modul zur Bildverkleinerung mit einem Add-on zum Konvertieren von Bildern in WebP (imagemin-webp). Das Add-On unterstützt sowohl verlustbehaftete als auch verlustfreie WebP-Modi.

Andere:
Mehrere Apps zur Bildkonvertierung und -bearbeitung unterstützen das WebP-Format. Dazu gehören Sketch, GIMP, ImageMagick usw. Ein Photoshop-Plug-in für WebP ist ebenfalls verfügbar.

WebP-Produktionsnutzung

Aufgrund seiner Komprimierungsvorteile gegenüber JPEG und PNG verwenden viele große Unternehmen WebP in der Produktion, um Kosten zu senken und die Ladezeiten von Webseiten zu verkürzen. Google berichtet von 30–35 % Einsparungen mit WebP gegenüber anderen verlustbehafteten Komprimierungsschemata, wobei 43 Milliarden Bildanfragen pro Tag verarbeitet werden, von denen 26 % verlustfreie Komprimierung sind.

Um seine große Nutzerbasis in Schwellenländern zu erreichen, in denen Daten teuer sind, hat Facebook damit begonnen, WebP-Bilder für Android-Nutzer bereitzustellen. Sie beobachteten „Dateneinsparungen von 25 bis 35 Prozent im Vergleich zu JPG und 80 Prozent im Vergleich zu PNG“.

WebP Fallstricke

In den frühen Tagen war ein wesentlicher Nachteil von WebP der Mangel an Browser- und Tooling-Unterstützung. Es gibt immer noch wenige Kompromisse mit WebP, wenn man alle Funktionen berücksichtigt, die ein modernes Format idealerweise unterstützen sollte.

• WebP ist auf eine 8-Bit-Farbgenauigkeit beschränkt. Infolgedessen kann es keine HDR-/Wide-Gamut-Bilder unterstützen.
• WebP unterstützt keine verlustbehafteten Bilder ohne Chroma-Subsampling. Verlustbehaftetes WebP arbeitet ausschließlich mit einem 8-Bit-YCbCr 4:2:0, während verlustfreies WebP mit dem RGBA-Format arbeitet. Dies kann Bilder mit feinen Details, chromatischen Texturen oder farbigem Text betreffen. Siehe unten für ein Beispiel.
• Es unterstützt keine progressive Dekodierung, jedoch eine inkrementelle Dekodierung. Dies kann das etwas kompensieren, aber die Auswirkung auf das Rendern kann unterschiedlich sein.

Idealerweise sollten Sie WebP-Dateien aus den qualitativ besten verfügbaren Quelldateien generieren. Das Konvertieren von minderwertigen JPEGs in WebPs ist nicht sehr effizient, da Sie zweimal an Qualität verlieren.

Zusammenfassung

Die folgende Tabelle fasst alle Informationen zu den vier Formaten JPEG, PNG, AVIF und WebP zusammen und vergleicht und quantifiziert die Stärken und Schwächen, wie sie im vorherigen Abschnitt dargestellt wurden.

Hinweis: Die Anzahl der Sterne basiert auf einer allgemeinen Meinung und kann für bestimmte Anwendungsfälle abweichen.

Im Folgenden sind einige der wichtigsten Punkte aufgeführt, die bei der Bezugnahme auf diese Tabelle zu berücksichtigen sind.

• Die Komprimierung für fotografische und nicht-fotografische Bilder kann sich außerdem je nach Wiedergabetreue (Qualität) der Bilder unterscheiden. Wir haben hier eine Gesamtpunktzahl angegeben.
• Sie sollten die Qualitäts- und Chroma-Subsampling-Einstellungen basierend auf dem Zweck der Bilder auswählen. Bilder mit niedriger bis mittlerer Wiedergabetreue können in den meisten Szenarien im Web akzeptabel sein, z. B. für Nachrichten, soziale Medien und E-Commerce. Bildarchiv-, Film- oder Foto-Websites erfordern High-Fidelity-Bilder. Sie sollten die tatsächlichen Einsparungen aufgrund der Komprimierung für High-Fidelity testen, bevor Sie in ein anderes Format konvertieren.
• Mangelnde Unterstützung für progressive Decodierung und Geschwindigkeit können ein Problem für die Codierung/Decodierung von AVIF-Dateien sein. Bei Websites mit durchschnittlich großen Bildern können die Byte-Einsparungen aufgrund der Komprimierung die Geschwindigkeit und das Fehlen einer progressiven Decodierung ausgleichen, da Bilder schnell heruntergeladen werden.
• Wenn Sie die von Bildformaten angebotene Komprimierung vergleichen, vergleichen Sie die Dateigrößen bei demselben DSSIM.
• Die beim Codieren verwendete Qualitätseinstellung muss für unterschiedliche Formate nicht gleich sein, um die gleiche Bildqualität zu erzielen. Ein mit einer Qualitätseinstellung von 60 codiertes JPEG kann ähnlich wie ein AVIF mit einer Qualitätseinstellung von 50 und ein WebP mit einer Qualitätseinstellung von 65 sein, wie in diesem Beitrag vorgeschlagen.
• Umfangreiche Studien sind noch erforderlich, um die tatsächlichen Auswirkungen auf LCP beim Vergleich von Formaten zu messen.
• Andere Formate wie JPEG XL und HEIC haben wir in diesem Vergleich nicht berücksichtigt. JPEG XL befindet sich noch in einem relativ jungen Stadium, und nur Apple-Geräte unterstützen HEIC (während Safari dies nicht tut). Lizenz- und Lizenzgebühren erschweren die Unterstützung von HEIC zusätzlich.

AVIF aktiviert insgesamt die meisten Kästchen, und WebP hat eine bessere Unterstützung und bietet im Vergleich zu JPEG oder PNG eine bessere Komprimierung. Daher sollten Sie bei der Optimierung von Bildern auf Ihrer Website unbedingt die WebP-Unterstützung in Betracht ziehen. Die Bewertung von AVIF, ob es Ihren Anforderungen entspricht, und die Einführung als progressive Erweiterung könnte einen Mehrwert bieten, wenn das Format von verschiedenen Browsern und Plattformen übernommen wird. Mit Qualitätsvergleichswerkzeugen und verbesserten Codierungsgeschwindigkeiten mit AVIF würde es letztendlich einfacher werden.

Mit Dank an Leena Sohoni-Kasture für ihren starken Beitrag zu diesem Artikel sowie an Patrick Meenan, Frank Galligan und Yoav Weiss für ihre Rezensionen.

Eine überwältigende Note

Anfang dieses Jahres haben wir zusammen mit Addy ein brandneues Buch über alles herausgegeben, was Sie wissen müssen, um die Komprimierung, Bereitstellung und Pflege von Bildern zu optimieren – und dabei die Leistung zu steigern. Wir versenden die Bücher weltweit kostenlos , und wenn Sie das Buch jetzt kaufen, erhalten Sie zusätzlich eine handgeschriebene Postkarte von Addy mit einer persönlichen Nachricht.

• Zu den Details springen ↓
• Laden Sie ein kostenloses PDF-Muster herunter (12 MB)
• Kostenloser weltweiter Luftpostversand für gedruckte Bücher.
• Hol dir gleich das Buch.