PageSpeed Insights mostra il suggerimento "Serve immagini in formati di nuova generazione", ma le immagini sul tuo sito sono ancora in JPEG. Convertire tutto in WebP è semplice. La sfida è un'altra: una piccola percentuale di visitatori con browser obsoleti vedrà immagini rotte se ti limiti a sostituire il formato sul server.

Il compito non è la conversione, ma la distribuzione selettiva: WebP a chi lo supporta, l'originale a tutti gli altri. In WordPress questo si risolve in tre modi diversi, ciascuno per uno stack e un budget specifici.

💡 Panoramica rapida:

• Capire cos'è WebP e perché è migliore del JPEG
• Imparare i due approcci per servire WebP
• Scegliere uno dei tre metodi in base a stack e budget
• Configurare il plugin e verificare il risultato in Chrome DevTools

Cos'è WebP e perché ti serve

WebP è un formato immagine di Google che comprime meglio di JPEG e PNG a parità di qualità visiva. Un'immagine che pesa 100 KB in WebP pesa 55-75 KB. Nessuna magia: solo un algoritmo di compressione più efficiente.

Il formato non è nuovo. La specifica è stata pubblicata da Google nel 2010. Da allora WebP è passato da esperimento a standard: compressione lossy e lossless, trasparenza, animazione. In pratica combina le capacità di JPEG, PNG e GIF in un unico contenitore.

Confronto rapido con i formati tradizionali:

La differenza di peso è notevole. Per un sito con cinquanta immagini a pagina, passare a WebP riduce il peso totale di multipli. L'impatto su Core Web Vitals e posizionamento sui motori di ricerca è diretto.

Perché non puoi semplicemente attivare WebP ovunque

La risposta sta nella compatibilità. Oggi WebP è supportato da oltre il 96% dei browser: Chrome, Firefox, Safari (da iOS 14), Edge. Ma resta una piccola percentuale di vecchi dispositivi che non capiscono il formato.

Se sostituisci semplicemente tutti i JPEG con WebP sul server, quella piccola percentuale di visitatori vedrà immagini rotte. Per un sito commerciale o un negozio online, questa perdita di utenti è inaccettabile.

Quindi il compito non si riduce a "convertire le immagini", ma a "servire WebP a chi lo supporta, e l'originale a tutti gli altri".

Due approcci di base per servire WebP

Prima di passare ai metodi per WordPress, conviene capire come browser e server negoziano il formato. Ci sono solo due meccanismi.

Approccio 1: tag

Al browser viene offerta una scelta tra WebP e l'originale direttamente nel markup HTML:

1
<picture>
2
  <source srcset="img.webp" type="image/webp">
3
  <source srcset="img.jpg" type="image/jpeg">
4
  <img src="img.jpg" alt="Image description">
5
</picture>

Un browser con supporto WebP prenderà il primo <source>. Gli altri ignoreranno il sorgente WebP e caricheranno il JPEG da <img>.

Vantaggio: funziona senza configurazione server e con qualsiasi CDN. Svantaggio: non funziona con le immagini di sfondo nei CSS e modifica la struttura HTML. Alcuni plugin di cache e lazy loading inciampano su <picture>.

Approccio 2: risposta variabile

Nell'HTML resta un normale <img src="img.jpg">, ma il server restituisce contenuti diversi per lo stesso URL: un file WebP ai browser con supporto WebP, l'originale a tutti gli altri.

La chiave del meccanismo è l'header HTTP Accept. Il browser lo invia a ogni richiesta, il server o la CDN decidono cosa restituire.

Vantaggio: funziona ovunque, incluse le immagini di sfondo nei CSS. L'HTML non cambia. Svantaggio: richiede configurazione server, e non tutte le CDN considerano correttamente Accept nella chiave di cache.

Confrontiamo:

Ora vediamo come questi approcci si applicano in WordPress.

Metodo 1: CDN con conversione WebP al volo

Il percorso più semplice. Colleghi una CDN che ottimizza le immagini al volo e serve WebP ai browser che lo supportano. Le copie convertite non vengono archiviate sul tuo server, risparmiando spazio su disco.

Diverse opzioni funzionanti:

• BunnyCDN con Bunny Optimizer, comprime e converte le immagini al volo, supporta WebP nella cache key. A partire da $0,01/GB.
• Cloudflare con Polish (piano Pro, $20/mese), compressione automatica e conversione in WebP.
• Cloudinary, un servizio specializzato nella gestione delle immagini, WebP nativo.
• ShortPixel Adaptive Images, un plugin WordPress che usa la CDN bunny.net. Converte e distribuisce WebP automaticamente. Piano gratuito: 500 MB di traffico al mese.
• WP Compress, un servizio ibrido: ottimizzazione delle immagini più distribuzione tramite la loro CDN proprietaria.

