Vor einiger Zeit habe ich in dem Blog von Sergej Müller über das sparsame Bildformat WebP etwas gelesen. Es wird manchmal auch schon als der JPEG-Nachfolger gehandelt, aber das wird man sehen ob es das wirklich wird. Was WebP jetzt schon verspricht, bessere Qualität als JPEG bei kleinerer Dateigröße. Wie WebP funktioniert kann man bei Wikipedia und Google nachlesen. Obwohl es bis jetzt nur wenige Browser unterstützen, habe ich es heute bei mir mal eingebunden. Die Einrichtung geht schnell und unkompliziert:
Als erstes habe ich meine Nginx-Konfiguration erweitert:
location ~ ^(/wp-content/uploads.+).(jpe?g|png)$ {
if ( $http_accept ~* webp ) {
set $webp "A";
}
if ( $request_filename ~ (.+).(png|jpe?g)$ ) {
set $file_without_ext $1;
}
if ( -f $file_without_ext.webp ) {
set $webp "${webp}E";
}
if ( $webp = AE ) {
add_header Vary Accept;
rewrite ^(.+).(png|jpe?g)$ $1.webp break;
}
}
Durch diese Regel übernimmt Nginx ist die Auslieferung von WebP, sofern der Browser es kann und eine entsprechende Datei zu Verfügung steht. Gibt es keine WebP Datei oder der Browser unterstütz es nicht, wird ganz normal JPEG oder PNG ausgeliefert. Die RewriteRules hat Sergej schon für Nginx und Apache vorbereitet. Damit Nginx auch etwas mit WebP anfangen kann, muss image/webp webp; in die Datei mime.types (liegt bei mir unter /etc/nginx/) eingetragen werden. In meinem Fall gab es diesen Eintrag schon. Noch einen Tipp für alle die auch das WordPress Plugin Cachify benutzen: Die WebP-Regel muss vor der Cachify-Regel stehen!
Jetzt fehlen eigentlich nur noch die WebP-Dateien auf dem Server. Damit das neue Bildformat beim hochladen von Bilder automatisch erstellt wird, benutze ich das WordPress Plugin Optimus.io von Sergej. Das optimiert nicht nur JPEG und PNG, sondern erzeugt auch gleich die passende WebP-Datei!
Will man bestehende Bildformate auf dem Server umwandeln, der kann das mit ein paar einfachen Befehlen umsetzen. Hierfür habe ich mich dem alten CLI Tool „webconv“ bedient. Das wird leider von den Entwicklern nicht mehr weiterentwickelt, aber funktionierte auf meinem Server ohne Probleme. Das Tool gibt es für Linux und Windows zum Download. Ist das Tool installiert („chmod a+x webpconv“ nicht vergessen, sonst ist es nicht ausführbar) ist die Syntax ganz einfach:
Usage: webpconv [-output_dir DIR] [-format FORMAT] [-quality 0..100] input_file(s)
Converts the input_file(s) to WebP or other format
Anhand der Beispiele bekommt man schnell alle bestehenden JPEGs und PNGs auf dem Webserver ins WebP-Format konvertiert:
webpconv /home/user/images/img.png
Erzeugt eine WebpPVersion „img.webp“ von der PNG-Version „img.png“ im gleichen Verzeichnis. Ob es wirklich Sinn macht jedes PNG oder JPG Bild in WebP umzuwandeln, muss jeder selber für sich entscheiden. Am besten einfach mal ausprobieren.