Afbeeldingen uitserveren op basis van WebP

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.

Browser ondersteuning

Nog niet iedere browser ondersteunt WebP (Chrome en Opera bijvoorbeeld wel). 

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 wel op: Het omzetten gebruikt alle beschikbare CPU en werkgeheugen resources in je account, waardoor het runnen van andere processen worden vertraagd, waaronder het reguliere webverkeer op je website. Verstandig is dus ook om dit te doen op het moment dat het niet druk is op je site.

  1. Log in via SSH
  2. Ga naar de folder waarin de afbeeldingen staan. We raden aan om niet de gehele public_html of root te laten omzetten, enkel de afbeeldingen die veel worden gebruikt. 
  3. Run onderstaande commando eerst

    find . -type f -name "*.jpg" -exec cwebp -q 80 {} -o {}.webp \;
    	
  4. En vervolgens de volgende
  5. find . -type f -name "*.png" -exec cwebp -q 80 -lossless {} -o {}.webp \;
    	
  6. Voeg als laatste stap het onderstaande script nog toe aan je .htaccess bestand: 
  7. 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 ook beschikbaar maken in WebP

Heb je de bovenstaande snippets al eens toegepast? Dan kun je ook gebruik maken van onderstaande snippets, die alle eerder omgezette WebP afbeeldingen overslaat. Dat scheelt aanzienlijk in het gebruik van CPU en werkgeheugen gebruik.

  1. Gebruik deze voor PNG
    find . -type f -name "*.png" -exec sh -c 'if [ ! -f "{}.webp" ]; then cwebp -q 80 -lossless "{}" -o "{}.webp"; fi' \;
    	
  2. Gebruik deze voor JPG
    find . -type f -name "*.jpg" -exec sh -c 'if [ ! -f "{}.webp" ]; then cwebp -q 80 "{}" -o "{}.webp"; fi' \;
    	

webp bestanden opruimen van niet meer bestaande afbeeldingen
Gebruik daarvoor dit script:

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'

Nog steeds hulp nodig? Contact ons Contact ons