WebP: mettiamo il turbo con il formato immagini di Google

WebP è un formato per le immagini creato da Google e presentato nel “lontano” 2010. Rimasto un po’ nascosto in questi anni, negli ultimi mesi è ritornato a far parlare di sé. Come mai? Innanzi tutto perché è divenuto uno dei parametri suggeriti dal PageSpeed Insights, ma anche perché i tempi sono effettivamente maturi per l’adozione.

Vantaggi di WebP

Sappiamo molto bene che le foto rappresentano un ostacolo alle velocità di caricamento di un sito. Nel corso degli anni e dei vari progetti sono state adottate diverse tecniche per rendere i progetti sempre più performanti: la giusta scelta dei formati, le dimensioni delle immagini adeguate al dispositivo, la doppia compressione, il caricamento progressivo. I risultati sono stati efficaci. L’adozione del formato WebP porterà ulteriori benefici: un’enorme riduzione del peso del file.

I miei test

Per poterlo utilizzare nei progetti, ho prima eseguito differenti test per verificare l’effettiva riduzione in termini di KB, il degrado della foto passando dal formato JPEG a WebP con riduzione della qualità, la compatibilità con i vari browser.

Prendiamo per esempio la foto di sopra: nel suo formato originale JPEG, a 72dpi, con dimensione 1.200px per 800px. Il suo peso è di 511 KB. Non l’ho compressa.
Adottando la doppia compressione come ho fatto finora con i vari progetti, il suo peso finale è di 343 KB (-33%) e la qualità è rimasta uguale.

Partendo dalla foto non compressa ne ho creato una versione WebP a qualità 100% con Sketch e convertio.co. Con Sketch è stato un disastro: 1.8 MB (+250% rispetto al file non compresso, +425% rispetto al file compresso)! Con il servizio online convertio.co è andata meglio: 305Kb (-40% rispetto al JPEG non compresso e -11% rispetto al JPEG compresso).

Non contento del risultato ottenuto da Sketch - mi aspettavo fin da subito un concreto guadagno prestazionale - ho ridotto via via la qualità della foto in fase di esportazione per trovare un equilibrio tra qualità e peso. Eccone i risultati:

Valori del test

% Qualità : peso finale (riduzione percentuale rispetto al JPEG non compresso, riduzione percentuale rispetto al JPEG non compresso)

In tutti i casi la qualità della foto si è degradata ma la differenza con l’originale è quasi impercettibile fino al 50%. Si perdono i contorni a percentuali più basse.

Ho ripetuto lo stesso test con una foto contenente testi scritti, dove la perdita di qualità è più visibile. Il risultato è simile. I testi sono ben leggibili anche al 10%, ma dal 40% in giù si nota un forte degrado del colore.

In generale, si può ridurre la qualità delle foto tra i valori 75% e 50% senza perdere visibilmente qualità e ottenendo un guadagno tra il 10% e il 30% di peso. Nello specifico è comunque importante valutare singolarmente le foto, o il progetto web nella sua interezza, e decidere se ridurre ulteriormente il peso o preferire una migliore qualità.

WebP su WordPress e Drupal

WordPress e WebP

Dal 2022, WordPress supporta nativamente il caricamento di immagini WebP, ma non la conversione automatica. Per gestire il formato WebP in modo completo su WordPress, abbiamo diverse opzioni.

Caricamento diretto di WebP

WordPress 5.8+ permette di caricare direttamente file WebP nella libreria media. Non è necessario alcun plugin aggiuntivo, funziona esattamente come con JPEG o PNG.

Plugin per la conversione automatica

Per convertire automaticamente le immagini esistenti, consiglio questi plugin:

1. WebP Express: Converte le immagini in WebP mantenendo gli originali e serve quello appropriato in base al browser. Offre anche opzioni di cache avanzate.
2. Imagify: Ottimizza le immagini e le converte in WebP. Include funzionalità per il lazy loading e ridimensionamento automatico.
3. ShortPixel Image Optimizer: Offre una soluzione completa con conversione a WebP, compressione delle immagini e CDN integrato.

Configurazione raccomandata

Per la maggior parte dei progetti consiglio di utilizzare WebP Express con queste impostazioni:

• Conversione on-the-fly con fallback agli originali
• Quality setting: 75-85%
• Abilitazione della cache
• Mantenimento dei metadati EXIF (SEO-friendly)

Drupal e WebP

Drupal ha integrato un supporto robusto per WebP nelle versioni recenti.

Drupal 9 e 10

In Drupal 9+ la gestione di WebP è notevolmente migliorata:

1. Vai su "Configurazione > Media > Stili immagine"
2. Modifica uno stile esistente o creane uno nuovo
3. Aggiungi l'effetto "Converti" e seleziona WebP come formato di output
4. Imposta la qualità desiderata (consiglio 75-85%)
5. Salva la configurazione

Drupal servirà automaticamente le immagini WebP ai browser compatibili, mantenendo i formati originali per i browser non supportati.

Moduli per funzionalità avanzate

Per funzionalità aggiuntive, consiglio questi moduli:

• ImageMagick: Offre una migliore elaborazione delle immagini, inclusa la conversione a WebP
• Advanced Image Optimize: Conversione e compressione automatica
• Responsive Image: Per servire dimensioni diverse in base al dispositivo, combinabile con WebP

