Das Grafikformat WebP

WebP ist ein alternatives Bildformat für verlustfreie und verlustbehaftete Kompression. Das Bildformat wurde von Google und On2 entwickelt, weil die zunehmende Verwendung von Bildern auf Webseiten zu einem Falschenhals bei der Ladezeit wurden.
Bei WebP handelt es sich um Grafikformat für nicht animierte Standbilder, dessen technische Grundlage VP8 vom Videoformat WebM abgeleitet wurde, wobei VP9 bereits in den Startlöchern steckt. Die Kompatitbilität von VP9 bei der Videobearbeitung ist aber nicht so flächendeckend. Mithilfe der Kommandozeile ist die Verwendungsmöglichkeit von WebM mit VP9 aber uneingeschränkt gegeben, wie wir bei verschiedenen Anwendungen im vergangenen Jahr 2018 in der Praxis festgestellt haben. Inwieweit die Vorteile von VP9 über VP8 in die weitere Entwicklung von WebP einfließen werden bleibt abzuwarten.

Webserver Konfiguration

Damit Webseiten das Grafikformat WebP korrekt darstellen muss der Webserver entsprechend konfiguriert werden. Wenn ein Bild im WebP Format vorliegt, dann wird bei entsprechender Konfiguration vom Browser als favorisiertes Bildformat zur Darstellung geladen. Bei Webdseiten mit wenigen Bildern können die zusätzlichen Bilder im WebP Format lokal erzeugt werden und dann einfach per FTP hochgeladen werden. Für die Verwendung in Onlineshops mit zig tausenden von Bildern, die vorraussichtlich auch noch in mehreren Ordnern strukturiert sind, ist das aber nicht praktikabel. Hierfür lässt sich aber ein Shellscript erstellen, mit dem vorhandene Bilder direkt auf dem Server erzeugt werden. Die benötigten Softwarepakete richten wir bei unserem Hosting nach Bedarf für Sie ein, damit auch Sie Bilder im WebP Bildformat online direkt auf dem Server umwandeln können.

Browser Kompatibilität

Mozilla hat bis Ende 2018 keine Unterstützung für Firefox angeboten, weil WebP in den Augen der Mozilla Entwickler keine Vorteile zu JPG geboten hat, während Opera und Chrome schon seit Jahren kompatibel zu WebP sind.
Seit Januar 2019 unterstützt Mozilla Firefox ab Version 65 das WebP Grafikformat nun doch.

Welche Browser WebP unterstützen

Um eine fehlende Kompatibilität bei nicht kompatiblen Browsern zu vermeiden, ist die Einrichtung eines Fallback auf ein alternatives Format möglich. Sollte ein zu WebP nicht kompatibler Browser eingesetzt werden, dann lädt der Browser das in einem unterstützten Format wie JPG oder PNG zusätzlich hinterlegte Bild. Es lässt sich einfach überprüfen, ob das gwünschte Format vom Browser geladen wurde oder nicht.

Die folgenden Test wird sich zeigen, Ob WebP im Vergleich zu JPG oder PNG tatsächlich eine echte Alternative ist.

WebP verlustfreie Kompression

Als Versuchsbild dient das anspruchsvollere multicolour Logo aus dem vorangegangenen JPG vs PNG Bildvergleich, das die Schwächen vom JPG und PNG Format schon gut verdeutlichen konnte. Dieses Motiv wird jetzt mithilfe von WebP zuerst einmal verlustfrei komprimiert.

400x400px 877x877px
JPG Dateigröße (q=100)
JPG Dateigröße (q=100)
100%
100%
  WebP Dateigröße (q=100)
WebP Dateigröße (q=100)
17%
22%

Synthetisches Graustufen Testbild mit linearem Verlaufsmuster


Format: PNG; Qualität: q=verlustfrei


Format: WebP; Qualität: q=100


Format: WebP; Qualität: q=70


Format: WebP; Qualität: q=30

Auch bei höchster Qualität sind zwischen PNG und WebP Unterschiede feststellbar. WebP hat eine kleinere Dateigröße, weist jedoch bereits eine leichte Rasterung auf und steht somit im Konflikt mit der Bezeichnung “verlustfreie Kompression”.

verlustbehaftete WebP Kompression - Vergleich der Dateigröße

Um Bilder so weit wie möglich zu verkleinern, wird das Testbild mit WebP verlustbehaftet komprimiert. Während die Vorschaubilder nahezu identisch sind, so fällt die Rasterung beim höher aufgelösten Bild deutlich auf.

multicolour WebP with quality=70

Format: WebP
Qualität: q=70 (mittel)
Größe bei 160000px Auflösung (400x400px): 5,5 KB
Größe bei 769129px Auflösung (877x877px): 13,1 KB

multicolour WebP with quality=50

Format: WebP
Qualität: q=50 (niedrig)
Größe bei 160000px Auflösung (400x400px): 4,5 KB
Größe bei 769129px Auflösung (877x877px): 10,9 KB

multicolour WebP with quality=30

