WebP: mettiamo il turbo con il formato immagini di Google

WebP vs. JPG

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 JPG a WebP con riduzione della qualità, la compatibilità con i vari browser.

Foto utilizzata per la prima comparazione tra i formato JPG e WebP
Foto utilizzata per la prima comparazione tra i formato JPG e WebP

Prendiamo per esempio la foto di sopra: nel suo formato originale JPG, 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 JPG non compresso e -11% rispetto al JPG 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 JPG non compresso, riduzione percentuale rispetto al JPG non compresso)
90% : 490 KB (-4%, +43%)
80% : 354 KB (-30%, +3% )
75% : 308 KB (-39%, -10%)
70% : 292 KB (-42%, -15%)
60% : 268 KB (-47%, -22%)
50% : 241 KB (-53%, -30%)
40% : 215 KB (-58%, -37%)
30% : 181 KB (-64%, -47%)
20% : 144 KB (-72%, -58%)
10% : 108 KB (-79%, -68%)

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.

Foto contenente del testo utilizzata per la seconda comparazione tra i formato JPG e WebP
Foto utilizzata per la prima comparazione tra i formato JPG e WebP

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à.

Compatibilità di WebP

Attualmente WebP è compatibile con quasi tutti i browser, ad eccezione di Safari e di Internet Explorer, per i quali però utilizzando il tag Picture è possibile mostrare il classico formato JPG. Quindi via libera a WebP: a partire dai prossimi progetti, infatti, PSD to HTML lo adotterà come formato standard per le immagini sia nei template HTML che nei temi WordPress (con integrazione dei contenuti).

Software grafici

Sia Sketch che GIMP integrano nativamente l’esportazione dei file grafici in WebP. Per Photoshop occorre installare un plugin. Invece Affinity Designer ad oggi non lo supporta, nonostante le continue richieste di adozione.

Download

Metto a disposizione anche le foto del test per controllarne la qualità.