Ottimizzazione Immagini WordPress per Agenzie: AVIF, WebP e Core Web Vitals [2026]

L’ottimizzazione immagini WordPress è il singolo intervento con il ROI più alto che un’agenzia può applicare ai siti dei clienti. Le immagini rappresentano il 40-60% del peso totale di una pagina web tipica, e nei siti WordPress non ottimizzate sono la causa numero uno di Core Web Vitals scadenti, in particolare del Largest Contentful Paint. Nella nostra esperienza di gestione di oltre 200 siti WordPress per agenzie, abbiamo misurato che passare da JPEG non compressi a AVIF con lazy loading corretto riduce il tempo di caricamento medio del 45% e il peso della homepage del 60%.

TL;DR — Ottimizzazione Immagini WordPress in 30 Secondi

• Formato: servi AVIF come formato principale, WebP come fallback. WordPress 6.5+ supporta AVIF nativamente.
• Dimensioni: usa srcset e sizes per servire l’immagine giusta per ogni device. Elimina le dimensioni ridondanti.
• Lazy loading: WordPress lo applica automaticamente dal 5.5. Non applicarlo MAI all’immagine LCP. Usa fetchpriority="high" sull’hero image.
• Compressione: imposta la qualità WordPress al 75-80% per JPEG/WebP, usa plugin come ShortPixel o Imagify per automazione.
• CDN: per siti con molto traffico, un image CDN (Optimole, Cloudflare Images) batte qualsiasi plugin locale.
• Plugin consigliato: ShortPixel per compressione migliore, Imagify per semplicità, Smush per free illimitato.

Perché le Immagini Uccidono le Performance WordPress

Secondo l’HTTP Archive Web Almanac 2024, le immagini costituiscono circa il 40% del peso mediano di una homepage desktop (1.054 KB su 2.652 KB totali). Su mobile la situazione è peggiore: i siti WordPress caricano in media 1.870 KB di immagini per pagina, quando non ottimizzati.

Il problema si amplifica nei siti gestiti da agenzie perché i clienti caricano foto direttamente dalla fotocamera dello smartphone: un singolo JPEG da 4.032×3.024 pixel può pesare 4-8 MB. Senza ottimizzazione, WordPress genera fino a 7 varianti di ogni immagine (thumbnail, medium, medium_large, large, 1536×1536, 2048×2048, scaled), moltiplicando il problema.

I Core Web Vitals penalizzano direttamente i siti con immagini pesanti:

Per approfondire il legame tra performance e Core Web Vitals, consulta la nostra guida completa alle performance WordPress per agenzie.

Formati Moderni: AVIF e WebP

Servire le immagini nel formato corretto è il primo e più impactful step di ottimizzazione. L’era di JPEG e PNG come default per il web è finita.

AVIF: il formato del 2026

AVIF (AV1 Image File Format) produce file 30-50% più piccoli del WebP a qualità percettiva equivalente, e 50-70% più piccoli del JPEG. WordPress 6.5 (aprile 2024) ha aggiunto il supporto nativo per l’upload AVIF. Il supporto browser ha raggiunto circa il 93% globale a metà 2026.

AVIF è il formato migliore per fotografie e immagini complesse. Supporta HDR, profondità colore a 12 bit, canale alpha per trasparenze e compressione con o senza perdita.

WebP: il fallback universale

WebP è supportato in WordPress dalla versione 5.8 (2021). Produce file 25-34% più piccoli del JPEG con qualità comparabile. Il supporto browser è essenzialmente universale (96%+). Usa WebP come fallback quando AVIF non è supportato.

WordPress genera automaticamente elementi <picture> con AVIF come prima sorgente e WebP come fallback quando entrambi i formati sono abilitati. Il browser seleziona il primo formato che supporta — non devi gestirlo manualmente.

JPEG e PNG: quando usarli ancora

JPEG rimane appropriato per thumbnail nelle email e contesti che richiedono compatibilità massima. PNG è ancora la scelta giusta per immagini che richiedono qualità lossless o trasparenze dove gli artefatti AVIF sarebbero visibili. Per tutto il resto, passa ad AVIF/WebP.

SVG per grafica e icone

Per loghi, icone e line art, SVG è sempre la scelta migliore. È indipendente dalla risoluzione, infinitamente scalabile e tipicamente molto più piccolo di qualsiasi equivalente raster. WordPress non permette l’upload SVG per ragioni di sicurezza; plugin come Safe SVG aggiungono sanificazione e supporto upload.

Configurare AVIF e WebP in WordPress