Format: WebP
Qualität: q=30 (sehr niedrig)
Größe bei 160000px Auflösung (400x400px): 3,5 KB
Größe bei 769129px Auflösung (877x877px): 8,6 KB

Das Ergebnis bei diesem Motiv kann sowohl bei der Qualität als auch bei der Dateigröße voll überzeugen. Es ist sowohl bei Qualität als auch bei der Größe noch viel Spielraum vorhanden. Erkennbar ist eine wie bei JPG ebenfalls vorhandene exponentielle Einsparung von Daten bei zunehmender Auflösung. Also je größer das Bild, umso effektiver funktioniert der Algorithmus. Zwar ist das Verhältnis der Einsparung bei WebP im Test minimal schlechter als bei JPG, jedoch muss berücksichtigt werden, dass die absolute Dateigröße der WebP Bilder nur jeweils einen Bruchteil beträgt.
Je komplexer das Bild und je mehr feine Strukturen vorhanden sind, und je mehr Farbverläufe et cetera vorhanden sind, umso schlechter ist das visuelle Ergebnis bei niedrigeren Qualitätseinstellungen.

Je nach Motiv kann und ist die Qualität von WebP In einigen Fällen bei gleicher Dateigröße schlechter als bei JPG (s.u.).

Details bei WebP

Das folgende Bild ist weitaus komplexer. Es handelt sich um eine hochwertige Aufnahme. Besonders die feinen Details der Hautporen, als auch die Details im Auge stellen hohe Anforderungen an den Grafikformat Codec. Während beim Vorschaubild nur einige Details fehlen (z.B. glattere Haut) und eigentlich nur bei genauerem Hinsehen auffallen, so fallen die Unterschiede bei der Detailansicht u.a. beim Auge sehr viel deutlicher aus.

Auge mit hohem DetailgradZu betrachtender Ausschnitt

viele Details eines Auges erkennbar bei Verwendung des JPG Grafikformats mit hohen Qualitätseinstellunegn

Format: JPG
Qualität: q=92
Größe bei Auflösung (400x263px): 30,3 KB
Größe bei Auflösung (588x387px): 54,0 KB

durch Verwendung des WEBP Grafikformats sind viele Details am Auge und an den Hautporen verloren

Format: WebP
Qualität: q=30
Größe bei Auflösung (400x264px): 2,7 KB
Größe bei Auflösung (586x387px): 4,6 KB

JPG WebP
Qualität (subjektiv)
Qualität (subjektiv)
100%
50%
  Dateigröße (objektiv)
Dateigröße (objektiv)
100%
12%

Im verlustbehafteten Test schlägt sich WebP wirklich gut. Besonders bei der Thumbnailgröße kann es überzeugen. Die Dateigröße lässt sich stark verkleinern. Beim direkten Vergleich in der Großansicht werden die Kompressionsartefakte und die verlorenen Details jedoch schnell deutlich.

Für die Darstellung von wirklich knackig scharfen Bildern eignet sich WebP in dieser Qualitätsstufe besonders bei hoch aufgelösten Bildern nicht mehr.
Ob die Erwartungen mit höheren Qualitätseinstellungen erfüllt werden kann, muss immer der Einzelfall zeigen. In manchen Fällen müssen die Qualitätseinstellungen so hoch gesetzt werden, dass die Größe der WebP Datei sogar die Dateigröße vom JPG Format übersteigt.

Reales Testbild zum Prüfen der Farbtreue

Bei diesem Bild handelt es sich um eine einfache Aufnahme mit dem Smartphone, die ogne Vorbereitung spontan mit einer Kamera eines mittelmäßigen Smartphones entstanden ist. Die Aufnahme weist matschige Details, einen relativ hohen Grauanteil und schwierige Lichtverhältnisse auf.

Format: JPG
Qualität: q=84 mit psychovisueller Optimierung
Format: WebP
Qualität: q=80

Format: WebP
Qualität: q=70

Format: WebP
Qualität: q=50

Format: WebP
Qualität: q=30

Mit diesem Bild lässt sich das Grafikformat WebP leicht überfordern. Bei gleicher Dateigröße weist das Bild im WebP Format einen erkennbaren Rotstich auf. Bei sinkenden Qualitätseinstellungen sind abgesehen von der deutlichen Zunahme von diverser Kompressionsartefakte auch eine klar erkennbare Zunahme von Farbfehlern erkennbar. Der Rotstich wird über das gesamte Bild hinweg intensiver. Einige Bereiche weisen zudem lokale Bereiche mit einem starken Grünstich auf (s. Details rechts vom Steg), der bei fallenden Qualitätseinstellungen umso stärker heraussticht.
Dieses Bild ist ein guter Grund dafür, warum man vorhandene PNG oder JPG Bilder nicht per Batch-Datei konvertieren sollte. WebP ist ein leistungsstarkes Bildformat, das jedoch als Ergänzung und nicht als Ersatz von PNG oder JPG gesehen werden sollte.

Categories: