Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Ratgeber

Webp ganz einfach: Googles Bildformat im Überblick

WebP arbeitet drucklos. (Foto: Pixabay)

Möchtest du auf sehr unkomplizierte Art und Weise deine Website beschleunigen und Bandbreite sparen, dann ist das Bildformat Webp einen näheren Blick wert.

Wann und warum entstand Webp?

Schon vor über fünf Jahren stellte Google das Bildformat Webp als Alternative zu JPG und PNG vor. An sich war man im Hause Google auf der Suche nach einem alternativen Videoformat gewesen, als man erkannte, dass sich die Keyframe-Kompression, die in Videos benötigt wird, auch ausgezeichnet für die Bildreduktion eignet. Das Videoformat, konsequenterweise Webm genannt, fand man ebenfalls. Sowohl Webp als Bildformat wie Webm als Videoformat basieren in Teilen ihrer Funktionalität auf dem Videocodec VP8.

Betreiber großer Datacenter sind naturgemäß immer daran interessiert, Bandbreite zu sparen. Die einfachste Methode, dies zu erreichen, ist, kleinere Dateien auszuliefern. In Anbetracht der Dominanz von Bildern im modernen Web, ist es naheliegend, an diesem Punkt anzusetzen. Denn immerhin machen Bilder im Schnitt 64 Prozent des Gesamtdateigewichts einer Website aus.

Endlich wieder Platz in der Hose mit WebP. (Foto: Pixabay)
Endlich wieder Platz in der Hose mit WebP. (Foto: Pixabay)

Webp sollte nun also die Vorteile von Jpg und Png in einem einzigen Dateiformat vereinen. Der größte Vorteil von Png ist dabei die Möglichkeit, Transparenz in Form des Alphakanals zu bieten, ein Feature, das Jpg nicht leistet. Der größte Vorteil von Jpg hingegen ist es, sehr komplexe Bilder, zwar mit Verlusten, aber immerhin sehr effektiv verkleinern zu können. Png konnte nur ohne Verluste speichern, sodass der Seitenbetreiber stets fachlich qualifiziert wählen muss, welches Format er für welche bildliche Darstellung einsetzen sollte.

Mit nur einem einzigen Bildformat würde diese Wahl leichter. Wissen um die Hintergründe der unterschiedlichen Formate würden entbehrlich. Webp wird es schon richten.

Google verwendete das neue Bildformat konsequent für seinen Chrome-Web-Store und seine mobilen Google+-Apps. Damit konnten insgesamt Bandbreitenersparnisse von über 50 Terabyte Daten pro Tag erreicht werden. Das mag als Beleg der Effizienz des Formats wohl ausreichen.

Je leichter die Seiten, desto schneller die Darstellung. (Foto: Pixabay)
Je leichter die Seiten, desto schneller die Darstellung. (Foto: Pixabay)

Webp ist nicht neu, aber seiner Zeit voraus

Dennoch konnte sich Webp in der Folgezeit nicht durchsetzen. Das lag an der mangelnden Unterstützung durch die Browserhersteller. Bis zum heutigen Tage unterstützen nur die Chrome-Browser auf Desktop und Mobile, sowie die Opera-Browser das Format.

Vor fünf Jahren war das noch ein größeres Problem als heutzutage. Glaubt man den Statistiken des Dienstes Caniuse zur Verbreitung des Webp-Standards sind heute aufgrund der gestiegenen Marktanteile des Chrome-Browsers weltweit rund 70 Prozent aller Nutzer in der Lage, Webp zu sehen. In Deutschland beträgt der Anteil nach der gleichen Statistik noch relativ magere 48 Prozent. Im Oktober 2015 erschien im Smashing Magazine ein Beitrag zu Webp, für den die Autoren diverse unterschiedliche Nutzungsstatistiken ausgewertet hatten. Sie kamen damals zu dem Ergebnis, dass im Mittel etwa 59 Prozent aller Nutzer Webp problemlos darstellen können.

