1. Uploadmap aanpassen naar `/content/uploads/images
We hebben de uploadlocatie aangepast zodat alle uploads in `/content/uploads/images` terechtkomen, zodat je mappenstructuur netjes blijft.
function custom_upload_directory($dirs) {
$dirs[‘subdir’] = ‘/images’; // Folder binnen uploads
$dirs[‘path’] = $dirs[‘basedir’] . $dirs[‘subdir’];
$dirs[‘url’] = $dirs[‘baseurl’] . $dirs[‘subdir’];
return $dirs;
}
add_filter(‘upload_dir’, ‘custom_upload_directory’);
2. WordPress maakt standaard minder image sizes aan
Je wilde dat WordPress niet alle standaard image sizes aanmaakt, behalve die Elementor gebruikt. Daarom verwijderen we ongewenste standaard sizes.
// Verwijder ongewenste standaard image sizes
function disable_unwanted_image_sizes($sizes) {
unset($sizes[’thumbnail’]);
unset($sizes[‘medium’]);
unset($sizes[‘medium_large’]);
unset($sizes[‘large’]);
unset($sizes[‘1536×1536’]);
unset($sizes[‘2048×2048’]);
return $sizes;
}
add_filter(‘intermediate_image_sizes_advanced’, ‘disable_unwanted_image_sizes’);
// Verwijder extra WooCommerce image sizes en WordPress default
add_action(‘init’, function () {
remove_image_size(‘1536×1536’);
remove_image_size(‘2048×2048’);
remove_image_size(‘shop_catalog’); // WooCommerce
remove_image_size(‘shop_single’); // WooCommerce
remove_image_size(‘shop_thumbnail’); // WooCommerce
remove_image_size(‘woocommerce_thumbnail’);
remove_image_size(‘woocommerce_single’);
remove_image_size(‘woocommerce_gallery_thumbnail’);
})
3. Zet standaard media afmetingen op 0
Zo voorkom je dat WordPress extra kleine afbeeldingen genereert.
update_option(’thumbnail_size_w’, 0);
update_option(’thumbnail_size_h’, 0);
update_option(‘medium_size_w’, 0);
update_option(‘medium_size_h’, 0);
update_option(‘large_size_w’, 0);
update_option(‘large_size_h’, 0);
4. WebP images serveren in `` tag met fallback naar JPEG
We hebben een PHP-functie gemaakt om WebP-versies te serveren als ze bestaan, anders gewoon JPEG tonen.
Gebruik de shortcode `[webp_image src=”URL-naar-je-jpeg.jpg” alt=”Alt-tekst”]` om afbeeldingen met WebP fallback in te voegen.
function generate_picture_tag($jpeg_url, $alt_text = ”) {
$webp_url = preg_replace(‘/\.(jpe?g)$/i’, ‘.webp’, $jpeg_url);
$upload_dir = wp_upload_dir();
$webp_path = str_replace($upload_dir[‘baseurl’], $upload_dir[‘basedir’], $webp_url);
$webp_exists = file_exists($webp_path);
$html = ‘<picture>’;
if ($webp_exists) {
$html .= ‘<source srcset=”‘ . esc_url($webp_url) . ‘” type=”image/webp”>’;
}
$html .= ‘<img src=”‘ . esc_url($jpeg_url) . ‘” alt=”‘ . esc_attr($alt_text) . ‘” loading=”lazy” decoding=”async”>’;
$html .= ‘</picture>’;
return $html;
}
// Shortcode voor gebruik in content
add_shortcode(‘webp_image’, function($atts) {
$atts = shortcode_atts([
‘src’ => ”,
‘alt’ => ”
], $atts);
if (!$atts[‘src’]) {
return ”;
}
return generate_picture_tag($atts[‘src’], $atts[‘alt’]);
});
5. Belangrijke tips
De WebP-bestanden moeten daadwerkelijk in dezelfde map staan als de JPEGs (bijv. `/content/uploads/images/`).
– Elementor houdt zijn eigen image sizes aan, die laten we ongemoeid.
– Permalinks & `.htaccess` goed instellen is cruciaal om problemen te voorkomen.
– Bij problemen met afbeeldingen check altijd of `.webp` bestanden bestaan op de server en of de rewrite regels in `.htaccess` werken (indien je die gebruikt voor WebP redirect).
…
Grote hoeveelheden images beperken
Hostinger inodes issue. Inodes zijn aantal bestanden en mappen, dus niet alleen de grootte telt, maar ook het aantal bestanden.
Elke afbeelding (ook elk formaat van dezelfde afbeelding) = 1 inode.
1 geüploade afbeelding → WordPress maakt standaard misschien 5 tot 10 versies daarvan (voor thumbnails, medium, large, extra plugin-formats).
Elementor (en andere page builders / thema’s / plugins) kunnen daar nog extra formaten bovenop gooien.
Bij 100 originele afbeeldingen kun je zomaar 800–1200 bestanden (inodes) hebben. En als je meerdere test-sites draait, loopt dat hard op.
Hiernaast de code om niet-gebruikte image sizes uit te schakelen. Voeg toe aan functions.php, in child.
// Verwijder standaard WordPress image sizes (thumbnail, medium, large, retina)
function disable_default_image_sizes($sizes) {
unset($sizes[’thumbnail’]); // 150×150
unset($sizes[‘medium’]); // 300×300
unset($sizes[‘medium_large’]); // 768px
unset($sizes[‘large’]); // 1024px
unset($sizes[‘1536×1536’]); // WP 5.3+
unset($sizes[‘2048×2048’]); // WP 5.3+
return $sizes;
}
add_filter(‘intermediate_image_sizes_advanced’, ‘disable_default_image_sizes’);
// Verwijder ook sizes die via add_image_size() zijn toegevoegd (zoals WooCommerce, themes)
add_action(‘init’, function () {
remove_image_size(‘1536×1536’);
remove_image_size(‘2048×2048’);
remove_image_size(‘shop_catalog’); // WooCommerce
remove_image_size(‘shop_single’); // WooCommerce
remove_image_size(‘shop_thumbnail’); // WooCommerce
remove_image_size(‘woocommerce_thumbnail’);
remove_image_size(‘woocommerce_single’);
remove_image_size(‘woocommerce_gallery_thumbnail’);
// Elementor formaten niet aanraken!
});
// Voorkom bijsnijden als alles op 0 staat in Instellingen > Media
update_option(’thumbnail_size_w’, 0);
update_option(’thumbnail_size_h’, 0);
update_option(‘medium_size_w’, 0);
update_option(‘medium_size_h’, 0);
update_option(‘large_size_w’, 0);
update_option(‘large_size_h’, 0);