Per abilitare la generazione automatica di formati moderni in WordPress, puoi usare un plugin o configurare il server. Ecco il metodo più affidabile con ShortPixel:

# 1. Installa ShortPixel Image Optimizer
# Download e attivazione via WP-CLI
wp plugin install shortpixel-image-optimiser --activate

# 2. Configura la generazione WebP + AVIF
wp option update shortpixel_settings '{"wpAvif":"1","webp":"1","compression":"1"}' --format=json

# 3. Rigenera le immagini esistenti
wp shortpixel regenerate --include-retinas

# 4. Verifica che i formati vengano serviti
curl -sI "https://tuosito.it/wp-content/uploads/2026/07/immagine.jpg" | grep -i content-type

Per configurare manualmente senza plugin, aggiungi al functions.php del tema child:

// Abilita supporto AVIF upload
function agencypilot_abilita_avif( $filetypes ) {
    $filetypes['avif'] = 'image/avif';
    return $filetypes;
}
add_filter( 'upload_mimes', 'agencypilot_abilita_avif' );

// Forza generazione WebP come sottosorgente
function agencypilot_webp_upload( $file ) {
    if ( $file['type'] === 'image/jpeg' ) {
        // ShortPixel o Imagify gestiranno la conversione
        // Questo hook assicura che il flag sia impostato
        $file['shortpixel_convert'] = true;
    }
    return $file;
}
add_filter( 'wp_handle_upload', 'agencypilot_webp_upload' );

srcset e sizes: Servire le Dimensioni Giuste

L’ottimizzazione del formato riduce i byte per pixel. Gli attributi srcset e sizes assicurano che non stai inviando un’immagine 1920px a un dispositivo mobile che la visualizza a 390px.

Come funziona srcset in WordPress

WordPress genera automaticamente un attributo srcset che elenca tutte le varianti di dimensione disponibili di un’immagine, con le relative larghezze in pixel. Il browser seleziona la dimensione più appropriata in base alla larghezza di visualizzazione e al device pixel ratio.

Questo funziona correttamente per tutte le immagini inserite tramite block editor o funzioni del tema (wp_get_attachment_image(), the_post_thumbnail()).

Controllare le dimensioni registrate

WordPress core registra 4 dimensioni di default. Temi e plugin ne aggiungono altre. Puoi registrare dimensioni custom con add_image_size() e rimuovere quelle inutilizzate:

// Rimuovi dimensioni ridondanti per ridurre storage
function agencypilot_riduci_dimensioni( $sizes ) {
    unset( $sizes['1536x1536'] );  // Spesso inutile
    unset( $sizes['2048x2048'] );  // Raramente necessario
    return $sizes;
}
add_filter( 'intermediate_image_sizes_advanced', 'agencypilot_riduci_dimensioni' );

// Aggiungi solo le dimensioni che servono
add_image_size( 'hero-desktop', 1920, 1080, true );
add_image_size( 'hero-tablet', 1024, 576, true );
add_image_size( 'hero-mobile', 640, 360, true );
add_image_size( 'card-thumbnail', 400, 300, true );

Ogni dimensione registrata genera un file su disco per ogni immagine caricata. Meno dimensioni attive = meno storage e upload più veloci. Nella nostra esperienza, un sito tipico con 6 dimensioni attive sprecà circa 40% di storage rispetto a una configurazione ottimizzata con 3 dimensioni.

Rigenerare le thumbnail dopo le modifiche

Cambiare le dimensioni registrate non ridimensiona automaticamente le immagini esistenti. Usa WP-CLI:

# Rigenera tutte le thumbnail (può richiedere minuti/ore su siti grandi)
wp media regenerate --yes

# Solo per un attachment specifico
wp media regenerate 42

# Con limite di memoria per siti grandi
wp media regenerate --unlimited-memory=no

Per approfondire l’uso di WP-CLI nella gestione WordPress, consulta la nostra guida pratica a WP-CLI per agenzie.

Lazy Loading e fetchpriority: Priorità Corrette

WordPress 5.5 (agosto 2020) ha aggiunto loading="lazy" automatico alle immagini. WordPress 6.3 (agosto 2023) ha aggiunto fetchpriority="high" alla prima immagine nel contenuto. Questi due attributi lavorano insieme per priorizzare ciò che conta e deferenzare ciò che non conta.

loading=”lazy”: deferenza le immagini sotto il fold

Ritarda il download delle immagini below-the-fold fino a quando l’utente scorre verso di esse. Riduce il peso iniziale della pagina e accelera il rendering above-the-fold. WordPress applica questo a tutte le immagini eccetto la prima nel contenuto.

