Come convertire le immagini in WebP su WordPress
Se gestisci un sito WordPress, saprai già quanto siano importanti le performance. Uno dei fattori principali che incidono sulla velocità di caricamento delle pagine è il peso delle immagini.
Grazie al formato WebP, introdotto da Google, possiamo ridurre le dimensioni dei file mantenendo una qualità elevata, migliorando così la SEO e l’esperienza utente.
In questa guida vedremo come disattivare alcune dimensioni predefinite delle immagini in WordPress e come convertire automaticamente i file JPEG e PNG in WebP usando PHP e la libreria Imagick.
Perché usare WebP su WordPress?
- Velocità di caricamento: immagini più leggere significano pagine più veloci.
- SEO friendly: Google premia i siti ottimizzati per la performance.
- Compatibilità: ormai quasi tutti i browser supportano WebP.
- Risparmio di spazio: minori dimensioni sul server.
Disattivare le dimensioni immagini predefinite di WordPress
WordPress genera automaticamente diverse versioni di un’immagine caricata. Spesso, però, non servono tutte e finiscono per occupare spazio inutile sul server. Con un semplice snippet possiamo eliminare le dimensioni che non utilizziamo.
Convertire immagini in WebP con Imagick
Per convertire le immagini al volo, ci basterà agganciarci ai filtri di WordPress e utilizzare WP_Image_Editor_Imagick. Lo snippet qui sotto converte:
- L’immagine originale in WebP
- Tutte le sottodimensioni generate da WordPress (thumbnail, medium, large, ecc.)
- Applica automaticamente livelli di compressione diversi in base alla dimensione (più aggressiva per le miniature, più leggera per immagini grandi).
Snippet completo per functions.php
Incolla questo codice nel file functions.php del tuo tema child (o in un plugin dedicato).
function disable_default_image_sizes( $sizes ) {
unset( $sizes['1536x1536'] );
unset( $sizes['2048x2048'] );
unset( $sizes['medium_large'] );
return $sizes;
}
add_filter( 'intermediate_image_sizes_advanced', 'disable_default_image_sizes' );
function convert_to_webp_imagick($source, $quality = 85, $unlink_original = false) {
if (!file_exists($source)) {
error_log("[WEBP] File non trovato: $source");
return false;
}
$info = pathinfo($source);
$ext = strtolower($info['extension'] ?? '');
// 1. Salta se già webp
if ($ext === 'webp') {
error_log("[WEBP] Saltato, già webp: $source");
return false;
}
// 2. Controllo estensione valida
if (!in_array($ext, ['jpg','jpeg','png'])) {
error_log("[WEBP] Estensione non supportata ($ext): $source");
return false;
}
// 3. Verifica supporto WP
if (!class_exists('WP_Image_Editor_Imagick')) {
error_log("[WEBP] WP_Image_Editor_Imagick non disponibile.");
return false;
}
// 4. Normalizza percorsi
$source = wp_normalize_path($source);
$dirname = wp_normalize_path($info['dirname']);
$filename = $info['filename'];
$webp_file = $dirname . '/' . $filename . '.webp';
// 5. Se già esiste, non ricrearlo
if (file_exists($webp_file)) {
error_log("[WEBP] Esiste già: $webp_file");
return basename($webp_file);
}
// 6. Conversione con Imagick
$editor = new WP_Image_Editor_Imagick($source);
$loaded = $editor->load();
if (is_wp_error($loaded)) {
error_log("[WEBP] Errore load() su $source");
return false;
}
$editor->set_quality($quality);
$saved = $editor->save($webp_file, 'image/webp');
if (is_wp_error($saved)) {
error_log("[WEBP] Errore save() su $webp_file");
return false;
}
// 7. Cancella originale se richiesto
if ($unlink_original) {
@unlink($source);
error_log("[WEBP] Originale eliminato: $source");
}
error_log("[WEBP] Creato: $webp_file");
return basename($webp_file);
}
add_filter('wp_generate_attachment_metadata', function($metadata, $attachment_id) {
$upload_dir = wp_upload_dir();
$file = get_attached_file($attachment_id);
// 1. Converte l’originale
$new_file = convert_to_webp_imagick($file, 85, false);
if ($new_file) {
$metadata['file'] = dirname($metadata['file']) . '/' . $new_file;
update_attached_file($attachment_id, $upload_dir['basedir'] . '/' . $metadata['file']);
$metadata['original_image'] = $new_file;
}
// 2. Converte tutte le sottodimensioni
if (!empty($metadata['sizes'])) {
foreach ($metadata['sizes'] as $size => &$data) {
$sub_file = $upload_dir['basedir'] . '/' . dirname($metadata['file']) . '/' . $data['file'];
$quality = ($size === 'thumbnail') ? 75 : (($size === 'medium') ? 80 : 85);
$new_sub_file = convert_to_webp_imagick($sub_file, $quality);
if ($new_sub_file) {
$data['file'] = $new_sub_file; // aggiorna metadata col nuovo file
$data['mime-type'] = 'image/webp';
}else {
unset($metadata['sizes'][$size]); // rimuovi metadata rotti/doppi
}
}
}
wp_update_post([
'ID' => $attachment_id,
'post_mime_type'=> 'image/webp',
]);
return $metadata;
}, 10, 2);Snippet per .htaccess
Infine aggiungi questo snippet all’inizio del tuo .htaccess, consente di servire automaticamente immagini WebP al posto di JPEG e PNG quando il browser del visitatore le supporta.
Controlla l’header Accept inviato dal client e, se esiste un file .webp corrispondente, lo restituisce al posto dell’originale.
In questo modo si riduce il peso delle immagini, migliorando la velocità di caricamento e l’ottimizzazione SEO.
L’header Vary: Accept garantisce compatibilità con la cache e con i browser che non supportano WebP.
<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 [T=image/webp,E=accept:1]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>Conclusione
Ottimizzare le immagini è uno dei passi fondamentali per migliorare la velocità del tuo sito WordPress. Con questo snippet, puoi:
- Evitare file inutili
- Convertire tutto in WebP
- Ridurre drasticamente il peso delle immagini