Optimaliseren snelheid - Afbeeldingen uitserveren op basis van WebP

WebP beeldformaat

WebP is een nieuw type beeldformaat dat superieure compressie biedt voor afbeeldingen online, zonder verlies van kwaliteit. Door WebP te gebruiken, kunnen je kleinere afbeeldingen maken die je website veel sneller maken.

WebP afbeeldingen zijn 26% kleiner in vergelijking met PNG's. WebP-lossy-afbeeldingen zijn 25-34% kleiner dan vergelijkbare JPEG-afbeeldingen. WebP ondersteunt transparantie (ook bekend als alpha-kanaal) voor slechts 22% extra bytes.

Het Webp formaat wordt inmiddels door alle moderne browsers ondersteund.

Afbeeldingen voor de eerste keer beschikbaar maken in WebP bij Hoasted

Hoasted biedt volledige ondersteuning voor WebP. Volg voor de volledige implementatie de onderstaande stappen.

Let op: Het omzetten gebruikt veel CPU en werkgeheugen resources in je account, waardoor het runnen van andere processen worden vertraagd. Verstandig is dus ook om dit uit te voeren op het moment dat het rustig is op je site.

Log in via SSH, of vanuit cPanel > Advanced > Terminal
Navigeer vervolgens met het 'cd' commando naar de uploads map van de WordPress installatie. We raden aan om niet de gehele public_html of root te laten omzetten, enkel de afbeeldingen die veel worden gebruikt.

cd public_html/wp-content/uploads/

Zet nu de JPG afbeeldingen om naar .webp met onderstaande commando:

find . -type f -name "*.jpg" -exec cwebp -q 80 {} -o {}.webp \;

Zet vervolgens de PNG afbeeldingen om naar .webp met onderstaande commando:

find . -type f -name "*.png" -exec cwebp -q 80 -lossless {} -o {}.webp \;

Voeg als laatste stap het onderstaande script nog toe aan je .htaccess bestand:

RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
RewriteRule (.+)$ $1.webp [T=image/webp,E=accept:1,L]

Nieuwe afbeeldingen automatisch omzetten naar WebP met een cronjob

Heb je de bovenstaande snippets al eens toegepast? Dan kun je ook ook de nieuw geuploade afbeeldingen automatisch omzetten naar het WebP formaat met behulp van een cronjob.

Let op dat je hierbij eerst de cronjobs instelt voor het comprimeren van de afbeeldingen om het maximale resultaat te halen.

Log in op cPanel en ga naar cPanel > Advanced > Cronjobs
Maak twee nieuwe cronjobs aan welke wekelijks draait
Vul deze in voor de JPG bestanden:

find ~/public_html/wp-content/uploads/ -type f -name "*.jpg" -exec sh -c 'if [ ! -f "{}.webp" ]; then cwebp -q 80 "{}" -o "{}.webp"; fi' ; >/dev/null 2>&1

En gebruik deze voor de PNG bestanden:

find ~/public_html/wp-content/uploads/ -type f -name "*.png" -exec sh -c 'if [ ! -f {}.webp ]; then cwebp -q 80 -lossless {} -o {}.webp; fi' ; >/dev/null 2>&1

Webp bestanden opruimen van niet meer bestaande afbeeldingen

Wanneer je afbeeldingen via WordPress opruimt zullen de .webp afbeeldingen niet automatisch opgeruimd worden. Om dit alsnog uit te voeren kun je gebruik maken van onderstaande commando:

find ~/public_html/wp-content/uploads/  -type f -name "*.webp" | awk '{ gsub(".webp$", "") ; print $0 }' | xargs -i sh -c 'if [ ! -f "{}" ]; then rm -f {}.webp; fi' find ~/public_html/wp-content/themes/  -type f -name "*.webp" | awk '{ gsub(".webp$", "") ; print $0 }' | xargs -i sh -c 'if [ ! -f "{}" ]; then rm -f {}.webp; fi'