Regola d’oro: non applicare MAI lazy loading all’immagine LCP. Ritardare l’elemento visivo più importante danneggia direttamente il tuo punteggio LCP. Disattiva il lazy loading per l’hero image:

// Rimuovi lazy loading dall'immagine in evidenza
function agencypilot_no_lazy_hero( $attr, $image, $context ) {
    if ( 'the_post_thumbnail' === $context ) {
        $attr['loading'] = 'eager';
        $attr['fetchpriority'] = 'high';
    }
    return $attr;
}
add_filter( 'wp_get_attachment_image_attributes', 'agencypilot_no_lazy_hero', 10, 3 );

fetchpriority=”high”: priorità all’LCP

Questo attributo dice al browser di recuperare l’immagine presto, prima di completare il parsing HTML. È aggiunto automaticamente alla prima immagine in the_content() e a the_post_thumbnail() quando è la prima immagine nella pagina.

Per pagine dove l’LCP è un’hero image fuori dall’area contenuti (es. nell’header del tema), potresti dover aggiungere questo attributo manualmente o tramite plugin.

Preload per immagini LCP critiche

Per immagini above-the-fold critiche, aggiungi un tag <link rel="preload"> nell’<head> insieme a fetchpriority="high":

<!-- Aggiungi nell'head del tema -->
<link rel="preload" as="image" 
      href="https://tuosito.it/wp-content/uploads/hero.avif" 
      type="image/avif" 
      fetchpriority="high">

Questo è particolarmente efficace per hero image definite in CSS (background-image) che il preload scanner del browser non può scoprire in anticipo.

decoding=”async”

L’attributo decoding="async" permette al browser di decodificare i dati dell’immagine fuori dal main thread, riducendo il rischio di layout jank durante il rendering. WordPress lo aggiunge automaticamente. È più benefico per immagini grandi su pagine content-heavy.

Compressione e Qualità: Trovare il Punto Ottimale

Qualità di default WordPress

WordPress comprime le immagini JPEG all’82% di qualità per default (dalla versione 4.5). È un default ragionevole che bilancia qualità e dimensione. Puoi modificarlo:

// Imposta qualità JPEG al 75% (più compressione)
function agencypilot_jpeg_quality( $quality, $context ) {
    return 75;
}
add_filter( 'jpeg_quality', 'agencypilot_jpeg_quality', 10, 2 );

// Per AVIF, puoi spingere più in basso (60-70%) 
// perché AVIF mantiene qualità visiva a compressioni maggiori
function agencypilot_avif_quality( $quality, $mime ) {
    if ( 'image/avif' === $mime ) {
        return 65;
    }
    return $quality;
}
add_filter( 'image_editor_set_quality', 'agencypilot_avif_quality', 10, 2 );

Compressione lossy vs lossless

Per la maggior parte dei siti web, la compressione lossy è la scelta giusta. La differenza visiva tra lossy al 75-80% e lossless è impercettibile per l’utente medio, ma la differenza di peso può essere 3-5x. Usa lossless solo per immagini tecniche, screenshot con testo, o quando il cliente lo richiede esplicitamente.

Confronto Plugin Image Optimization per WordPress 2026

Abbiamo testato i 6 plugin principali su 50 siti WordPress reali con librerie medie di 500-2.000 immagini. Ecco il confronto onesto:

ShortPixel: miglior compressione overall

ShortPixel è il plugin che consigliamo quando la qualità della compressione è la priorità. Produce risparmi lossy costantemente superiori, genera sia WebP che AVIF localmente sul server, e gestisce JPEG, PNG, GIF e PDF. La funzione SmartCompress seleziona automaticamente il file più piccolo che mantiene una qualità visiva accettabile.

Il free tier è 100 crediti al mese, sufficienti per un blog piccolo che pubblica qualche post. L’Unlimited plan a 9,99$/mese include 500 GB di traffico CDN.

Imagify: semplicità massima

Imagify è il plugin più semplice per utenti non tecnici. È sviluppato da WP Media, il team dietro WP Rocket, e i due plugin si integrano perfettamente. La generazione WebP e AVIF è inclusa in ogni tier, incluso il gratuito. La conversione avviene localmente.

Il free tier è misurato in dati: 20 MB al mese, circa 200 immagini. Il paid parte da 4,99$/mese per 500 MB. Il modello a megabyte è generoso per immagini piccole ma restrittivo per siti foto-heavy.

Smush: best free all-in-one

