Was ist das WebP-Format? Vor- und Nachteile des Bildformats für Fotografen

Vor einiger Zeit wurde ich angesprochen, dass meine Fotografien nicht mehr im gängigen *.jpg, *.gif oder *.png auf meiner Webseite vorliegen. Das stimmt. Ich habe das Format mit der letzten technischen Aktualisierung meines WordPress-Blogs umgestellt.

Was ist WebP Bildformat?

Laut meiner Recherche wurde schon 2010 das WebP-Format („Weppy“ ausgesprochen) angekündigt und seitdem stetig erweitert. Ich muss gestehen, das ich es selber erst seit einem Jahr kenne und es mir in letzter Zeit immer mehr in Online-Magazinen und Blogs aufgefallen ist, die dieses Format verwenden. Mittlereile wird es auch von allen gängigen Browsern wie Chrome, Microsoft Edge, Firefox, Opera und Safari unterstützt.

Warum habe ich umgestellt? Vor- und Nachteile

Wenn man in den einschlägigen Foren unterwegs ist, bekommt man das Gefühl, dass das neue WebP Format eine eierlegende Wollmilchsau für Fotos und Grafiken im Internet ist. Ich habe es in meinem Blog ausprobiert und die Ladegeschwindigkeit meines Blogs gemessen. Aufgrund meiner vielen Fotografien war die Ladezeit, vor allem wenn man wie in Deutschland immer noch üblich, eine 3000er Dorfleitung sein eigen nennt, nicht so toll. Mit den WebP-Format konnte ich das verbessern.

Was mir aber besonders gefallen hat: Ich verwende sowohl gerne transparente png-Dateien als auch bewegte Gifs. In meinem Blog wirst du immer wieder darüber stolpern, da ich es liebe, animierte Fotografien auf meinem Smartphone zu erstellen. Das WebP-Format vereint nun Transparenzen und Bewegung. Beides konnte man bisher nicht vereinen, mit WebP ist das möglich. Herstellen kann man diese animierten Bilder mit transparenten Bereichen zum Beispiel in Photoshop.

Zusammengefasst

Vorteile

• Schnellere Ladezeiten: Aufgrund der kleineren Dateigrößen laden Seiten mit Bildern im WebP-Format schneller. Wusstest du, dass jeder vierte Besucher deine Seite sofort verläßt, wenn sie nicht innerhalb von 4 Sekunden geladen ist? Webp ist ein Bildformat, das bis zu 30 Prozent der Dateigröße im Vergleich zu *.jpg einspart.

• Weniger Medienspeicher: Die verbesserte Komprimierung von WebP bedeutet für dich, dass du weniger Speicher bei deinem Provider benötigt wird. Dies ist vor allem für uns Fotografen wichtig, wenn wir viele Fotos zeigen.

• Transparenz und Animation: Wie ich weiter oben erklärt habe, ist das WebP-Format das einzige, das die transparenten Hintergründe von*.png und die Animationsmöglichkeiten von *.gif unterstützt.
• Wichtig für die Suchmaschinenoptimierung: WebP kann EXIF- und XMP-Metadaten enthalten

Nachteile

• Durch die Komprimierung sinkt die optische Qualität ein bisschen. Ich finde das aber nicht so schlimm, da man meine Bilder aus dem Internet nicht drucken soll.

• Die Bilder sind nach einem Download mit einem „normalen“ Bildbearbeitungsprogramm nicht zu öffnen bzw. anzuzeigen. Man braucht eine spezielle Software, um WebP-Formate anzuzeigen, zu bearbeiten und abzuspeichern. Ich persönlich nehme Photoshop und das dazugehörige Plugin.

WebP-Plugin in Photoshop

1. Lade dir hier die das Photoshop WebP Plugin herunter:

• Windows(x64): 
  https://github.com/webmproject/WebPShop/releases/download/v0.3.3/WebPShop_0_3_3_Win_x64.8bi
• macOS (extract the ZIP): 
  https://github.com/webmproject/WebPShop/releases/download/v0.3.3/WebPShop_0_3_3_Mac_Universal.zip

2. Speichere die Datei in folgendes Verzeichnis und öffne erst danach Photoshop

• Windows: \Program Files\Common Files\Adobe\Plug-Ins\CC

• macOS: /Library/Application Support/Adobe/Plug-Ins/CC

3. Bearbeite dein Animation im Fenster „Zeitleiste“ wie gehabt. Wenn du magst, arbeite mit Transparenzen.

4. Ganz wichtig, ansonsten funktioniert es nicht. Du musst die einzelnen Animations-Ebenen wie folgt benennen: Frame 0 (100 ms), Frame 1 (100 ms), Frame 2 (100 ms) Die Ebenen müssen gerastert sein.

5. Gehe anschließend unter „Speichern unter“ und wähle bei den Dateiformaten „WebPShop“ aus. Anschließend öffnet sich ein Extra-Fenster, indem du deine Einstellungen wie Qualität einrichten kannst. Wichtig: Die Funktionen „Fürs Web speichern“ funktionieren für WebP in Photoshop nicht.

6. Kontrolliere deine Animation im Browser.

Keine Lust auf Photoshop oder ähnliches?

Wenn du nur ab und zu mal ein gif, png oder Video in WebP umwandeln möchtest, dann geht das auch online. Ich habe verschiedene Converter getestet und dieser hat gute Arbeit geleistet (bei anderen war ich nicht zufrieden mit der Komprimierung, da die Dateien nicht signifikant kleiner waren).

https://ezgif.com/gif-to-webp

Einrichten in WordPress

Der Vorteil von WebP-Formaten ist, dass du nicht jedes einzelne Foto oder Grafik, das im jpg/gif/png Format vorliegt, per Hand in einer Bildbearbeitungs-Software umwandeln musst. Ich nutze stattdessen ein WordPress-Plugin. Das heißt, ich exportiere aus Lightroom wie gehabt meine Fotografien als komprimiertes *.jpg und lade das Bild in meine WordPress Mediathek. Das Plugin WP-Optimize wandelt automatisch meine Bilder in *webp um.

Unter dem Menüpunkt „Bilder“ im Plugin WP-Optimize habe ich dafür den Menüpunkt: „Create WebP version of image“ aktiviert. Dieses Plugin nutze ich aber auch, um meine Bilder zu komprimieren und meine Datenbank regelmäßig aufzuräumen.

Da ist ein Beispiel für eine transparente, animierte WebP-Datei. Die Datei ist Quadratisch, die Ränder links und rechts sind transparent, sodass der gelbe Hintergrund durchscheint.