Se hai già eseguito un test su Google PageSpeed Insights e ricevuto l'avviso "Utilizza formati di immagine di nuova generazione", Google ti sta chiedendo esattamente questo: convertire le tue immagini JPG e PNG in WebP. È uno degli interventi con il maggiore impatto sulle prestazioni di un sito — e anche uno dei più semplici da implementare.
Perché convertire in WebP?
WebP è un formato sviluppato da Google e lanciato nel 2010, progettato specificamente per il web. Usa algoritmi di compressione più moderni rispetto a JPG e PNG e offre, alla stessa qualità visiva:
- 25–35% di peso in meno rispetto a JPG in modalità lossy (compressione con perdita)
- 20–30% di peso in meno rispetto a PNG in modalità lossless (compressione senza perdita)
- Supporto alla trasparenza (canale alfa) — a differenza del JPG, che non ce l'ha
- Supporto alle animazioni — a differenza del PNG, che non ce l'ha nativamente
In pratica, l'impatto è reale. Una galleria di prodotti e-commerce con 20 foto da 300 KB ciascuna in JPG (6 MB totali) può arrivare a 4 MB in WebP con la stessa qualità visiva — una riduzione del 33% nel peso della pagina. Per Google, questo significa un LCP più veloce, un punteggio migliore su PageSpeed e un potenziale miglioramento nel posizionamento.
| Caratteristica | WebP | JPG | PNG |
|---|---|---|---|
| Compressione lossy (foto) | ✅ Molto efficiente | ✅ Efficiente | ❌ Non supportata |
| Compressione lossless | ✅ Supportata | ❌ Non supportata | ✅ Supportata |
| Trasparenza (canale alfa) | ✅ Supportata | ❌ Non supportata | ✅ Supportata |
| Animazione | ✅ Supportata | ❌ Non supportata | ❌ Non nativa |
| Dimensione vs JPG equivalente | 25–35% minore | Riferimento | 50–300% maggiore |
| Compatibilità browser | >97% (2026) | 100% | 100% |
Quando non usare WebP
Nonostante sia il miglior formato per il web moderno, ci sono situazioni in cui WebP non è ancora la scelta giusta:
- Email marketing: client di posta come Outlook e Apple Mail hanno un supporto incostante a WebP. Per le email HTML, JPG e PNG restano più sicuri.
- Stampa grafica: tipografie e software di stampa tradizionali non lavorano con WebP. Per i file destinati alla stampa, usa JPG di alta qualità o PNG.
- Piattaforme con restrizioni di formato: YouTube non accetta WebP per il caricamento delle miniature (accetta JPG e PNG). Alcuni moduli di sistemi legacy richiedono JPG. Verifica il formato accettato prima di convertire.
- File che devono essere aperti da chiunque sul computer: gli utenti finali che cliccano su link di download e provano ad aprire il file nel visualizzatore predefinito di Windows possono avere problemi con WebP nelle versioni più vecchie del sistema.
✅ Riepilogo pratico: usa WebP per tutto ciò che va sul web — sito, blog, e-commerce, social network. Usa JPG o PNG per email marketing, stampa e file inviati a terzi che potrebbero non supportare WebP.
Metodo 1 — Conversione online (il più veloce, senza installare nulla)
Per convertire immagini occasionali — o quando serve un risultato rapido senza configurare nulla — un convertitore online è la via più diretta. Il Convertitore di Immagini di ImageTools converte JPG, PNG e altri formati in WebP direttamente nel browser, senza inviare i file a server esterni.
- Accedi al Convertitore di Immagini.
- Seleziona o trascina le immagini nell'area di caricamento.
- Scegli WebP come formato di output.
- Scarica le immagini convertite singolarmente o in ZIP se sono più file.
Converti in WebP ora — online e gratis
JPG, PNG e altro — senza registrazione, senza inviare file a server esterni, senza limiti di dimensione.
Converti in WebPMetodo 2 — WordPress (automatico per tutto il sito)
Per i siti WordPress, l'approccio più efficiente è usare un plugin che converte e serve WebP automaticamente — senza dover rielaborare manualmente ogni immagine.
WordPress 6.1+ (conversione nativa)
A partire dalla versione 6.1, WordPress converte automaticamente le immagini in WebP durante il caricamento, purché il server supporti la libreria libwebp (la maggior parte dei server moderni con PHP 8+ la supporta). Non devi fare nulla — WordPress genera versioni WebP delle immagini e serve il formato corretto a ogni browser automaticamente.
Per verificare se è attivo: vai su Impostazioni → Media e cerca l'opzione di conversione WebP. Se non è disponibile, il server non ha il supporto — valuta un plugin.
Con plugin (versioni più vecchie o maggiore controllo)
I plugin più usati per la conversione WebP in WordPress sono:
- ShortPixel Image Optimizer — converte le nuove immagini al caricamento e ha l'opzione di rielaborare tutta la libreria esistente. Gratuito fino a 100 immagini/mese.
- Imagify — interfaccia semplice, conversione automatica e opzione di ottimizzazione in batch. Piano gratuito disponibile.
- WebP Express — plugin focalizzato specificamente su WebP, converte e configura automaticamente le regole del server.
Metodo 3 — Riga di comando con cwebp (per sviluppatori)
Google distribuisce gratuitamente lo strumento cwebp — l'encoder ufficiale di WebP — per la conversione da terminale. È il metodo più veloce per convertire grandi batch di immagini su un server o in una pipeline di build.
Installazione
# Ubuntu / Debian
sudo apt-get install webp
# macOS (Homebrew)
brew install webp
# Windows — scarica il binario da: https://developers.google.com/speed/webp/download
Conversione di base
# Converti un file JPG in WebP con qualità 80
cwebp -q 80 foto.jpg -o foto.webp
# Converti PNG in WebP lossless (senza perdita)
cwebp -lossless logo.png -o logo.webp
# Converti tutti i JPG di una cartella (Bash)
for f in *.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; done
Il parametro -q controlla la qualità (0–100). Per il web, valori tra 75 e 85 offrono il miglior equilibrio tra qualità visiva e dimensione del file. Usa -lossless per immagini che richiedono compressione senza perdita (loghi, screenshot con testo).
Metodo 4 — Node.js con sharp (per pipeline di build)
Per progetti che usano Node.js — come siti in Next.js, Gatsby, Nuxt o qualsiasi build automatizzata — la libreria sharp è l'opzione più efficiente per la conversione WebP in pipeline:
// npm install sharp
const sharp = require('sharp');
// Converti JPG in WebP con qualità 80
sharp('foto.jpg')
.webp({ quality: 80 })
.toFile('foto.webp');
// Converti PNG in WebP lossless
sharp('logo.png')
.webp({ lossless: true })
.toFile('logo.webp');
// Converti tutti i file di una cartella
const fs = require('fs');
const path = require('path');
fs.readdirSync('./immagini')
.filter(f => /\.(jpg|jpeg|png)$/i.test(f))
.forEach(file => {
const input = path.join('./immagini', file);
const output = path.join('./immagini', file.replace(/\.[^.]+$/, '.webp'));
sharp(input).webp({ quality: 80 }).toFile(output);
});
Il modulo sharp usa la libreria nativa libvips ed è significativamente più veloce delle soluzioni JavaScript pure — ideale per generare versioni WebP durante il build di siti statici.
Come implementare WebP con fallback per i browser più vecchi
Sebbene la compatibilità di WebP nel 2026 sia superiore al 97%, possono ancora esistere contesti in cui è necessario un fallback — sistemi aziendali con IE11, dispositivi molto vecchi, o semplicemente per la massima garanzia di compatibilità.
La soluzione corretta è il tag HTML <picture>, che permette di dichiarare fonti alternative dell'immagine in ordine di preferenza:
<!-- Il browser usa WebP se lo supporta, altrimenti usa JPG -->
<picture>
<source srcset="foto.webp" type="image/webp">
<img src="foto.jpg" alt="Descrizione della foto" width="800" height="600">
</picture>
<!-- Con più dimensioni per schermi Retina -->
<picture>
<source
srcset="foto-800.webp 800w, foto-1600.webp 1600w"
type="image/webp">
<source
srcset="foto-800.jpg 800w, foto-1600.jpg 1600w"
type="image/jpeg">
<img src="foto-800.jpg" alt="Descrizione della foto"
width="800" height="600" loading="lazy">
</picture>
Il browser valuta le fonti nell'ordine dichiarato: se supporta WebP, usa il <source> con type="image/webp". Se non lo supporta, ricade sul JPG nell'<img>. Il tag <img> finale è obbligatorio — è quello che definisce l'alt, le dimensioni e il comportamento predefinito.
Configurare il server per servire WebP automaticamente (Apache)
Un'alternativa al <picture> è configurare il server per rilevare se il browser accetta WebP e servire automaticamente la versione corretta. In Apache, aggiungi al .htaccess:
<IfModule mod_rewrite.c>
RewriteEngine On
# Serve .webp se esiste e il browser lo accetta
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} \.(jpe?g|png)$
RewriteCond %{REQUEST_FILENAME}\.webp -f
RewriteRule ^ %{REQUEST_URI}.webp [T=image/webp,L]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>
AddType image/webp .webp
Con questa configurazione, basta avere i file .webp accanto agli originali nella stessa cartella. Apache rileva se il browser accetta WebP tramite l'header Accept e serve la versione corretta senza alcuna modifica all'HTML.
Verificare il risultato su PageSpeed
Dopo aver implementato WebP, esegui Google PageSpeed Insights (pagespeed.web.dev) sull'URL del sito. L'avviso "Utilizza formati di immagine di nuova generazione" dovrebbe scomparire o ridursi significativamente. Nel pannello delle opportunità vedrai il guadagno stimato in KB per ogni immagine non ancora convertita.
Un altro modo per verificare: apri Chrome DevTools (F12), vai alla scheda Network, filtra per "Img" e guarda la colonna "Type" delle immagini caricate. Se compare webp, la conversione funziona.
⚡ Impatto sull'LCP: il Largest Contentful Paint — una delle metriche Core Web Vitals — è spesso determinato dall'immagine principale della pagina (banner, foto prodotto). Convertire questa immagine in WebP ne riduce il tempo di download, impattando direttamente sull'LCP e sul punteggio di prestazioni di Google.
Quale livello di qualità usare nella conversione?
La qualità WebP segue la stessa logica del JPG: valori più alti preservano più dettagli ma producono file più grandi. La differenza è che, per la stessa qualità visiva, WebP usa solitamente un valore di qualità 10–15 punti inferiore rispetto al JPG equivalente.
| Uso | Qualità WebP consigliata | Equivalente JPG approssimativo |
|---|---|---|
| Foto prodotto (e-commerce) | 80–85 | 90–95 |
| Immagini di blog e articoli | 75–80 | 85–90 |
| Banner e hero del sito | 80–85 | 90–95 |
| Thumbnail e miniature | 70–75 | 80–85 |
| Loghi e grafiche (lossy) | 90 | 95+ |
| Loghi e grafiche (lossless) | -lossless | PNG |
Domande frequenti
cwebp o uno script Node.js con sharp è il metodo più efficiente — elabori centinaia di immagini in pochi secondi con un solo comando. Per WordPress, plugin come ShortPixel e Imagify hanno l'opzione di rielaborare l'intera libreria multimediale in una sola volta. Per un uso manuale occasionale, il Convertitore di Immagini di ImageTools supporta più file in un'unica sessione.