Bilder in modernen Formaten bereitstellen (WordPress)

Das Format WebP

 

Der PageSpeed-Test meckert immer wieder über die Bilder. Leider reicht eine grundsätzliche Bildoptimierung nicht aus und er spricht von „modernen“ Bildformaten (bspw. JPEG 2000 – ja hierbei handelt es sich eindeutig um ein verdammt modernes Format: Erstveröffentlichung: Dez. 2000).

Gott sei dank reicht es, sich für ein Format zu entscheiden.

Wir befassen uns also nun damit, relativ simple den PageSpeed glücklich zu machen in dem wir ihn mit dem WebP Bildformat füttern.

Voraussetzungen:

  • FTP-Zugang um an die .htaccess und um an die vorhandenen Bilder zu kommen (Backup – WordPress / Convert)
  • Externer Konverter oder über WordPress, da ein Plugin benutzt wird um die Mediathek zu durchlaufen

____________________________________________________________

 

Ohne WordPress Plugin

Hierbei kann man sich einen Converter suchen.

Bspw (noch nicht angeschaut) oder auch Online-Tools & anderweitige Konverter:

https://storage.googleapis.com/downloads.webmproject.org/releases/webp/index.html

Folgendes gilt dabei dann zu beachten. Die WebP-Dateien, also das Ergebnis der Konvertierung, werden in das selbe Verzeichnis wie die „Originalbilder“ abgelegt.

MACOS:

https://webponize.org/ > small & simple

Der Dateiname muss dann so lauten damit unser .htaccess Eintrag später greift:

Original: DATEINAME.DATEITYP

WebP: DATEINAME.DATEITYP.webp

____________________________________________________________

 

Mit WordPress Plugin

Erst komplett lesen!

  1. Um die Bilder im WordPress zu konvertieren benutzen wir das Plugin –> EWWW Image Optimizer
  2. Einstellungen > EWWW Image Optimizer > Tab „WebP“ > Haken setzen bei „WebP-Konvertierung“ und unten „Änderungen speichern“ klickenwebp-konvertierung
  3. Nach Aktivierung bekommen wir einen neuen Unterpunkt von Medien (> Massenoptimierung) den wir auch ansteuern
  4. Um den Server zu schonen (bspw. wenn extrem viele Bilder optimiert werden sollen) kann hier eine Sekundenzahl eingestellt werden, als Pause der zwischen den Bildkonvertierungen, was natürlich die Laufzeit durchaus stark erhöht.
  5. Nun die Mediathek scannen und danach den Vorgang starten
  6. ….
  7. ….
  8. ….
  9. Fertig

Die Warnung oben sollte ernst genommen werden, da das Plugin auch gleichzeitig vorhandene unoptimierte Bilder optimiert, also am besten ein Backup der Webseite erstellen

.htaccess Eintrag

Wir ergänzen die .htaccess der Seite dann mit folgendem Code:

### Webp Rewrite
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png)$
RewriteCond %{REQUEST_FILENAME}\.webp -f
RewriteCond %{QUERY_STRING} !type=original
RewriteRule (.+)\.(jpe?g|png)$ %{REQUEST_FILENAME}.webp [T=image/webp,E=accept:1,L]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>
AddType image/webp .webp

Es wird die Kompatibilität geprüft und dann das Bildformat „zugeteilt“.

Das ist wichtig, damit später bei einem kompatiblen Browser das WebP-Bild geladen wird und damit eben auch der PageSpeed die Bereitstellung erkennt.

 

caniuse_webp

Prüfung

Am besten man öffnet dazu Chrome & Safari/IE und geht auf die Webseite.

Wenn dann die Bilder bei den Browsern geladen werden haben wir wahrscheinlich schonmal nichts kaputt gemacht.

Das genutzte Plugin bietet uns im WordPress einen kleinen Tester an. Wir loggen uns also mit den genannten Browsern ins Backend ein und gehen auf Einstellungen > EWWW Image Optimizer

 

Ganz unten rechts sollten wir folgendes sehen:

Safari / IE

webp_safari_ie

Chrome

webp_chrome

Und die Moral von der Geschicht

GPSI_bestandene_pruefung

GPSI_modernimageformat