Damit wird das Format perspektivisch immer interessanter. Das war allerdings zum Zeitpunkt der Erstvorstellung noch nicht so. Insofern arbeitet die Zeit für Webp. Dennoch muss man festhalten, dass Microsoft, Mozilla und Apple Webp derzeit nicht unterstützen. Mozilla und Apple sollen allerdings bereits ernsthafte Tests und Experimente durchführen. Es wäre also gut möglich, dass am Ende nur wieder Microsoft zurückbleibt. Das sind Webentwickler ja seit gut 20 Jahren gewöhnt.

Gründe gegen und Alternativen zu Webp

Das dominante Bildformat unserer Tage ist Jpg. Daran ist nichts zu rütteln. Jede Kamera in jedem Smartphone der Welt speichert in diesem Format. Jpg ist quasi ein Synonym für digitales Bild. Deshalb kannst du Jpg mit einem ganzen Haufen verschiedener Bildbearbeitungsprogramme öffnen und bearbeiten, Webp aber nicht.

Webp ist als reines Bildformat ein Exot

Chrome-Nutzer haben zumindest insofern kein Problem, als das sich Chrome während der Installation als Standardbetrachter für Webp einrichtet, sodass ein Doppelklick auf eine heruntergeladene Webp-Datei zumindest zu einem Ergebnis führt. Andere Nutzer dürften durchaus verdutzt sein, wenn sie ein Bild auf der Festplatte nicht öffnen können.

Dieser Umstand führte vor einigen Jahren dazu, dass Facebook einen Kurztest mit dem neuen Format abbrach. Seine Nutzerinnen und Nutzer wussten schlicht nicht damit umzugehen. Fairerweise muss man sagen, dass die Problematik nur für soziale Netzwerke von Relevanz ist. Dort laden Nutzer nämlich ganz offenbar von anderen gepostete Bilder herunter, um sie dann wieder hochzuladen und selber weiter zu teilen. Der Nachteil, den Webp in diesem Zusammenhang bietet, kann für den Betreiber einer Website durchaus ein Vorteil sein. Auf diese Weise erhältst du nämlich quasi einen Diebstahlschutz für deine Bilder auf ganz kleiner Flamme.

Für Jpg und Png gibt es leistungsfähige Kompressoren

Mittlerweile gibt es Software, die sich auf die Kompression der gängigen Formate spezialisiert hat. Ich persönlich verwende für Jpg die Software und Web-App Jpegmini und für Png die Software Pngoo (Windows) und Imagealpha (Mac), sowie die Web-App Tinypng.

TinyPNG bietet mittlerweile ebenfalls ein WordPress-Plugin. (Screenshot: t3n)
Tinypng bietet mittlerweile ebenfalls ein WordPress-Plugin. (Screenshot: t3n)

Tinypng experimentiert mittlerweile sogar mit Animated Png, nachdem Google vor wenigen Monaten erklärt hat, sich in diese Richtung bewegen zu wollen. Gerade die verlustorientierte Png-Kompression mit einer Pngquant-Variante kann Webp in vielen Fällen in Sachen Dateigewicht schlagen, wenn auch nicht um Längen. Diese Kompressoren lassen es vielen Seitenbetreibern überflüssig erscheinen, sich auf das Format Webp einlassen zu müssen.

Microsoft hält offenbar immer noch an Jpeg extended range als eigenem Vorschlag fest und unterstützt es seit dem Internet Explorer 11 und natürlich in Edge. Damit ist das Unternehmen aus Redmond allerdings auf weiter Flur alleine und es sieht nicht so aus, als würde sich daran etwas ändern.

Die Bildqualität variiert (angeblich)

Im Grunde ist es bei Bildern ja so, dass man als Seitenbetreiber zwar die kleinstmögliche Dateigröße, dabei aber die bestmögliche Qualität anstrebt. Spielte Bandbreite keine Rolle, würden wir alle nicht optimieren – soviel Ehrlichkeit muss sein. Webp will nicht das perfekte Bildformat, sondern lediglich der beste Kompromiss sein.

Dem Format schlägt einiges an Kritik entgegen, gerade wenn es um die Beurteilung der Bildqualität geht. Die sei umso schlechter, je komplexer das zu komprimierende Bild sei, hört man des Öfteren. Nach meiner eigenen Erfahrung ist das so nicht richtig.