Servizi di automazione della conversione a WebP

Quando la gestione lato server non è un'opzione, o preferisci una soluzione esterna, esistono diversi servizi che automatizzano la conversione e l'ottimizzazione delle immagini.

CDN con supporto WebP

Cloudflare

Cloudflare offre la conversione automatica a WebP attraverso il servizio Polish:

1. Accedi al dashboard Cloudflare
2. Seleziona il tuo dominio
3. Vai su "Speed > Optimization"
4. Nella sezione "Polish", seleziona "Lossless" o "Lossy"
5. Attiva l'opzione "WebP"

Cloudflare convertirà automaticamente le immagini in WebP per i browser compatibili mantenendo gli originali per gli altri.

Bunny.net

Bunny.net offre una CDN con ottimizzazione immagini avanzata:

1. Configura la tua pull zone
2. Attiva l'opzione "Image Processing"
3. Abilita "WebP Compression"
4. Imposta la qualità desiderata

KeyCDN

KeyCDN supporta la conversione automatica a WebP attraverso la funzione "Image Processing":

https://example-cdn.kxcdn.com/path/to/image.jpg?width=400&webp=true

Questo URL servirà una versione WebP ridimensionata dell'immagine ai browser compatibili.

API per ottimizzazione immagini

Cloudinary

Cloudinary offre un servizio completo:

I parametri q_auto,f_auto ottimizzano automaticamente la qualità e servono WebP ai browser compatibili.

TinyPNG/TinyJPG

TinyPNG offre un'API semplice:

convert(array("type" => "image/webp"));
$converted->toFile("optimized.webp");
?>

ImageKit.io

ImageKit.io supporta trasformazioni URL-based:

https://ik.imagekit.io/your_imagekit_id/image.jpg?tr=f-webp

Strumenti desktop per batch processing

Per progetti di dimensioni medie dove la soluzione server o CDN non è disponibile, consiglio:

1. XnConvert: Potente strumento gratuito per la conversione batch di immagini
2. ImageOptim (Mac): Eccellente per compressione e conversione, con interfaccia drag-and-drop
3. Squoosh App di Google: Strumento browser-based per conversioni ad alta precisione

La scelta dello strumento dipende dalla dimensione del progetto, dal flusso di lavoro esistente e dal budget disponibile. Per la maggior parte dei siti web, una soluzione server-side o un plugin CMS rappresentano il miglior compromesso tra performance e facilità d'implementazione.

Compatibilità di WebP

WebP è oramai compatibile con tutti i browser raggiungendo una copertura globale vicina al 96%. È bene ricordare che grazie al tag picture si può mostrare il classico formato JPEG. per eventuali fallback.

<picture>
    <source srcset="upload/psd-to-html.webp" type="image/webp">
    <source srcset="upload/psd-to-html.jpg" type="image/jpeg">
    <img src="upload/psd-to-html.jpg" alt="PSD to HTML">
</picture>

Software grafici

Sketch e GIMP integrano nativamente l’esportazione dei file grafici in WebP. Per Figma è necessario invece installare un plugin, come per esempio WebP Exporter. Per Photoshop invece occorre installare il plugin WebPShop.

Conclusioni

WebP rappresenta una tecnologia ormai matura che offre vantaggi concreti per qualsiasi progetto web. Dai test effettuati emerge chiaramente come questo formato consenta di ridurre il peso delle immagini tra il 10% e il 30% mantenendo una qualità visiva praticamente indistinguibile dall'originale, specialmente con valori di qualità tra il 50% e il 75%.

Con una compatibilità browser che raggiunge il 96% della popolazione globale e la possibilità di implementare un fallback attraverso il tag , WebP può essere adottato oggi senza alcun timore. L'implementazione può avvenire manualmente sui progetti più piccoli, oppure automaticamente tramite le soluzioni server-side, i plugin per CMS o i servizi cloud che abbiamo analizzato.

Considerazioni finali e consigli pratici

In base alla mia esperienza, ecco alcuni consigli per ottenere il massimo da WebP:

• Inizia gradualmente: converti prima le immagini più pesanti e più visibili, come gli hero banner
• Trova il giusto equilibrio: per fotografie complesse, una qualità del 75% offre il miglior compromesso tra peso e resa visiva
• Per grafiche con testo: mantieni una qualità di almeno il 50% per evitare artefatti visibili
• Automatizza il processo: per siti con molte immagini, investi nella configurazione di una soluzione automatica
• Monitora i risultati: utilizza strumenti come PageSpeed Insights o WebPageTest per misurare i miglioramenti nelle prestazioni

E il futuro?

WebP ha aperto la strada a una nuova generazione di formati immagine ottimizzati per il web. Tieni d'occhio AVIF, un formato ancora più efficiente in fase di adozione, che potrebbe rappresentare il prossimo passo nell'evoluzione delle immagini web.

La velocità di caricamento è uno dei fattori più importanti per l'esperienza utente e per il posizionamento nei motori di ricerca. Adottare WebP oggi significa fare un investimento concreto nell'ottimizzazione del tuo sito web, con un impatto positivo sia per i visitatori che per la SEO.