WebP ist ein alternatives Bildformat für verlustfreie und verlustbehaftete Kompression. Das Bildformat wurde von Google und On2 entwickelt, um die steigende Verwendung von Bildern auf Webseiten, die zunehmend einen Flaschenhals bei der Ladezeit darstellte, zu adressieren.
WebP ist ein Format für nicht animierte Standbilder, dessen technische Grundlage VP8 vom Videoformat WebM abgeleitet wurde, wobei VP9 bereits in den Startlöchern steckt. Die Kompatibilität von VP9 bei der Videobearbeitung ist derzeit jedoch noch nicht flächendeckend. Mithilfe der Kommandozeile lässt sich WebM mit VP9 uneingeschränkt nutzen, was wir in verschiedenen Anwendungen im Jahr 2018 in der Praxis festgestellt haben. Inwieweit die Vorteile des VP9-Formats in die Weiterentwicklung des WebP-Bildformats einfließen werden, bleibt abzuwarten.
Webserver Konfiguration
Zur Darstellung von WebP muss der Webserver entsprechend konfiguriert werden, idealerweise mit einem Fallback. Wenn ein Bild im WebP-Format vorliegt, wird dieses bei entsprechender Konfiguration vom Browser als bevorzugtes Bildformat geladen. Falls keine WebP-Version vorhanden ist, wird stattdessen das JPG- oder PNG-Bild angezeigt.
Für Webseiten mit wenigen Bildern können die zusätzlichen Bilder im WebP-Format lokal erzeugt und dann einfach per FTP hochgeladen werden. Für Onlineshops mit tausenden von Bildern, die voraussichtlich auch noch in Ordnern strukturiert sind, ist dies jedoch nicht praktikabel. In diesem Fall lässt sich ein Shell-Skript erstellen, mit dem vorhandene Bilder lokal oder direkt auf dem Server erzeugt werden.
Zur besseren Kontrolle der Ergebnisse ist es empfehlenswert, das Shell-Skript zunächst lokal für eine Reihe von Bildern auszuführen.
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 gegenüber JPG bot, während Opera und Chrome schon seit Jahren kompatibel mit 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 unterstützten Browsern zu vermeiden, ist die Einrichtung eines Fallback auf ein alternatives Bildformat ratsam. Sollte ein nicht kompatibler Browser eingesetzt werden, lädt der Browser das zusätzlich hinterlegte Bild im unterstützten Format wie JPG oder PNG. Es lässt sich einfach überprüfen, ob das gewünschte Format vom Browser geladen wurde.
Tests sollen zeigen, ob WebP im Vergleich zu JPG oder PNG tatsächlich eine echte Alternative darstellt.
Synthetisches Graustufen-Testbild mit linearem Verlaufsmuster
Auch bei höchster Qualität sind Unterschiede zwischen PNG und WebP feststellbar. WebP hat eine kleinere Dateigröße, weist jedoch bereits eine leichte Rasterung auf, was im Widerspruch zur Bezeichnung “verlustfreie Kompression” (bei 100%) steht.
Verlustbehaftete WebP-Kompression - Vergleich der Dateigröße
Um die Bildgröße so weit wie möglich zu verringern, wird das Testbild mit WebP verlustbehaftet komprimiert. Während kleinere Vorschaubilder nahezu identisch in ihrem ersten Eindruck erscheinen, wird beim großen Bild eine deutliche Rasterung sichtbar.
Das Ergebnis bei diesem Motiv kann sowohl bei der Qualität als auch bei der Dateigröße überzeugen. Erkennbar ist eine exponentielle Einsparung von Daten bei zunehmender Auflösung, ähnlich wie bei JPG. Das bedeutet, je größer das Bild, desto effektiver funktioniert der Algorithmus. Zwar ist das Einsparungsverhältnis bei WebP im Test minimal schlechter als bei JPG, jedoch muss berücksichtigt werden, dass die absolute Dateigröße der WebP-Bilder nur einen Bruchteil beträgt.
Je komplexer das Bild ist und je mehr feine Strukturen und Farbverläufe vorhanden sind, desto schlechter wird das visuelle Ergebnis bei niedrigeren Qualitätseinstellungen.
Je nach Motiv kann die visuelle Qualität von WebP in einigen Fällen bei gleicher Dateigröße sogar schlechter sein als bei JPG.
Details bei WebP
Besonders bei detailreichen Abbildungen fällt das Ergebnis von WebP ab. Hautporen, ein Laubwald im Winter oder die Abbildung von auf eine Wasseroberfläche auftreffendem Wind stellen hohe Anforderungen an den Codec und bringen WebP schnell an seine Grenzen. Während beim Vorschaubild nur einige Details fehlen (z.B. glattere Haut) und eigentlich nur bei genauerem Hinsehen auffallen, werden die Unterschiede bei der Vollansicht sehr deutlich.
Im verlustbehafteten Test schneidet WebP gut ab. Besonders bei Thumbnailgrößen kann das Ergebnis überzeugen. Die Dateigröße lässt sich stark verkleinern. Bei der Großansicht werden die Kompressionsartefakte und Unterschiede bei den Details jedoch schnell sichtbar.
Für die Darstellung wirklich scharfer Bilder eignet sich WebP bei hochauflösenden Bildern in dieser Qualitätsstufe nicht mehr.
Ob die Erwartungen mit höheren Qualitätseinstellungen erfüllt werden, muss im Einzelfall geprüft werden. In manchen Fällen müssen die Qualitätseinstellungen so hoch gesetzt werden, dass die WebP-Dateigröße sogar die einer JPG-Datei übersteigt.
Reales Testbild zum Prüfen der Farbtreue
Mit einem mittelmäßigen Testbild, das mit einem Smartphone unter schwierigen Lichtverhältnissen aufgenommen wurde und einen relativ hohen Grauanteil aufweist, lässt sich WebP schnell überfordern.
Bei gleicher Dateigröße weist das Bild im WebP-Format einen erkennbaren Rotstich auf. Bei weiter reduzierten Qualitätseinstellungen kommen neben der zu erwartenden Zunahme erheblicher Kompressionsartefakte auch zunehmende Farbfehler hinzu. Der Rotstich wird über das gesamte Bild hinweg intensiver. Einige Bereiche zeigen auch einen Grünstich, der bei fallenden Qualitätseinstellungen stärker auffällt. Solche Beispiele zeigen, warum vorhandene PNG- oder JPG-Bilder nicht automatisch per Batch-Prozess oder Plugin (z.B. für WordPress) konvertiert werden sollten.
Fazit
WebP ist ein leistungsstarkes Bildformat, das in erfahrenen Händen deutliche Vorteile bieten kann, jedoch als Ergänzung und nicht als Ersatz für PNG oder JPG betrachtet werden sollte.