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

Compatibilità di WebP

Attualmente WebP è compatibile con quasi tutti i browser, ad eccezione di Internet Explorer e di Safari, fino alla versione 13. Infatti il browser di Apple guadagnerà il supporto al WebP proprio con la versione 14 attualmente in fase preliminare. Con i browser non compatibili con WebP si potrà comunque utilizzare il tag picture per mostrare il classico formato JPEG.

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

Quindi via libera a WebP: a partire dai prossimi progetti, infatti, questo formato potrà essere adottato per le immagini nei template HTML e in alcuni 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à.