Anzeige
Anzeige
Ratgeber
Artikel merken

Webp ganz einfach: Googles Bildformat im Überblick

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.

8 Min. Lesezeit
Anzeige
Anzeige

WebP arbeitet drucklos. (Foto: Pixabay)

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige
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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
3 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

oekoplatt

Ich bin gerade auf diese Seite geraten und habe mir entspr. der Empfehlung „besuche Dr. Web“ die Seite „https://www.drweb.de/magazin/&#8220; mit Chromium angesehen: kein webp gefunden.
Ist der Artikel überholt?

Antworten
Dieter Petereit

Hallo. Danke für deinen Kommentar. Nein, der Beitrag ist nicht überholt, aber bei Dr. Web ist ein anderer Verantwortlicher an den Schalthebeln der Technik. Als ich noch die Räder gedreht habe, war ich bemüht, die beste Performance rauszuschrauben, wozu eben auch WebP gehörte. Jetzt herrschen dort andere Prioritäten vor.

Das ändert aber nichts an der generellen Richtigkeit des Beitrags. Nur das Beispiel kann leider nicht mehr besichtigt werden.

Antworten
Tina

source srcset=“beliebigesbild.webp 1x“ type=“image/webp“>

Damit wird kein webp angezeigt.

Vor dem „source“ fehlt ein „<".

So ist's richtig:

Antworten
Abbrechen

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige