WebP nutzen und WordPress beschleunigen

Was ist WebP

WebP(Weppy) ist ein von Google entwick­eltes Dateifor­mat für ver­lust­be­haftet oder ver­lust­frei kom­prim­ierte Bilder. Es wurde 2010 einge­führt.

Als Beispiel, die Datei webdesign-webvisitenkarte-1200x800.jpg ist bere­its für das Web opti­miert wor­den. Sie ist 124 kb groß, das gle­iche Bild im WebP-For­mat ist nur 87 kb groß. Einsparung 37 kb — 29,84 %.

Kling erst­mal nicht viel, aber du musst das auf die Masse der Web­seit­en sehen.

WebP-Kompatibilität

WebP wird lei­der noch nicht von jedem Brows­er unter­stützt. Aber in Deutsch­land wer­den 71 % und weltweit 81 % der genutzten Web­brows­er unterstützt(Stand 08/2020). Die Brows­er sind u.a. Chrome, Chrome for Android, Edge, Fire­fox, Opera, Opera Mini, Safarie, iOS Safari und Android Brows­er in den aktuellesten Ver­sio­nen.

Die aktuellen Zahlen, bzw. kom­pat­i­blen Web­brows­er kann man auf fol­gen­der Seite sehen:
http://caniuse.com/#search=webp

WordPress-Plugin

Damit man nicht mit dem Grafikpro­gramm immer eine WebP-Vari­ante erstellen muss, kann man das bequem mit dem Word­Press-Plu­g­in EWWW Image Opti­miz­er automa­tisieren. Das Plu­g­in opti­miert Bilder direkt nach dem Upload in die Word­Press Mediathek. Dazu in die Ein­stel­lung des Plu­g­ins auf die den let­zen Reit­er “WebP-Ein­stel­lung” gehen und dort JPG/PNG nach WebP aktivieren.

Das Plu­g­in im offiziellen Word­Press-Verze­ich­nis: https://de.wordpress.org/plugins/ewww-image-optimizer/

WebP-Ausgabe steuern

Jet­zt muss man nur noch dafür sor­gen, das die WebP-Bilder an die passenden Web­brows­er aus­gegeben wer­den. Das macht man dann mit ein­er Weiche. Inkom­pat­i­ble Web­brows­er erhal­ten weit­er­hin JPG/P­NG-Dateien und die anderen WebP.

Apache .htaccess anpassen

<IfModule mod_rewrite.c>RewriteEngine OnRewriteCond %{HTTP_ACCEPT} image/webpRewriteCond %{REQUEST_FILENAME} (.*).(jpe?g|png)$RewriteCond %{REQUEST_FILENAME}.webp -fRewriteRule (.+).(jpe?g|png)$ %{REQUEST_FILENAME}.webp [T=image/webp,E=accept:1]</IfModule><IfModule mod_headers.c>Header append Vary Accept env=REDIRECT_accept</IfModule>AddType image/webp .webp

Nginx Anpassung

# http config blockmap $http_accept $webp_ext {    default "";    "~*webp" ".webp";}# server config blocklocation ~* ^/wp-content/.+.(png|jpg)$ {    add_header Vary Accept;    try_files $uri$webp_ext $uri =404;}

Resultat überprüfen

Nach­dem man alles ein­gerichtet und die Dateien im WebP-For­mat vor­liegen, kann man das Resul­tat ganz ein­fach prüfen. Mit dem Chrome­brows­er ein­fach die Seite öff­nen, die Kon­sole mit der F12 Taste öff­nen. Dort auf den Reit­er Net­work klick­en und die Seite ein­mal mit der F5-Taste neu laden. Dann siehst du bei den Bild­dateien in der Spalte Type webp.

11.08.2020 aktu­alis­ert

Seit 2000 beschäftige ich mich mit Webentwicklung und seit 2006 mit WordPress. Neben Webentwicklung und Wartung mache ich auch Schulungen in WordPress.
Ich optimiere Webseiten und Social Media Kanäle, so das Kunden und auch die Suchmaschinen zufrieden sind.

• Webentwicklung
• Update-Service für WordPress
• WordPress-Schulungen
• Social-Media Checkups
• Suchmaschinenoptimierung(SEO)