Immagini WebP: perché utilizzarle?

WebP è un formato di immagine sviluppato e rilasciato per la prima volta da Google nel 2010. Supporta la codifica delle immagini in entrambi i formati: lossless e lossy. Una compressione è di tipo Lossy quando l’informazione contenuta nel file compresso è minore di quella contenuta nel file di origine. La compressione è di tipo Lossless quando l’informazione contenuta nel file compresso è identica a quella contenuta nel file di origine. Tale compatibilità rende il formato particolarmente versatile per qualsiasi tipo di supporto visivo, ed è un ottimo formato alternativo a PNG o JPEG. La qualità visiva del WebP è spesso paragonabile ai formati più utilizzati. Di seguito è riportato un confronto tra un’immagine WebP e un’immagine JPEG:

Nell’esempio sopra, le differenze visive sono quasi impercettibili, ma le differenze nella dimensione del file sono sostanziali. La versione JPEG a sinistra pesa 90KB, e la versione WebP a destra è circa un terzo più piccola, con un peso di soli 38KB. Non male, soprattutto se si considera che la qualità visiva tra le due è comparabile. Tuttavia, poiché il WebP è una tecnologia di Google, il supporto è fisso per i browser basati su Blink (motore di rendering per browser web proveniente da una fork di Google del componente WebCore di Webkit, sviluppato come parte del progetto Chromium). Questi browser rappresentano una porzione significativa di utenti in tutto il mondo. Ciò significa che, quasi l’80% dei browser in uso supporta il WebP.

Perché usare il formato WebP?
WebP è un formato incredibilmente utile perché offre sia prestazione che funzionalità. E, come già accennato, a differenza di altri formati, WebP supporta la compressione lossy e lossless, nonché la trasparenza e l’animazione.

Nonostante queste funzionalità, WebP offre file di dimensioni costantemente inferiori rispetto alle sue alternative. In uno studio comparativo di questi formati di immagine, è emerso che le immagini con perdita di WebP erano in media inferiori del 30% rispetto a JPG e che invece, le immagini senza perdita di WebP erano in media inferiori del 25% rispetto a PNG.

Come convertire un’immagine nel formato WebP
Esistono diversi strumenti che possiamo utilizzare per convertire i nostri JPG, PNG e atri formati in WebP.
Strumenti Online:

1. Squoosh – Strumento di compressione e conversione online di immagini
2. Online-convert.com – Strumento di conversione online di immagini

Entrambi gli strumenti sono molto semplici da utilizzare, nonché gratuiti. Infatti, basta caricare un’immagine di qualsiasi formato e scegliere come formato di conversione il WebP, e il gioco è fatto!

Node Tools:
In alternativa è possibile utilizzare il plugin imagemin-webp, ossia una delle librerie di node più popolari per convertire le immagini nel formato WebP.
Di seguito è riportato uno script di esempio che converte tutti i file PNG e JPG nella Directory di WebP.

E’ possibile poi utilizzare questo script tramite linea di comando o attraverso build tool.

Come utilizzare il WebP sul Web
In questo momento, il formato WebP è supportato dal 78,81% dei browser, globalmente.

Sebbene questo formato risulta essere migliore rispetto ad altri, è giusto precisare che, siccome il formato WebP non è ancora supportato da tutti i browser, inserire esclusivamente immagini in formato WebP nel proprio sito, significherebbe rendere inaccessibili queste immagini al restante 21,19% dei browser. Una percentuale molto alta, direi.

Doweb è in grado di risolvere questo problema in base alle diverse circostanze. Da quelle più semplici a quelle più complesse. Nel primo caso forniamo un fallback alle immagini utilizzando lo specifico elemento <picture>. Questo elemento di HTML5 ci consente di fornire più fonti per una singola immagine.

Per fornire una fonte di immagine alternativa, utilizziamo l’elemento <source> all’interno dell’elemento <picture>. L’elemento <source> ha un numero di attributi che possiamo usare per definire l’immagine:

1. Type: il tipo MIME della fonte
2. Srcset: il percorso del file di immagine. E’ possibile utilizzare più file per fornire dimensioni / densità dell’immagine diverse.
3. Sizes: un elenco di dimensioni di ciascun file di origine.
4. Media: una query multimediale che determinerà lo specifico utilizzo di una determinata immagine.

Oltre ai vari <source>, è necessario fornire anche un normale elemento <img> come fallback per i browser che non supportano i diversi formati di file tramite l’elemento <picture>. Il tutto sarà gestito da Doweb, che valuterà attentamente ogni singolo dettaglio, garantendo l’ottimizzazione del sito senza trascurarne la qualità e la funzionalità.