Afbeeldingen uitserveren op basis van WebP

Waarom WebP?

WebP is een modern afbeeldingsformaat dat betere compressie biedt dan JPG en PNG zonder merkbaar kwaliteitsverlies. Dit leidt tot snellere laadtijden en betere prestaties voor je website.

1. WebP-ondersteuning inschakelen in WordPress

1.1 Controleren of WebP wordt ondersteund

Niet alle WordPress-installaties ondersteunen WebP standaard. Controleer dit door:

1. Een WebP-afbeelding te uploaden via de WordPress mediabibliotheek.
2. Als je een foutmelding krijgt, moet je ondersteuning inschakelen (zie volgende stap).

1.2 WebP-ondersteuning inschakelen via functions.php

Voeg de volgende code toe aan je thema’s functions.php bestand om WebP-upload toe te staan:

function webp_mime_types($mimes) {
$mimes['webp'] = 'image/webp';
return $mimes;
}
add_filter('upload_mimes', 'webp_mime_types');

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png)$
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
RewriteRule (.*)\.(jpe?g|png)$ $1.webp [NC,T=image/webp]
</IfModule>

location ~* ^(/wp-content/uploads/)(.*)\.(png|jpe?g)$ {
set $webp_uri $1$2.webp;
set $webp_exists "";
if (-f $document_root$webp_uri) {
set $webp_exists A;
}
if ($http_accept ~* "webp" ) {
set $webp_exists "${webp_exists}B";
}
if ($webp_exists = AB) {
rewrite ^(.+)\.(png|jpe?g)$ $webp_uri break;
}
}

<picture>
<source srcset="afbeelding.webp" type="image/webp">
<img src="afbeelding.jpg" alt="Beschrijving">
</picture>