WebP – Effizientes Bildformat für schnellere Seiten

Die Ladezeit einer Webseite hat nicht nur Einfluss auf das Ranking bei Google, sondern trägt vielmehr auf die subjektive Wahrnehmung der Nutzer bei. Je schneller eine Seite und deren Bilder aufgebaut werden, umso schneller interagieren die Besucher damit. Nicht zu vergessen sind Benutzer mit mobilen Geräten wie Smartphones und Tablets, denn diese haben meist nur ein eingeschränktes Datenvolumen bzw. reduzierte Geschwindigkeit zur Verfügung.

Bandbreite zu sparen und bei Grafiken nur die benötigte Größe auszuliefern ist ein wichtiger Baustein zur Verbesserung der Ladezeit. Aus diesem Grund hat Google das Bildformat WebP entwickelt, mit welchem gegenüber anderen Formaten rund ein Drittel an Bildgröße eingespart werden kann.

WebP existiert seit fast 10 Jahren und ist in gängigen aktuellen Browsern implementiert, ausgenommen Safari und InternetExplorer. Permanent aktualisierte Informationen zur Browser-Unterstützung von WebP finden Sie auf caniuse.com
Google selbst verwendet das Bildformat konsequent für seinen Chrome-Web-Store.

Eigenschaften von WebP

  – Einsparung der Bildgröße gegenüber JPEG: 25-34% (laut Google)
  – Einsparung der Bildgröße gegenüber PNG: 26-80% (laut Google)
  – Einsparung der Bildgröße gegenüber GIF:  19-64% (laut Google)
  – Komprimierung (verlustbehaftet oder verlustfrei)
  – Transparenz, 8-Bit-Alphakanal
  – WebP kann EXIF- und XMP-Metadaten enthalten

Einige Nachteile des Bildformats

  – Umwandlung nicht mit jeder Software möglich, angepasste Tools oder Plugins notwendig
  – Die Umwandlung ist deutlich komplexer und rechenintensiver
  – Nicht alle Browser unterstützen WebP

Dadurch ist die Einbindung/Verwendung in Webseiten komplexer und man benötigt eine alternative Lösung und Konfiguration, wenn WebP nicht genutzt werden kann.

Für die meisten CMS existieren Plugins und Erweiterungen, über die bereits auf dem Webspace vorhandene WebP-Dateien ausgeliefert werden können. Einige Tools unterstützen auch die Umwandlung in das WebP-Format, meist jedoch nur über Dienste eines Drittanbieters (oft kostenpflichtig). Die Erstellung von animierten WebP sowie die Umwandlung von animierten GIFs bieten nur die wenigsten Anbieter überhaupt an.

Auf ezgif.com finden Sie eine Vielzahl von Tools für die Erstellung bzw. Umwandlung von WebP-Dateien und können diese ohne Installation direkt im Browser nutzen.

WebP im Webhosting-Bereich

WebP wird heutzutage eigentlich bei allen Webhostern unterstützt und ist serverseitig in den meisten Tools direkt verfügbar. So ist auch bei uns der WebP-Support in zahlreichen Grafik-Anwendungen und Bibliotheken nativ vorhanden wie z.B. GraphicsMagick

Nicht üblich, da – wie schon erwähnt – die Umwandlung von bestehenden Grafiken in WebP sehr rechenintensiv ist, ist hingegen die Möglichkeit, direkt auf dem Server eine Konvertierung vorzunehmen. Aus diesem Grund nutzen die kostenpflichtigen Plugins dafür spezielle Server dieser Anbieter stehen.

Bei uns können Sie die Umwandlung jedoch direkt auf dem Server vornehmen. Nutzen Sie Skripte oder direkt die SSH-Kommandos auf der Konsole. Wir nutzen dabei die Bibliotheken von Google für WebP:

  – cwebp ermöglicht die Komprimierung einer Bilddatei entweder verlustfrei oder verlustbehaftet.
  – Mit gif2webp konvertieren Sie vorhandene GIFs in WebP-Dateien. Auch hierbei ist die verlustfreie oder die verlustbehaftete Codierung möglich.
  – dwebp wandelt vorhandene WebP-Dateien in andere Formate um wie PNG (Standardoption), BMP oder TIFF.
  – webpmux dient schließlich dazu, mit den erstellen WebP-Dateien zu arbeiten. Kreieren Sie Animationen oder erweitern die Bilddateien um Metadaten und ICC-Profile.

Eine Anleitung und Tipps zur Verwendung gibt es direkt bei Google:
https://developers.google.com/speed/webp/docs/using

WebP mit Apache Webserver nutzen

Nutzen Sie kein Plugin, was automatisch die Konfiguration vornimmt, finden Sie nachfolgend beispielhaft einige Codezeilen, die einfach in die .htaccess auf dem Webspace hinzugefügt werden können, damit Bilder im WebP Format ausgeliefert werden.

SetEnvIf Request_URI “\.(jpe?g|png|gif)$” REQUEST_image

RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_URI} (?i)(.*)(\.jpe?g|\.png)$
RewriteCond %{DOCUMENT_ROOT}%1.webp -f
RewriteRule (?i)(.*)(\.jpe?g|\.png|\.gif)$ %1\.webp [T=image/webp,R]

Header append Vary Accept env=REQUEST_image

AddType image/webp .webp

Erläuterung: Falls der Besucher mit einem Browser ohne WebP-Unterstützung wie z.B. InternetExplorer auf Ihre Webseiten zugreift, soll das normale Bild (jpeg, gif, png) angezeigt werden. Falls der Browser WebP unterstützt, soll das Bild automatisch durch eine WebP-Datei mit dem gleichen Namen ersetzt werden.

WebP mit nginx Webserver nutzen

Ähnlich wie beim Apache muss die Konfiguration angepasst werden, damit das Bildformat bekannt ist und ausgeliefert wird.
In der /nginx/mime.types ist im Regalfall bereits WebP eingetragen:

image/webp webp

Die “nginx.conf” wird an zwei Stellen erweitert, einmal im HTTP- und einmal im SERVER-Config-Block:

map $http_accept $webp_extension {
default “”;
“~*webp” “.webp”;
}

server {
location ~* \.(?:jpg|jpeg|gif|png|webp)$ {
try_files $uri$webp_extension $uri =404;
}
}

Hinweis: Alle Codezeilen dienen nur als Beispiel und Anhaltspunkt. Eine Garantie auf Funktion in Ihrer Umgebung kann nicht gegeben werden.