Automatisch afbeeldingen naar WebP converteren in WordPress (zonder plugin)
PageSpeed Insights/Lighthouse geeft vaak de melding “Serve images in next-gen formats” wanneer er nog veel JPG/PNG wordt geladen, en WebP is één van de meest gebruikte oplossingen om die audit te verbeteren. WebP kan bij vergelijkbare visuele kwaliteit duidelijk kleiner zijn; Google rapporteert gemiddeld 25%–34% kleinere bestanden t.o.v. JPEG bij een vergelijkbare SSIM-kwaliteitsscore.developers.google+1
Waarom WebP?
Browserondersteuning: WebP wordt breed ondersteund in moderne browsers, maar support is (zoals altijd) versie-afhankelijk; check eventueel de actuele supporttabellen als er een specifieke doelgroep is.caniuse
Bestandsgrootte: WebP is vaak kleiner dan JPG/PNG, maar het resultaat hangt sterk af van het type afbeelding (foto/illustratie), compressie-instellingen en kwaliteit.developers.google
SEO-context: Google beschrijft Core Web Vitals en page experience als onderdeel van hoe de pagina-ervaring in Search wordt bekeken; snellere sites helpen vooral UX en kunnen indirect bijdragen aan SEO.developers.google
Vooraf checken: gebruikt WordPress Imagick of GD?
Deze stap voorkomt verwarring: als wp_get_image_editor() geen editor kan initialiseren (Imagick/GD ontbreekt of is beperkt), dan kan WordPress ook niet betrouwbaar naar WebP wegschrijven.developer.wordpress
1) Zet een testbestand klaar
Upload (via FTP/File Manager) één testbestand naar de root van de uploads-map:
wp-content/uploads/test.jpg
2) Plaats deze snippet (toont de editor in Site Health → Info)
WordPress laat Site Health info zien onder Gereedschap → Site Health → Info. Met de debug_information-filter kan extra debug-informatie aan dat Info-scherm worden toegevoegd.developer.wordpress+1
php
/** * Mediadeboer: Toon actieve WordPress image editor in Site Health -> Info * * Gebruik: * 1) Plaats /wp-content/uploads/test.jpg * 2) Ga naar: WP Admin -> Gereedschap -> Site Health -> Info */ add_filter('debug_information', function ($info) { $uploads = wp_upload_dir(); $test_file = trailingslashit($uploads['basedir']) . 'test.jpg'; $section = [ 'label' => 'Mediadeboer WebP-check', 'fields' => [ 'test_file' => [ 'label' => 'Testbestand', 'value' => $test_file, ], 'editor' => [ 'label' => 'WordPress image editor', 'value' => 'Niet getest (test.jpg ontbreekt)', ], ], ]; if (file_exists($test_file)) { $editor = wp_get_image_editor($test_file); if (is_wp_error($editor)) { $section['fields']['editor']['value'] = 'Geen editor beschikbaar: ' . $editor->get_error_message(); } else { $section['fields']['editor']['value'] = get_class($editor); // bv. WP_Image_Editor_Imagick of WP_Image_Editor_GD } } $info['mediadeboer-webp'] = $section; return $info; });
Deze snippet gebruikt wp_upload_dir() zodat het ook werkt als de uploads-map is aangepast. De test gebruikt wp_get_image_editor(), dat een editor-object of WP_Error teruggeeft.developer.wordpress+1
De oplossing: lichtgewicht WebP-snippet (converteert bij upload)
Deze snippet haakt in op de uploadflow via de wp_handle_upload filter, en past het resultaat (file/url/type) aan nadat de WebP-versie is opgeslagen. Voor unieke bestandsnamen wordt wp_unique_filename() gebruikt, zodat er geen conflicten ontstaan in dezelfde uploadmap.wp-kama+2
Eigenschap: non-destructief (origineel blijft staan), zodat er altijd een fallback is.
php
/**
* Mediadeboer: Converteer JPG/PNG uploads automatisch naar WebP (zonder plugin)
*
* - Converteert alleen nieuwe uploads (niet bestaande media).
* - Laat het origineel standaard staan (extra schijfruimte, maar wel veilig).
* - Vereist werkende WordPress image editor (Imagick of GD via wp_get_image_editor()).
*/
add_filter('wp_handle_upload', 'mediadeboer_convert_upload_to_webp');
function mediadeboer_convert_upload_to_webp($upload) {
// Alleen als upload geldig is
if (empty($upload['file']) || empty($upload['type']) || !file_exists($upload['file'])) {
return $upload;
}
// Alleen JPG/PNG
if (!in_array($upload['type'], ['image/jpeg', 'image/png'], true)) {
return $upload;
}
$original_path = $upload['file'];
// Editor ophalen (Imagick/GD)
$editor = wp_get_image_editor($original_path);
if (is_wp_error($editor)) {
return $upload;
}
// Kwaliteit (0-100). Startpunt: 82
if (method_exists($editor, 'set_quality')) {
$editor->set_quality(82);
}
// Doelbestand bepalen
$info = pathinfo($original_path);
$dirname = $info['dirname'];
$filename = $info['filename'];
// Unieke bestandsnaam in dezelfde uploadmap
$webp_name = wp_unique_filename($dirname, $filename . '.webp');
$webp_path = trailingslashit($dirname) . $webp_name;
// WebP opslaan
$saved = $editor->save($webp_path, 'image/webp');
// Succes? WordPress laten “denken” dat de upload de WebP is
if (!is_wp_error($saved) && !empty($saved['path']) && file_exists($saved['path'])) {
$upload['file'] = $saved['path'];
$upload['type'] = 'image/webp';
// URL robuust opnieuw opbouwen
if (!empty($upload['url'])) {
$upload['url'] = trailingslashit(dirname($upload['url'])) . basename($saved['path']);
}
// Optioneel: origineel verwijderen (standaard UIT)
// @unlink($original_path);
}
return $upload;
}
FAQ
Alleen als WordPress een image editor kan gebruiken via wp_get_image_editor(); anders wordt er niets geconverteerd.developer.wordpress
In WordPress: Gereedschap → Site Health → Info.wordpress
Omdat WordPress daarmee in de doelmap een unieke naam kan maken en bestandsconflicten voorkomt.developer.wordpress
Niet altijd: “Serve images in next-gen formats” kan ook door externe afbeeldingen, oude media die al eerder zijn geüpload (deze snippet pakt alleen nieuwe uploads), of door CSS-achtergronden komen.wp-rocket