Quando scegliere il metodo 1: se sei disposto a pagare per una CDN e non vuoi smanettare con la configurazione del server. Colleghi, attivi l'ottimizzazione, funziona.

Metodo 2: risposta variabile + CDN

Un metodo per chi preferisce risolvere il compito a livello server senza modificare il markup HTML.

L'essenza: configuri il server in modo che a un singolo URL restituisca WebP o JPEG/PNG a seconda dell'header Accept. Tutti gli URL delle immagini nel codice rimangono invariati.

Configurazione tramite WebP Express

Il modo più semplice per implementare la risposta variabile in WordPress è il plugin WebP Express. Il plugin ha oltre 400.000 installazioni attive, aggiornamenti regolari, supporto attivo dell'autore. Fa tre cose:

• Converte le immagini caricate in WebP.
• Scrive le regole di reindirizzamento (.htaccess per Apache/LiteSpeed o regole Nginx).
• Quando viene richiesta un'immagine, controlla l'header Accept e restituisce il formato necessario.

Dopo l'installazione, basta cliccare "Salva impostazioni e forza nuove regole.htaccess". Il plugin configurerà il convertitore e le regole da solo.

Per server Nginx

WebP Express genera regole per .htaccess (Apache/LiteSpeed/OpenLiteSpeed). Se hai Nginx, devi scrivere manualmente le regole nella configurazione:

1
## --- Nginx rules: try WebP first, fallback to converter
2
location ~* ^/?wp-content/.*\.(png|jpe?g)$ {
3
  add_header Vary Accept;
4
  expires 365d;
5
  if ($http_accept !~* "webp") {
6
    break;
7
  }
8
  try_files
9
    /wp-content/webp-express/webp-images/doc-root/$uri.webp
10
    $uri.webp
11
    /wp-content/plugins/webp-express/wod/webp-on-demand.php?xsource=$request_filename&wp-content=wp-content
12
    ;
13
}
14
 
15
## --- Route missing .webp requests to the realizer
16
location ~* ^/?wp-content/.*\.(png|jpe?g)\.webp$ {
17
    try_files
18
      $uri
19
      /wp-content/plugins/webp-express/wod/webp-realizer.php?wp-content=wp-content
20
      ;
21
}
22
## --- End WebP Express rules

Cosa fanno le regole: aggiungono l'header Vary: Accept (così la CDN non memorizza nella cache il WebP per tutti), provano a servire il .webp già pronto e, se non c'è, inviano la richiesta al convertitore.

Critico: scegliere la CDN per il metodo 2

L'errore che compromette l'intero metodo: la CDN memorizza nella cache il WebP e lo serve a browser senza supporto del formato. Questo accade quando la CDN non considera l'header Accept nella chiave di cache.

Provider che funzionano correttamente con Vary: Accept:

Bunny CDN, il supporto alla risposta variabile si abilita nelle impostazioni della zona.

• KeyCDN, supporta anch'esso il WebP come parte della chiave di cache. Si abilita nelle impostazioni della zona, sezione Cache.

• Google CDN, considera Vary: Accept per impostazione predefinita.

Sul piano gratuito di Cloudflare non c'è una considerazione completa di Accept nella chiave di cache. Risultato: il WebP può arrivare dove non è supportato. Due vie d'uscita: passare al piano Pro ($20/mese) o usare una CDN che sappia gestire Vary: Accept nativamente (BunnyCDN o KeyCDN).

Combinazione WebP Express + CDN presso hosting popolari

Lo schema è uguale per tutti: installa WebP Express, poi agisci in base alle circostanze dell'ambiente server:

• Kinsta / WP Engine, contatta l'assistenza. Gli ingegneri aggiungeranno la configurazione Nginx per WebP Express e abiliteranno la chiave di cache WebP corretta nella loro CDN (KeyCDN su Kinsta).
• Cloudways, un ibrido Apache+Nginx. WebP Express con salvataggio di .htaccess di solito è sufficiente. Le regole vengono recepite automaticamente.
• SiteGround, chiedi all'assistenza di aggiungere le regole Nginx e usa una CDN compatibile.
• LiteSpeed / OpenLiteSpeed / Apache, solo WebP Express e regole .htaccess. Scegli una CDN con supporto Vary: Accept.
• VPS proprio con Nginx (LEMP), aggiungi manualmente le regole Nginx sopra e connetti una CDN con supporto Vary: Accept.

Quando scegliere il metodo 2: se non vuoi assolutamente modificare il markup HTML, hai immagini di sfondo nei CSS e sei pronto a configurare il server una volta sola.

Metodo 3: tramite tag

Un'opzione di riserva quando i primi due non sono adatti. Non richiede configurazione del server, funziona con qualsiasi CDN. Il plugin sostituisce i tag <img> standard con un costrutto <picture>, e il browser sceglie il formato da sé.

Svantaggi del metodo:

