WebP: Das effiziente Format für Bilder im Web

Die Ladegeschwindigkeit zählt schon seit geraumer Zeit zu den wichtigsten Stellschrauben bei der Optimierung einer Website. Nicht nur Besucher, sondern auch Suchmaschinen ziehen die Zeit, die beim Aufruf einer Seite ins Land streicht, als wichtiges Bewertungskriterium heran. Ein schlanker und komprimierter Code oder der Einsatz von Caching-Mechanismen zählen ebenso zu den erprobten Lösungsansätzen für eine schnelle Webpräsenz wie die Verwendung komprimierter Bilder. Letztere sind – als gestalterisches und untermalendes Element – in vielen Projekten in großer Zahl eingebunden, wobei ihr Einfluss auf die Ladezeit oft unterschätzt wird.

Mit diesem Problem hat sich u. a. der Suchmaschinenriese Google befasst und mit WebP schon im Jahr 2010 sein hauseigenes, lizenzfreies Bildformat für schnellere Websites präsentiert. Doch was genau steckt eigentlich hinter dem Webformat, das aus dem Video-Codec VP8 hervorgegangen ist? Und wie schlägt es sich im direkten Vergleich mit etablierten Größen wie JPEG?

Am 30. September 2010 verkündete Google die Veröffentlichung eines neuen offenen Standards für verlustbehaftete Komprimierung von 24-Bit-Grafiken im Web. Als Vorlage für das Format mit dem Namen WebP diente das Videoformat VP8, das von der Firma On2 Technologies entwickelt wurde, die Google im gleichen Jahr aufgekauft hatte. In der Folgezeit erweiterte Google das WebP-Format um Features wie einen Modus zur verlustfreien Komprimierung, Transparenz (Alphakanal) und Animationen. Chrome unterstützt das Komprimierungsformat bereits seit Ende 2010, steht – gemeinsam mit Opera – bis dato aber einer Vielzahl von Browsern gegenüber, die WebP bisher nur experimentell unterstützen (wie Safari und Firefox, deren reguläre Releases keinen Support bieten). Laut eigenen Angaben arbeitet Microsoft aktuell an einer Unterstützung für den hauseigenen Browser Edge.

Sämtliche Software für die Bearbeitung und Darstellung von WebP steht standardmäßig unter der BSD-Lizenz. Google nutzt das Format beispielsweise im Chrome Web Store und in den mobilen Google+-Apps.

WebP diente von Beginn an dem Zweck, Bilder im Web auf eine möglichst geringe Dateigröße zu reduzieren. Nach Angaben von Google sind Bilder und Grafiken im WebP-Format rund 30 Prozentkleiner als PNG- oder JPEG-Dateien mit gleicher Bildqualität. Während diese beiden klassischen Webformate auf unterschiedliche Komprimierungsmethoden setzen – PNG verlustfrei, JPEG verlustbehaftet – lässt WebP beide Möglichkeiten zu. Dank dieser Flexibilität ist das Format sowohl für Fotos als auch für kleine Bilder und Grafiken geeignet. Die Komprimierungs-Features sowie die weiteren zentralen Eigenschaften des WebP-Formats lassen sich folgendermaßen zusammenfassen:

• Komprimierung (verlustbehaftet): Die verlustbehaftete Komprimierung mit WebP basiert auf der Keyframe-Codierung („Schlüsselbild“-Codierung) von VP8.
• Komprimierung (verlustfrei): Die verlustfreie Komprimierung mit WebP baut auf verschiedenen Techniken auf, die die Parameter und Bilddaten transformieren. Dabei kommt u. a. der LZ77-Algorithmus zum Einsatz.
• Transparenz: Der 8-Bit-Alphakanal, den das WebP-Format bietet, kann auch bei verlustbehafteter RGB-Komprimierung genutzt werden.
• Metadaten: WebP kann EXIF- und XMP-Metadaten enthalten, die typischerweise von Kameras erzeugt werden.
• Farbprofil: Das Google-Format kann eingebettete ICC-Profile (Datensätze, die den Farbraum beschreiben) enthalten.
• Animationen: Das WebP-Format ermöglicht die Speicherung von Bildsequenzen.

Die verlustbehaftete Komprimierung mit WebP nutzt die gleiche Methode wie der blockbasierte VP8-Codec, um Frames – also Einzelbilder – vorauszuberechnen. Jedes Frame wird also in kleinere Segmente unterteilt, die auch als Makroblöcke bezeichnet werden. Innerhalb dieser Makroblöcke kann der Codierer redundante Bewegungs- und Farbinformationen voraussagen und diese vom Block subtrahieren. Das Ergebnis dieser prädiktiven Komprimierung setzt sich aus den übrig gebliebenen Blockinformationen und den abgetrennten, redundanten Informationen (enthalten typischerweise viele Nullwerte) zusammen. Es wird quantifiziert und entropiecodiert (Darstellung von Zeichen durch bestimmte Bitmuster). Der Quantifizierungsschritt ist dabei der einzige Prozess, bei demBits auch tatsächlich verlustbehaftet verworfen werden.

Bei der verlustfreien WebP-Komprimierung steht im ersten Schritt die Transformation des Bildes an, wobei u. a. folgende Techniken zum Einsatz kommen können:

Die transformierten Parameter und Bilddaten werden entropiecodiert, wobei eine Variante des LZ77-Algorithmus zum Einsatz kommt. Diese verwendet kleine Werte für räumlich nahe Pixel.

