WebP – das Google Bildformat für schnellere Websites

Klassischerweise werden für Bilder auf Websites die Formate jpeg, png, svg, oder gif verwendet. Neu gibt es ein von Google definiertes Bildformat mit der Dateiendung  *.webp, welches die Dateigrösse ohne Verlust nahezu halbieren kann. Erfahren Sie in diesem Artikel die Vor- und Nachteile von webp und welche Rolle das schnelle Laden von Bildern auf das Google Ranking hat.

Ein durchschnittlicher Besucher einer Website wartet maximal 3 Sekunden, bevor er die Website wieder verlässt. Gerade bei Websites von Fotografen mit Ihren Portfolios, welche viele Bilder beinhalten, kann die Ladezeit zu einem Problem werden.

Einfluss der Ladezeit Ihrer Website auf das Google Ranking

Im Algorithmus von Google, welcher das Ranking und damit die Position Ihrer Website bei einer Suchanfrage bestimmt, hängt von rund 200 Faktoren ab. Was genau diese Faktoren beinhalten, ist natürlich ein gut behütetes Geheimnis. Trotzdem gibt Google klare Hinweise darauf, dass die Ladezeit Ihrer Website eine immer wichtiger werdende Rolle spielt. „Make the Web faster“ ist also angesagt. Je schneller eine Website geladen ist, desto schneller erhält der Nutzer die Informationen, die er sucht – was wiederum das Kerngeschäft von Google ist. Dazu kommt der immer grössere Anteil an mobilen Benutzern mit Smartphones und Tablets, welche auf meist ein beschränktes Datenvolumen und/oder Geschwindigkeit zur Verfügung haben.

Auf pixolum.com beispielsweise greifen knapp 50 % der Besucher mit mobilen Geräten zu. Aus diesem Grund hat Google das Bildformat webp entwickelt, mit welchem gegenüber JPEG rund 25-34 % an Bildgrösse eingespart werden können.

Die Vorteile und Nachteile von webp als Bildformat

Sehen sie einen Unterschied?

Kennst du schon meine 52 weltbesten Spickzettel?

• Mein ganzes Fotowissen
• Bessere Fotos in 5 Minuten
• Referenz zum Nachschlagen
• Kompakt, immer dabei!
• Rabatt nicht verpassen!-50%

Ou ja, zeig mal!

---

Vielen Dank an Patrick Stoll, dass wir dieses Bild verwenden dürfen.

JPEG 244kB

WebP 170 kB

(dieses Bild wird Ihnen nicht angezeigt, falls Ihr Browser webp nicht unterstützt)
Die Vorteile von webp

• Einsparung der Bildgrösse gegenüber JPEG ist 25-34 % (mit gleichem SSIM Index)
• Einsparung der Bildgrösse gegenüber PNG ist 26 % (je nach Bild bis 80 %)
• Webp unterstützt verlustfreie Transparenz und Animationen
• Auch bei hoher Kompression sieht webp besser aus als JPEG
• Webp verringert die Ladezeit Ihrer Website und spart Traffic
• Webp kann als Bildschutz dienen, da es aktuell ausschliesslich fürs Web verwendet werden kann und eine Umwandlung bestimmte Tools erfordert. Eine webp Datei kopieren ist natürlich möglich, da das Format aber noch nicht sehr bekannt ist, kann es eine abschreckende Wirkung für Bilderdiebe haben. Mehr über den Schutz Ihrer Bilder im Internet mit einigen Methoden finden sie hier

Die Nachteile von webp

• Es sind Tools oder Plugins notwendig, um ein Bild in das webp Format umzuwandeln
• Noch nicht alle Browser unterstützen webp, daher muss gleichzeitig auch immer noch ein anderes, gängiges Bildformat angeboten werden. Welche sich dazu am besten eignen, findest Du in unserem Artikel zu den verschiedenen Bildformaten mit ihren Vor- und Nachteilen.
• Weniger geeignet für Bilder mit sehr vielen Details

Wie funktioniert die Kompression mit Webp?

Die Kompression wird durch prädiktive Codierung (Vorhersagecodierung) erzielt, die gleiche Methodik wie durch den VP8 Video Codec. Grundsätzlich werden die Pixel in Blöcke von jeweils 4×4 Pixel aufgeteilt (die Blöcke können aber auch variable Grössen haben). Auf Basis benachbarter Pixelblöcke werden die Werte für einen Nachbarblock „vorhergesagt“. Eine webp Datei besteht also aus VP8 oder VP8L Bilddaten und einen Behälter auf der Grundlage RIFF.

Tools zur Umwandlung ins webp Format

Mittlerweile gibt es einige Tools oder webp Erweiterungen für Photoshop, die sich teilweise aber noch in Entwicklung befinden. Hier eine kleine Auswahl:

• Photoshop mit WebP-Addon
• Optimus API
• Pixelmator
• IrfanView
• GIMP WebP-Plugin

Für WordPress Nutzer gibt es ein Plugin names optimus, welches automatisch webp Dateien erstellt und zudem auch automatisch JPEG Dateien verlustfrei komprimiert. Optimus bietet auch eine API an, welche man nutzen kann um JPEG oder PNG Dateien automatisch in WEBP umzuwandeln. Wir von pixolum haben die Optimus API genutzt, um rund 4000 Bilder automatisch in webp umzuwandeln und JPEG-Bilder verlustfrei zu komprimieren.

Das richtige Bild ausliefern

Aktuell unterstützen Chrome und Opera das webp-Format. Firefox ist ein möglicher nächster Kandidat, welcher in Zukunft ebenfalls webp unterstützen könnte.

Falls der Besucher mit einem Browser ohne webp-Unterstützung wie z.B. Internet Explorer auf Ihre Website zugreift, soll das normale Bild (jpeg,gif,png) angezeigt werden. Falls der Browser aber webp unterstützt, soll das Bild automatisch durch eine webp-Datei mit dem gleichen Namen ersetzt werden, welche sich ebenfalls auf dem Webspace befindet. Das kann mit einem Eintrag in der .htaccess Datei auf dem Webserver erreicht werden.

<IfModule mod_rewrite.c>
    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]
</IfModule>

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

AddType image/webp .webp

Fazit

Ladezeiten einer Website sind ein wichtiger Ranking-Faktor bei Google. Daher lohnt es sich gerade für Fotografen mit vielen grossen Bildern auf der Website, diese zu optimieren. Webp bietet sich als neues Bildformat von Google an, um die Bildgrössen stark zu reduzieren. Ein klarer Nachteil ist, dass webp noch nicht von allen Browsern unterstützt wird. Dennoch experimentiert auch Facebook zurzeit mit dem webp-Format. Es bleibt also spannend!