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