Dank der Unterstützung animierter Bilder ist WebP eine interessante Alternative zu GIF oder APNG. Hierbei kommen Stärken wie die Farbtiefe von 24 Bit und der 8-Bit-Alphakanal, aber auch der starke Komprimierungsgrad zum Tragen. Dabei erlaubt das WebP-Format im Gegensatz zu den konkurrierenden Formaten sowohl die verlustfreie als auch die verlustbehaftete Komprimierung der Animationen. Auch in Sachen Decodierung weiß animiertes WebP zu überzeugen: Da WebP Metadaten darüber speichert, ob jedes Frame Alpha-Werte enthält, muss der Decodierer nicht jedes Frame einzeln umwandeln, um diese Information zu erhalten.

Die bereits erwähnte Keyframe-Technik des WebP-Formats spielt insbesondere in Animationen seine Stärken aus, wo die Schlüsselbilder für eine hohe Qualität sorgen. Aus diesem Grund ist der Decodierungsprozess aber auch CPU-intensiver als beispielsweise bei GIF.

Was Google für die Welt der Suchmaschinen ist, ist JPEG bzw. JPG für die Präsentation von Fotos und großen Bildern im World Wide Web. Auch über ein Vierteljahrhundert nach seiner Veröffentlichung ist das Bildformat kaum aus der Webszene wegzudenken. Der größte Vorteil gegenüber Formaten wie PNG – das zwar gleichermaßen verbreitet, aber überwiegend in kleineren Bildern und Grafiken wie Logos, Icons etc. zum Einsatz kommt – liegt dabei zweifelsohne darin, dass JPEG dank der verlustbehafteten Komprimierung für erhebliche Speicherplatzeinsparungen sorgt.

In diesem entscheidenden Detail erweist sich WebP jedoch als effizienter und flexibler: Zum einen bietet das Google-Format neben der verlustbehafteten aucheine verlustfreie Komprimierungsmethode an. Zum anderen übertreffen die Speichereinsparungen bei Bildern im WebP-Format die bei gleichwertigen JPEG-Bildern. Dass JPEG dafür Bilder mit einer Maximalgröße von bis zu 65.535 x 65.535 Pixeln zulässt, während die Grenze von WebP bei 16.383 x 16.383 Pixeln liegt, ist angesichts des Einsatzfeldes (Web) zu vernachlässigen.

Ähnlich wie beim Vergleich WebP vs. JPEG sieht es im Übrigen auch beim Vergleich WebP vs. GIF aus, wo das Format aus dem Hause Google ebenfalls überzeugende Vorzüge in Sachen Qualität und Komprimierung aufweist. Das Problem liegt jedoch in der fehlenden Unterstützung von WebP durch Browser wie Firefox oder Microsoft Edge. Nutzer dieser Webbrowser sehen Bilder und Animationen in WebP bis dato nicht, weshalb bislang auch kaum ein Website-Betreiber auf das Format setzt.

Die Eckdaten der Gegenüberstellung „WebP vs. JPEG“ in tabellarischer Zusammenfassung:

Dateien im WebP-Format lassen sich mit den gewöhnlichen Bildbetrachtungsprogrammen von Windows, Linux und macOS aktuell noch nicht öffnen. Wollen Sie sich dennoch Animationen oder Bilder anzeigen lassen, die mit WebP codiert wurden, haben Sie verschiedene Möglichkeiten.

Sind Chrome oder Opera auf Ihrem System installiert, können Sie die betreffende Datei ganz einfach in ein offenes Fenster der beiden Browser ziehen. Da diese WebP nativ unterstützen, sehen Sie so den entsprechenden Inhalt, ohne weitere Software zu benötigen. Sehr komfortabel ist diese Lösung aber nicht – insbesondere, wenn Sie sich mehrere Bilder oder Animationen ansehen wollen. Wer also nicht mit diversen Browserfenstern arbeiten und zwischen diesen hin und her wechseln möchte, sollte zu IrfanView greifen. Der Freeware-Bildbetrachter bietet nach der Installation des offiziellen Plug-in-Pakets ebenfalls WebP-Unterstützung. Allerdings ist das Programm nur für Windows verfügbar.

Im offiziellen WebP-Developer-Bereich bietet Google darüber hinaus eine Reihe von eigenen Lösungen für die Arbeit mit WebP an – allen voran die Bibliothek libwebp, die Sie dazu nutzen können, die WebP-Codierung und -Decodierung in Ihre eigenen Programme zu implementieren. Ferner sind in der kostenfrei downloadbaren Sammlung folgende Tools enthalten:

• cwebp ermöglicht die Komprimierung einer Bilddatei mithilfe von WebP. Mögliche Eingabeformate sind u. a. PNG, JPEG und TIFF. In den Optionen des Tools können Sie definieren, ob verlustfrei oder verlustbehaftet komprimiert werden soll.
• dwebp ist ein Tool, mit dem Sie vorhandene WebP-Dateien in andere Formate wie PNG (Standardoption), BMP, TIFF oder PGM umwandeln können.
• Mit vwebp liefert Google eine eigene Lösung zum Anzeigen von WebP-Bildern und -Animationen auf Basis von OpenGL.
• webpmux ist das entscheidende Werkzeug für die Arbeit mit erweitertem WebP. Sie können mit dem Programm z. B. Animationen im WebP-Format kreieren oder Bilddateien um Metadaten und ICC-Profile erweitern.
• Mit gif2webp konvertieren Sie vorliegende GIF- in WebP-Dateien. Wie bei der gewöhnlichen Bilderkomprimierung ist sowohl die verlustfreie als auch die verlustbehaftete Codierung möglich.