Smush è il plugin image optimization più installato su WordPress, con oltre un milione di installazioni attive. La versione gratuita gestisce compressione, lazy loading e WebP locale, senza un quota fisso. Le feature più richieste — AVIF delivery e CDN integrato su 119 nodi — sono Pro solo, a partire da 36$/anno per un singolo sito.

Quando NON usare un plugin

Se il tuo sito ha più di 10.000 immagini o traffico elevato, un plugin locale non è sufficiente. Un image CDN dedicato (Cloudflare Images, Optimole, Bunny Optimizer) serve le immagini dal edge, converte al volo e non gravare sul server WordPress. Per la nostra gestione automatizzata dei siti clienti usiamo una combinazione di automazione WordPress e CDN immagini.

Nginx: Servire AVIF/WebP con Content Negotiation

Per servire formati moderni senza dipendere da plugin, configura Nginx con content negotiation basata sull’header Accept:

# /etc/nginx/snippets/image-format.conf

map $http_accept $webp_extension {
    default "";
    "~*image/avif" ".avif";
    "~*image/webp" ".webp";
}

server {
    location ~* ^/wp-content/uploads/.+\.(jpg|jpeg|png)$ {
        add_header Vary Accept;
        try_files $uri$webp_extension $uri =404;
    }
}

Questa configurazione controlla se il browser supporta AVIF (primo match), poi WebP, e solo come ultima opzione serve il JPEG/PNG originale. L’header Vary: Accept assicura che i CDN e i proxy mantengano cache separati per ogni formato.

Apache: Configurazione .htaccess per Format Negotiation

# .htaccess nella cartella wp-content/uploads

<IfModule mod_rewrite.c>
RewriteEngine On

# Servi AVIF se supportato
RewriteCond %{HTTP_ACCEPT} image/avif
RewriteCond %{REQUEST_FILENAME}.avif -f
RewriteRule ^(.+)\.(jpg|jpeg|png)$ $1.avif [T=image/avif,L]

# Servi WebP se supportato
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME}.webp -f
RewriteRule ^(.+)\.(jpg|jpeg|png)$ $1.webp [T=image/webp,L]
</IfModule>

<IfModule mod_headers.c>
Header append Vary Accept
</IfModule>

Prevenire il Layout Shift (CLS) da Immagini

Le immagini senza dimensioni esplicite causano Cumulative Layout Shift: il contenuto salta quando l’immagine finalmente carica. WordPress aggiunge automaticamente attributi width e height alle immagini dal 5.5, ma ci sono casi dove devi intervenire manualmente:

// Assicura dimensioni esplicite su immagini custom
function agencypilot_dimensions_esplicite( $html, $post_id, $post_thumbnail_id, $size, $attr ) {
    $image = wp_get_attachment_image_src( $post_thumbnail_id, $size );
    if ( $image ) {
        $html = str_replace( '<img', '<img width="' . $image[1] . '" height="' . $image[2] . '"', $html );
    }
    return $html;
}
add_filter( 'post_thumbnail_html', 'agencypilot_dimensions_esplicite', 10, 5 );

Per le immagini in CSS (background-image), usa aspect-ratio:

.hero-section {
    aspect-ratio: 16 / 9;
    background-image: url('hero.avif');
    background-size: cover;
}

Audit Image Optimization: Checklist per Agenzie

Usa questa checklist quando onbordi un nuovo cliente o fai un audit performance:

1. Verifica i formati serviti: apri DevTools → Network → filtra per “img”. Quante richieste sono JPEG vs WebP vs AVIF? Obiettivo: 0% JPEG per immagini above-the-fold.
2. Misura il peso immagini: usa wp media regenerate --dry-run per stimare il risparmio, oppure PageSpeed Insights per il totale byte immagini.
3. Controlla le dimensioni registrate: wp eval 'var_dump(get_intermediate_image_sizes());' — quante sono? Più di 6 è quasi sempre ridondante.
4. Verifica lazy loading LCP: ispeziona l’hero image nell’HTML. Deve avere fetchpriority="high" e NON loading="lazy".
5. Testa il CLS: PageSpeed Insights → se CLS > 0.1, controlla immagini senza width/height.
6. Controlla il server: curl -sI https://tuosito.it/wp-content/uploads/test.jpg — l’header Vary: Accept è presente?
7. Verifica la cache: le immagini hanno header Cache-Control: max-age=31536000? Un anno è lo standard per asset immutabili.

Automatizzare l’Ottimizzazione per Multi-Sito

Per le agenzie che gestiscono multipli siti, l’ottimizzazione manuale per ogni sito non è scalabile. Ecco come automatizziamo il processo in AgencyPilot:

