WebP: Mehr Speed für Ihre Website dank kleineren Bilddateien

Auch wenn die verfügbaren Bandbreiten von Internetanschlüssen immer grösser werden: Dateigrössen zu optimieren lohnt sich. Je weniger Bits über das Netz verschickt werden müssen, umso besser. Gerade bei Bildern ist oft noch Optimierungspotenzial vorhanden. Das Bildformat WebP soll besser als JPEG und PNG sein. Doch stimmt das wirklich?

Die Geschichte

WebP wurde 2010 erstmals der Öffentlichkeit vorgestellt und seither konstant weiterentwickelt. Hinter dem Projekt steht Google, das mit dem Videoformat VP8 den Grundstein für das neue Bildformat gelegt hatte.

WebP unterstützt sowohl eine verlustbehaftete (lossy) als auch eine verlustfreie (lossless) Komprimierung und kann für statische und animierte Bilder genutzt werden. Damit kann WebP die drei im Web genutzten Bildformate JPEG, PNG und GIF ersetzen.

Wieviel spart WebP ein?

Google hat im Vergleich zu JPEG im Schnitt 25%-34% kleinere Dateigrössen gemessen. Und das bei gleichem SSIM-Index. Das heisst, die WebP-Bilder verfügen trotz kleinerer Dateigrösse über die gleich wahrgenommene Qualität wie die JPEG-Versionen.

Gegenüber PNGOUT, das PNG-Dateien komprimiert, hatten die Google-Ingenieure Dateigrösseneinsparungen von durchschnittlich 26% gemessen. Vor allem für bildlastige Websites ein schlagendes Argument für WebP. Mit den Tools ImageAlpha und ImageOptim konnten wir in unseren Tests jedoch noch kleinere Dateien im PNG-Format erzeugen, als das mit WebP der Fall war.

Kritik von Experten

Längst nicht alle Experten sind von WebP überzeugt. Kritiker zweifeln den Nutzen des Dateiformats im Alltagsbetrieb an. So sind WebP-Dateien zwar kleiner als Dateien, die ihre älteren Konkurrenzformate produzieren, verbrauchen auf dem Gerät des Betrachters hingegen auch mehr Rechenzeit bei der Darstellung. Unter Umständen schmilzt damit der durch die geringere Dateigrösse erzielte Geschwindigkeitsvorteil dahin.

Ausserdem wird kritisiert, dass mit neueren Algorithmen auch mit JPEG und PNG vergleichbar kleine Dateigrössen möglich sind. Ein weiteres Format sei damit unnötig. Die noch geringe Verbreitung zeigt sich auch im Livebetrieb: Benutzer kennen JPEG und PNG und können die Formate mit all ihren Geräten anzeigen. WebP hingegen wird nur von den Browsern Chrome und Opera ohne Plugins verstanden. Schickt ein Benutzer z.B. ein WebP-Bild per E-Mail an einen Empfänger, kann dieser oft nichts mit der Datei anfangen.

WebP auf der eigenen Website nutzen

Mit wenig Aufwand können Sie den Besuchern, die mit einem WebP-kompatiblen Browser unterwegs sind, die passende Datei anzeigen. So funktioniert’s:

Mit WordPress

Für das beliebteste CMS unserer Kunden stehen zwei Plugins zur Verfügung, mit denen sich mit wenigen Klicks WebP-Support einbauen lässt. Kombinieren Sie das Bildoptimierungsplugin Optimus und das Caching-Plugin Cache Enabler um ganz einfach WebP-Bilder auszuliefern, wenn der Browser Ihres Besuchers das Dateiformat unterstützt.

Übrigens: Wir nutzen Optimus und Cache Enabler in unserem Blog. Wenn Sie diesen Beitrag mit Chrome oder Opera lesen, sind die Bilder im WebP-Format eingebunden.

Mit Joomla

Im Einsatz mit Joomla hilft das Plugin WebP for Joomla. Es konvertiert zum einen Bilder aus den Formaten JPEG und PNG und stellt zum anderen sicher, dass die Dateien nur an Browser ausgeliefert werden, die das Format unterstützen.

Das Plugin setzt für die Umwandlung auf die GD Library, die bei allen von uns angebotenen PHP-Versionen integriert ist und den nötigen WebP-Support mitbringt.

Unterstützung selbst erkennen

Ob Ihre Besucher mit einem Browser unterwegs sind, der WebP unterstützt, können Sie mit einer Rewrite-Regel in der .htaccess-Datei erkennen:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
  RewriteRule (.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]
</IfModule>

<IfModule mod_headers.c>
  Header append Vary Accept env=REDIRECT_accept
</IfModule>

AddType image/webp .webp

Quelle: Ilya Grigorik

Kann der Browser WebP darstellen, erhält er mit dieser Regel automatisch das Bild mit der passenden Dateiendung. Das bedingt, dass Sie Ihre Bilder zusätzlich im WebP-Format auf dem Server ablegen. Am einfachsten erreichen Sie das mit einem Dienst wie Optimus, der sich über eine API ansprechen lässt und bestehende JPEG- und PNG-Bilder nach WebP konvertiert. Oder Sie konvertieren die Bilder bereits, bevor Sie sie auf den Server laden. Eine ganze Menge von Bildbearbeitungsprogrammen unterstützt WebP übrigens von Haus aus. Darunter Apps wie Sketch, Pixelmator und GIMP. Bringt Ihre favorisierte Software keine native Unterstützung mit, lässt sie sich oft mit einem passenden Plugin erweitern.

Fazit

Die Formate PNG und JPEG mag WebP zwar nicht komplett ersetzen, dazu fehlt die nötige Unterstützung in Browsern wie Firefox, Safari oder IE. Nutzen Sie ein Content-Management-System wie WordPress oder Joomla, genügt aber bereits die Installation eines Plugins um Ihre Website mit WebP auszustatten und je nach Besucher die passende Datei auszuliefern.

Steht für Ihr CMS kein Plugin zur Verfügung oder bauen Sie Ihre Website manuell? Dann ist der Aufwand ein wenig grösser, um WebP in Ihren Workflow einzubauen. Dieser Zusatzaufwand lässt sich jedoch gut automatisieren.