Dieter Petereit 22. März 2018

Web-Performance steigern mit WebP

Performance ist ein Ranking-Faktor. Du musst also ansprechendes Layout und hohe Geschwindigkeit zusammenbringen. Dafür gibt es ein ganzes Bündel an Maßnahmen. Heute wollen wir dein Augenmerk auf die Bildoptimierung lenken.

Hier bei Dr. Web findest du zum Thema „Steigerung der Web Performance” sehr viel Material. Gerade WordPress-Nutzern empfehle ich wärmstens unsere fünfteilige Serie zur Performance-Steigerung mit dem Titel „High Speed: Was WordPress-Websites wirklich schnell macht”:

Heute schauen wir uns das Thema Performance-Steigerung durch Bildoptimierung einmal ganz genau an. Dabei verwenden wir den guten alten Dr. Web als Praxisbeispiel. Wir wollen uns im Detail ansehen, wieso Webp das Bildformat der Wahl ist und wie wir es am besten und unkompliziertesten integrieren.

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 waren die Googler auf der Suche nach einem alternativen Videoformat, als sie erkannten, dass sich die Keyframe-Kompression, die in Videos benötigt wird, auch ausgezeichnet für die Bildreduktion eignet. Das entsprechende Videoformat, konsequenterweise Webm genannt, erfanden sie konsequenterweise 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 digitalen 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, so dass 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ürde entbehrlich. Webp würde 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)

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 einigen 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 75 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 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, so dass ein Doppelklick auf eine heruntergeladene Webp-Datei zumindest zu dem erwarteten 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 diese 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 Apps Pngoo (Windows) und Imagealpha (Mac), sowie, für den gelegentlichen Bedarf zwischendurch, die Web-App TinyPNG.

Tinypng bietet mittlerweile ebenfalls ein WordPress-Plugin. (Screenshot: Dr. Web)

Tinypng kann mittlerweile sogar mit Animated PNG umgehen. Seit Juli 2017 unterstützt auch Googles Chrome dieses Format. Zusätzlich verstehen Safari und Firefox die bewegten Grafiken.

Gerade die verlustorientierte PNG-Kompression mit einer Pngquant-Variante, wie TinyPNG, 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 einzulassen.

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.

In diesem Beitrag haben wir dir weitere Kompressoren vorgestellt.

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.

Best Practice: 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 wir hier beim Dr. Web Magazin mit Webp gelöst haben.

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. Mehrere 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 uns die beste Lösung automatisiert liefert. Da Dr. Web mit WordPress betrieben wird, konnten wir uns 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. Du kannst voroptimieren, musst es aber nicht.

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

Wenn du Optimus nicht nur für deine eigenen Projekte, sondern auch für die deiner Kunden verwenden möchtest, musst du die Version HQ Pro erwerben, die mit jährlich 149 USD zu Buche schlägt und den identischen Funktionsumfang der Version HQ bietet. Die ebenfalls erhältliche kostenlose Version kommt für unser Anliegen nicht in Frage, weil sie die Webp-Konversion nicht beherrscht.

Optimus HQ: Hier musst du den Haken setzen. (Screenshot: Dr. Web)

Wenn wir nun an dieser Stelle angekommen sind, bringen wir noch 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 ebenfalls ein Haken zu setzen. (Screenshot: Dr. Web)

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: Dr. Web)

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 dir 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:

Eindeutiger Größenunterschied zugunsten des Formats Webp. (Screenshot: Dr. Web)

Etwa ein Drittel weniger als beim gleichen PNG ist immer drin. Betrachten wir auch noch einen Vergleich mit zugrundeliegendem JPG:

Auch zu JPG ist der Größenunterschied deutlich. (Screenshot: Dr. Web)

Das JPG, dessen Daten du in der obigen Abbildung siehst, ist das Bild der jungen Dame mit der zu weiten Hose weiter oben im Beitrag. Ich hatte das JPG bereits mit JPEGmini auf 150kb voroptimiert. Dennoch ist es Optimus gelungen, weitere 25kb aus der Datei zu pressen. Damit ist die Ausgangslage für Webp durchaus nicht einfach, denn wir vergleichen zwei optimierte Versionen miteinander. Dennoch konnte Optimus in der Webp-Variante weitere 25kb gut machen. Damit ist das Bild im Vergleich zum voroptimierten JPG ein Drittel kleiner.

Solltest du jetzt anmerken, dass 100kb immer noch groß sind, dann hast du Recht. Ich habe hier allerdings im Vorfeld keine Größenänderungen vorgenommen. Was du im Screenshot siehst, sind die Bilder mit ihrer ursprünglichen Auflösung. Optimus HQ hat diese danach noch auf die Verwendung im Theme angepasst. So kommen wir dann auf um die 40kb für die im Beitrag verwendeten Versionen.

Optimus behandelt übrigens auch alle übrigen erzeugten Thumbnails in gleicher Weise. Der Footprint, den die Bilder auf Dr. Web durch diese Behandlung hinterlassen, ist dementsprechend über alles ein rundes Drittel geringer, als er es wäre, wenn wir nur mit manueller Voroptimierung arbeiten würden. Überzeuge dich selbst und besuche Dr. Web mit dem Chrome-Browser.

Das ist ein Riesenschritt auf dem Weg zu höherer Web-Performance.

CDN: Der nächste Schritt

Im nächsten Schritt könnten wir nun noch die Anbindung der WordPress-Mediathek an ein CDN vornehmen. Wenn dir der Begriff CDN nicht recht geläufig ist, dann empfehle ich dir zum einen die große Einführung namens „Was ist ein CDN?” (in englischer Sprache) und unsere Vorstellung des Schweizer Dienstes KeyCDN bei Dr. Web.

Da wir bereits Optimus HQ und den Cache Enabler einsetzen, fehlt es nur noch an einem Account und dem weiteren Plugin CDN Enabler, das wiederum reibungslos mit den beiden vorgenannten kooperiert. Damit schließt sich der Kreis und wir verfügen über eine runde Lösung, die sicherstellt, dass unsere Inhalte weltweit in rasanter Geschwindigkeit bereitgestellt werden und entsprechend schnell geladen werden können.

Dieter Petereit

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

3 Kommentare

  1. Sehr hilfreicher Beitrag! Schade, dass die meisten Browser kontinuierlich Fortschritt bremsen und immer noch viel zu viele User Internet Explorer und Safari nutzen

  2. Solange es kein Komprimierungstool wie beispielsweise TINYPNG Gibt, das alles automatisch erledigt, finde ich das Format WEBP noch nicht reif für das derzeitige Webdesign.
    Ein Werkzeug kenne ich zwar, aber bei diesen muss man die Qualität einstellen und bei manchen Bildern kann man bis auf 20 % gehen, was eine hohe Kompression und geringe Datenmenge entspricht, aber bei anderen Bildern braucht man 70 % an Qualität, damit man keinen Qualitätsunterschied erkennt und das Ganze ist daher meiner Meinung nach nicht marktreif

  3. Für mich als Fotograf kommt für meine Homepage nur ein Format infrage: PNG.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.