Es stimmt, dass die Bildqualitäten im direkten Vergleich nominell gleicher Kompressionslevel tendenziell bei Jpg etwas besser sind. Das liegt indes allein darin begründet, dass man ein Jpg mit 80% Qualität nicht einfach mit einem Webp mit 80% Qualität vergleichen kann. Dazu ist die Vorgehensweise beider Verfahren zu unterschiedlich.

Von daher mag es einem erscheinen, als sähe ein Jpg mit kleinerer Qualitätsstufe besser aus als ein Webp mit höherer Qualitätsstufe. Entscheidend kann aber doch nur die Dateigröße sein. Und wenn sich dann zeigt, dass ein Webp mit 80 Prozent Qualität immer noch kleiner ist als ein Jpg mit 40 Prozent Qualität, dann erübrigt sich diese Diskussion ganz schnell.

Google hat auf seiner Developers-Seite eine Galerie mit Vergleichsbildern zu bieten. Überzeuge dich selbst.

Praxisbeispiel: Webp auf Dr. Web

Wenn du ein Webentwickler bist, der eine weitgehend statische Seite für einen Kmu-Kunden erstellen soll, dann wirst du möglicherweise eher konventionell an die Sache herangehen. Du wirst dir die Originale der einzusetzenden Bilder geben lassen oder sie selbst erstellen. Dann wirst du zu einem Zeitpunkt X die erforderlichen Auflösungen erstellen und in den erforderlichen Formaten optimiert abspeichern.

Solange dein Kunde nicht selber Bilder hochladen kann, ist das eine Vorgehensweise, die ich selber jederzeit genauso bevorzugen würde. Was aber passiert, wenn der Kunde oder andere Projektbeteiligte eine nicht abzuschätzende Menge an Bildern im laufenden Betrieb werden hochladen können? Das ist ein Problem, vor dem jeder Betreiber eines Online-Magazins steht, und das ich für das Dr. Web Magazin mit Webp gelöst habe.

Bilder sind das Salz in der Suppe eines Beitrags. Entsprechend soll es auch nicht nur eines sein, sondern die Anzahl der Bilder pro Beitrag muss sich der Textmenge sinnvoll anpassen. Konventionell gedacht müsste jetzt jeder Autor fundierte Kenntnisse in Bildformat-Auswahl und -Optimierung haben. Spätestens beim Marketing-Experten unter den Schreibern ist diese Anforderung nicht mehr erfüllt.

Was tun? Sicherlich kannst du deine Autoren konsequent schulen und immer wieder dazu anhalten, auf optimierte Bilder zu achten. Allein der Erfolg wird mindestens durchwachsen sein. Mehr als ein paar Dutzend Male habe ich schon eigenhändig ganze Galerien wieder offline genommen und nachoptimiert. Das kann man jedoch nicht ständig tun, denn der Kontrollaufwand wird zu groß.

Schlussendlich suchte ich nach einer Lösung, die mir die beste Lösung automatisiert liefert. Da Dr. Web mit WordPress betrieben wird, konnte ich mich einer sehr einfachen Möglichkeit erfreuen. Diese besteht in der Kombination der beiden Plugins Optimus HQ und Cache-Enabler von Keycdn.

Optimus HQ ist ein Plugin, das sich automatisch um die Bildgrößenoptimierung kümmert, ohne dass der Uploader sich in irgendeiner Weise darum Gedanken gemacht haben muss. Stattdessen werden die Bilder schlicht über den Dialog hochgeladen und bereitgestellt. Die Optimierung nimmt Optimus im Hintergrund selber vor.

In der kostenpflichtigen HQ-Variante, die allerdings bei sehr überschaubaren 19 Dollar pro Jahr liegt, ist Optimus HQ in der Lage, Webp-Dateien zusätzlich zu den übrigen Formaten zu erzeugen.

Optimus HQ: Die WebP-Unterstützung ist der kostenpflichtigen Version vorbehalten. (Screenshot: t3n)
Optimus HQ: Die Webp-Unterstützung ist der kostenpflichtigen Version vorbehalten. (Screenshot: t3n)

An dieser Stelle kommt das Caching-Plugin Cache-Enabler ins Spiel, das vollkommen kostenfrei verwendet werden kann und in Teilen auf Sergej Müllers Cachify basiert. Cache-Enabler lässt sich nämlich so konfigurieren, dass es die erzeugten Webp-Formate mitcacht und entsprechend befähigten Browsern ausliefert.

