Performanceoptimierung durch alternatives Bildformat WebP

Das neue Bildformat „WebP“ schickt sich an, der Nachfolger von JPG zu werden. Dabei will das neue Format mit besserer Komprimierung bei höherer Qualtität punkten. Wer das neue Format mal ausprobieren möchte, findet im folgenden Beitrag ein kleines Tutorial dazu.

Automatischer Umwandlung auf dem Webserver

Für die automatische Umwandlung der bestehenden Artikelbilder in das neue „WebP„-Format ist es am einfachsten das Kommandozeilentool „cwebp“ zu installieren, wofür es fertige Pakete gibt. Die Installation erfolgt per SSH über den Befehl

apt-get install webp

anschliessend wechselt man in den Artikelbilder-Ordner, i.d.R. ist das

cd ~/shop/images/products/main/

und gibt dann den folgenden Befehl für die WebP-Umwandlung ein

find . -regextype posix-egrep  -maxdepth 2 -type f  -iregex ‚.*\.jpg$‘ -exec cwebp -q 85 {} -o {}.webp \;

dieser wandelt dann alle Bilder automatisch um

34030.jpg -> 34030.jpg.webp

Wenn auf dem Server keine Möglichkeit besteht die Umwandlung durchzuführen, dann kann man dies, z.B. auf dem Windows-PC mit IrfanView im Batchbetrieb erledigen, dazu sind die Format-Plugins zu installieren.

Auslieferung über .htaccess

Um die Bilder jetzt auszuliefern, ist die folgende .htaccess in den Order „/shop/images/products/main/“ zu legen:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_FILENAME}.webp -f
  RewriteRule ^(.*)$ $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

Browser-Unterstützung

Sollte der verwendete Browser (z.B. Chrome) „WebP“ akzeptieren, werden die neuen WepB-Bilder anstelle der JPG-Bilder ausgeliefert – ohne daß ein Eingriff am Shop notwendig ist. Firefox unterstützt das Format bis dato nicht.

Weitere Informationen zum Format finden sich unter anderem bei Wikipedia – inkl. einer kritischen Betrachtung.

Die Dateigrößen unterscheiden sich je nach Bildinhalt zwischen 30% und 50% – über die Entwickler-Console des jeweiligen Browsern kann leicht den Unterschied prüfen, indem man die Gesamtübertragungsmenge mit und ohne .htaccess-Datei vergleicht. Daraus ergibt sich ein schöner Performance-Vorteil gegenüber JPG-Bildern, ohne großen Aufwand.

Größenvergleich im Demoshop

Im Demoshop liegt die Gesamtmenge einer Suchergebnisseite (12 Artikel) mit WebP bei ca. 150kb und mit JPG bei ca. 180kb. Wobei derzeit eher mehr Bilder pro Blätterseite verwendet werden, was den Performance-Vorteil noch deutlicher erhöht.