WebP nut­zen und Word­Press beschleu­ni­gen

Was ist WebP

WebP(Weppy) ist ein von Goog­le ent­wi­ckel­tes Datei­for­mat für ver­lust­be­haf­tet oder ver­lust­frei kom­pri­mier­te Bil­der. Es wur­de 2010 ein­ge­führt.

Als Bei­spiel, die Datei webdesign-webvisitenkarte-1200x800.jpg ist bereits für das Web opti­miert wor­den. Sie ist 124 kb groß, das glei­che Bild im WebP-For­mat ist nur 87 kb groß. Ein­spa­rung 37 kb - 29,84 %.

Kling erst­mal nicht viel, aber du musst das auf die Mas­se der Web­sei­ten sehen.

WebP-Kom­pa­ti­bi­li­tät

WebP wird lei­der noch nicht von jedem Brow­ser unter­stützt. Aber in Deutsch­land wer­den 71 % und welt­weit 81 % der genutz­ten Web­brow­ser unterstützt(Stand 08/2020). Die Brow­ser sind u.a. Chro­me, Chro­me for Android, Edge, Fire­fox, Ope­ra, Ope­ra Mini, Safa­rie, iOS Safa­ri und Android Brow­ser in den aktu­el­les­ten Ver­sio­nen.

Die aktu­el­len Zah­len, bzw. kom­pa­ti­blen Web­brow­ser kann man auf fol­gen­der Sei­te sehen:
http://caniuse.com/#search=webp

Word­Press-Plug­in

Damit man nicht mit dem Gra­fik­pro­gramm immer eine WebP-Vari­an­te erstel­len muss, kann man das bequem mit dem Word­Press-Plug­in EWWW Image Opti­mi­zer auto­ma­ti­sie­ren. Das Plug­in opti­miert Bil­der direkt nach dem Upload in die Word­Press Media­thek. Dazu in die Ein­stel­lung des Plug­ins auf die den let­zen Rei­ter “WebP-Ein­stel­lung” gehen und dort JPG/PNG nach WebP akti­vie­ren.

Das Plug­in im offi­zi­el­len Word­Press-Ver­zeich­nis: https://de.wordpress.org/plugins/ewww-image-optimizer/

WebP-Aus­ga­be steu­ern

Jetzt muss man nur noch dafür sor­gen, das die WebP-Bil­der an die pas­sen­den Web­brow­ser aus­ge­ge­ben wer­den. Das macht man dann mit einer Wei­che. Inkom­pa­ti­ble Web­brow­ser erhal­ten wei­ter­hin JPG/PNG-Datei­en und die ande­ren WebP.

Apa­che .htac­cess anpas­sen

<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 Anpas­sung

# 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;}

Resul­tat über­prü­fen

Nach­dem man alles ein­ge­rich­tet und die Datei­en im WebP-For­mat vor­lie­gen, kann man das Resul­tat ganz ein­fach prü­fen. Mit dem Chrome­brow­ser ein­fach die Sei­te öff­nen, die Kon­so­le mit der F12 Tas­te öff­nen. Dort auf den Rei­ter Net­work kli­cken und die Sei­te ein­mal mit der F5-Tas­te neu laden. Dann siehst du bei den Bild­da­tei­en in der Spal­te Type webp.

11.08.2020 aktua­li­sert

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)