Cache-Enabler: Hier ist ein Haken zu setzen. (Screenshot: t3n)
Cache-Enabler: Hier ist ein Haken zu setzen. (Screenshot: t3n)

Dazu ist keine weitere Parametrisierung erforderlich. Direkt nach der Installation der beiden Plugins und Aktivierung der Webp-Unterstützung sieht der Aufruf der verwendeten Dateien im Chrome so aus:

Chrome-Nutzer bekommen automatisch WebP geliefert. (Screenshot: t3n)
Chrome-Nutzer bekommen automatisch Webp geliefert. (Screenshot: t3n)

Die Auslieferung anderer Formate an andere Browser erfolgt ebenfalls automatisch. Einfacher kann der Einsatz von Webp nicht sein. Der einzige Haken ist, dass Optimus ausschließlich ohne Verluste komprimiert. Auf diese Weise verschlechtert sich die Bildqualität durch die Behandlung zwar überhaupt nicht, der allerletzte Kick an Optimierung bleibt mir indes verwehrt.

Wenn ich mir jedoch anschauen möchte, was Optimus aus den Dateien macht, dann will ich mich mal besser nicht zu laut beklagen. Dieser Screenshot stammt aus dem Uploadverzeichnis:

Eindeutige Größenunterschiede zugunsten des Formats WebP. (Screenshot: t3n)
Eindeutige Größenunterschiede zugunsten des Formats Webp. (Screenshot: t3n)

Ein Drittel weniger als beim gleichen Jpg ist, wie du siehst, immer drin. Und dabei ist zu beachten, dass ja das Jpg ebenfalls optimiert wurde. Wir vergleichen also zwei optimierte Versionen miteinander. Optimus behandelt übrigens auch alle erzeugten Thumbnails in gleicher Weise. Überzeuge dich selbst und besuche Dr. Web mit dem Chrome-Browser.

Webp: weitere Einsatzmethoden

Anstelle des CacheEnabler-Plugins und der Optimus-Lösung könntest du mit einer Konfigurationsanweisung in der .htaccess dafür sorgen, dass bei Verfügbarkeit eines zu einem Jpg oder Png korrespondierenden Webp-Files eben jenes verwendet werden soll. Das sähe für Apache so aus:

RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
RewriteRule ^(wp-content/uploads.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]
Header append Vary Accept env=REDIRECT_accept

AddType image/webp .webp

Und für Nginx so:

# http config block
map $http_accept $webp_ext {
default "";
"~*webp" ".webp";
}

# server config block location ~* ^/wp-content/.+\.(png|jpg)$ { add_header Vary Accept; try_files $uri$webp_ext $uri =404; }

Um die Optimierung müsstest du dich bei dieser Lösung natürlich ebenso selber kümmern, wie um die Bereitstellung korrespondierender Dateien. Schau dir daher Webponize für den Mac und Webpconv für Windows an. Beide Apps sind kostenfrei zu verwenden. Gleiches gilt für dieses Photoshop-Plugin.

WebPonize für Mac: unkompliziertes Konvertieren ist garantiert. (Screenshot: WebPonize)
Webponize für Mac: unkompliziertes Konvertieren ist garantiert. (Screenshot: WebPonize)

In einer konventionellen Website, also außerhalb eines Content-Management-Systems, bindest du Webp über das Picture-Element ein. Das kann so aussehen:

<picture>
source srcset="beliebigesbild.webp 1x" type="image/webp">
<img src="beliebigesbild.jpg">
</picture>

Damit endet mein Ausflug in die Webp-Welt. Wenn Fragen offen geblieben sind, stell sie in den Kommentaren.

Bitte beachte unsere Community-Richtlinien

3 Reaktionen
Henry

Guter Beitrag, was implizit eine Empfehlung für die Dr. Web Seite darstellt!

gedankenklar

Dem schließe ich mich an. Super Beitrag den ich mal wieder bis zum Ende gelesen (nicht gescannt) habe.

nazeK

Endlich mal wieder ein lohnender Beitrag bei t3n.

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Finde einen Job, den du liebst