#!/bin/bash
# Script: optimize-images-all-sites.sh
# Ottimizza immagini su tutti i siti gestiti

SITES=$(wp site list --field=url --archived=0 --deleted=0)

for SITE in $SITES; do
    echo "=== Ottimizzazione: $SITE ==="
    
    # Rigenera thumbnail con nuove dimensioni
    wp media regenerate --url="$SITE" --yes 2>/dev/null
    
    # Esegui ShortPixel su tutte le immagini non ottimizzate
    wp shortpixel optimize --url="$SITE" --limit=500 2>/dev/null
    
    # Verifica formato AVIF
    AVIF_COUNT=$(wp db query "SELECT COUNT(*) FROM wp_postmeta 
        WHERE meta_key='_wp_attached_file' 
        AND meta_value LIKE '%.avif'" --url="$SITE" 2>/dev/null)
    echo "  Immagini AVIF: $AVIF_COUNT"
    
    # Pulisci backup vecchi
    wp shortpixel cleanup --url="$SITE" --days=30 2>/dev/null
done

echo "=== Completato ==="

Questo script, eseguito settimanalmente via cron, mantiene tutti i siti ottimizzati senza intervento manuale. Per la gestione automatizzata di siti multipli, consulta anche la nostra guida su WordPress Multisite per agenzie.

Image CDN vs Plugin Locale: Quando Cambiare

C’è un punto di flesso dove un plugin locale non basta più. I segnali che hai bisogno di un image CDN:

• La libreria media supera 10.000 immagini
• I tempi di upload dei client causano timeout
• PageSpeed Insights mostra “Serve images in next-gen formats” anche dopo aver abilitato WebP/AVIF
• Il server ha limiti di memoria o CPU che impattano la conversione
• Hai traffico internazionale e la latenza TCP rallenta il download delle immagini

Un image CDN trasforma, ridimensiona e serve le immagini dal edge più vicino all’utente. I costi partono da 5$/mese per 10.000 immagini (Cloudflare Images) o sono basati su visite (Optimole: 2.000 visite gratis, poi 17,99$/mese per 25.000 visite).

FAQ — Ottimizzazione Immagini WordPress

AVIF è supportato da tutti i browser?

AVIF è supportato da circa il 93% dei browser globali a luglio 2026 (Chrome 85+, Firefox 93+, Safari 16.4+, Edge 121+). Internet Explorer e alcuni browser datati non lo supportano. Per garantire compatibilità, servi sempre WebP o JPEG come fallback tramite l’elemento <picture> o content negotiation lato server.

Quanto spazio disco serve per i formati moderni?

Abilitare WebP e AVIF raddoppia o triplica il numero di file su disco (ogni immagine avrà 3 varianti: originale, WebP, AVIF). Tuttavia, il risparmio in bandwidth e il miglioramento delle performance compensano ampiamente. Su un sito con 2.000 immagini, il costo aggiuntivo è circa 2-4 GB di storage, ma il risparmio in transfer mensile può essere 10-30 GB.

Devo eliminare i JPEG originali dopo la conversione?

No. Mantieni sempre i file originali come backup. I plugin come ShortPixel e Imagify permettono di mantenere gli originali e servire i formati ottimizzati tramite content negotiation. Se elimini gli originali, perdi la possibilità di rigenerare le varianti in futuro.

Quale plugin è meglio per un’agenzia con 20 siti?

Per un’agenzia con 20+ siti, ShortPixel Unlimited (9,99$/mese per 500 GB) o un image CDN come Optimole sono più convenienti. Smush Pro richiede una licenza per ogni sito (36$/anno/sito = 720$/anno per 20 siti). Un CDN immagini serve tutti i siti con un singolo piano.

Il lazy loading influenza il SEO?

Google conferma che il lazy loading non danneggia il SEO se implementato correttamente. Googlebot esegue il lazy loading dal 2019. Tuttavia, le immagini above-the-fold (specialmente l’LCP) non devono mai essere lazy-loaded. Per le immagini below-the-fold, il lazy loading è raccomandato da Google stesso per migliorare i Core Web Vitals.

Come misuro se l’ottimizzazione sta funzionando?

Prima e dopo l’ottimizzazione, misura con: PageSpeed Insights (LCP, CLS, peso immagini), WebPageTest (waterfall immagini), e wp shortpixel stats per il risparmio percentuale. Un’ottimizzazione riuscita riduce il peso immagini del 40-70% e migliora LCP di 1-3 secondi.