• Non funziona con le immagini di sfondo.
• Può entrare in conflitto con temi e plugin di cache che modificano l'output di <img>.
• Cambia la struttura HTML, il che a volte rompe i plugin di lazy loading.

Configurazione tramite WebP Express

Lo stesso WebP Express può funzionare in modalità <picture>. Nelle impostazioni seleziona la modalità "CDN friendly" e abilita l'opzione "Alter HTML". Il plugin racchiuderà al volo tutti gli <img> in <picture> con una sorgente WebP.

Quando scegliere il metodo 3: se non c'è accesso alla configurazione del server e la CDN non supporta Vary: Accept. Ad esempio, hosting economico con limitazioni rigide o Cloudflare gratuito.

Video: WebP in WordPress in 10 minuti

Se preferisci guardare invece di leggere, ecco un tutorial visivo sulla configurazione di WebP tramite WebP Express:

Il video mostra la configurazione completa di WebP Express dall'installazione alla verifica in Chrome DevTools. Si accenna anche alla conversione in AVIF, come passo successivo dopo il WebP.

⁉️🤔 Domande frequenti

WebP è sempre una riduzione delle dimensioni?

Non sempre, ma nella maggior parte dei casi. Per foto e screenshot il risparmio è del 25-50%, secondo gli sviluppatori Google. Per immagini con testo o colori piatti, WebP può persino risultare più pesante del PNG-8. Per le immagini di contenuto, WebP offre quasi sempre un vantaggio. Per icone e grafiche semplici, SVG o PNG ottimizzato sono più indicati. Plugin come WebP Express convertono tutto, il risultato dipende dal formato di origine.

Si può usare WebP senza plugin in WordPress?

A partire da WordPress 5.8, sì. Il core accetta i file .webp durante il caricamento nella libreria media. Ma non c'è conversione automatica delle vecchie immagini, né sostituzione del formato per il browser. Se carichi solo nuove immagini in WebP e ti sta bene l'assenza di fallback per una piccola percentuale di browser obsoleti, i plugin non sono obbligatori. Per un'implementazione completa su un sito esistente non puoi fare a meno di un plugin: servono la conversione in batch e un meccanismo di sostituzione del formato.

Come verificare che WebP venga servito correttamente?

Apri il sito in Chrome, premi F12, scheda Network, filtra per Img. Nella colonna Type dovrebbe comparire webp. In alternativa: nella risposta del server cerca l'header X-WebP-Express (se usi WebP Express) oppure content-type: image/webp. Chrome DevTools è il metodo più affidabile: filtra per immagini e guarda la colonna Type. Se dice webp, tutto funziona.

Cosa fare se la CDN memorizza WebP in modo errato nella cache?

Sintomo: alcuni utenti vedono immagini rotte, anche se tutto è abilitato nelle impostazioni. Soluzione: assicurati che la CDN consideri gli header Accept e Vary nella chiave di cache. Nei pannelli di BunnyCDN e KeyCDN ci sono opzioni esplicite per questo. Se Accept non è nella chiave di cache, la prima richiesta da Chrome creerà una copia WebP, e tutti gli utenti successivi, incluso Safari senza WebP, riceveranno esattamente questa copia. Su Cloudflare non c'è una soluzione gratuita: o passi a Pro o cambi CDN.

WebP o AVIF, cosa scegliere nel 2026?

AVIF offre una compressione ancora migliore (20-30% in meno rispetto a WebP a parità di qualità), ma il supporto dei browser è ancora in ritardo: circa il 92% contro il 96% di WebP. Nel 2026, WebP resta lo standard de facto per il web. AVIF sta recuperando, ma il divario nel supporto dei browser è ancora critico per i progetti commerciali. Una strategia pratica: WebP ora, AVIF quando il supporto supererà il 95%.

Quale metodo scegliere per il tuo progetto: riepilogo finale

La scelta del metodo non dipende da quale sia "migliore in assoluto", ma dal tuo stack specifico e dalla disponibilità a investire tempo o denaro:

• Pronto a pagare una CDN e non toccare il server, metodo 1 con BunnyCDN (da $0,01/GB) o Cloudflare Pro ($20/mese). Si configura in cinque minuti e poi te ne dimentichi.
• Hai accesso al server e vuoi risolvere una volta per tutte, metodo 2 con WebP Express e una CDN che supporti Vary: Accept. Funziona con le immagini di sfondo, non tocca l'HTML.
• Nessun accesso al server e budget limitato, metodo 3 con WebP Express in modalità <picture>. Non è l'ideale, ma meglio di niente WebP.

Testa il metodo scelto in staging. Controlla gli header di risposta e la colonna Type in Chrome DevTools. Assicurati che i browser obsoleti ricevano JPEG, non link rotti. E solo dopo fai il deploy in produzione.

Prova WebP Express, il plugin copre entrambi i metodi lato server out of the box ed è gratuito. Scrivi nei commenti quale approccio hai scelto e quali problemi hai incontrato.