UX & Coding

Con WebP immagini leggere e pagine veloci

"L'utilizzo del formato WebP consente di ottenere immagini di dimensioni inferiori migliorando sensibilmente i tempi di caricamento delle pagine web"

WebP è un formato immagine sviluppato da Google nel 2010 che offre una compressione lossless e lossy superiore rispetto ai formati tipicamente utilizzatili sul web e viene utilizzato per creare file ottimizzati che rendono rapido il caricamento delle pagine.

Vantaggi di WebP

Le immagini WebP hanno dimensioni inferiori di circa il 30% (studio comparativo effettuato da Google) rispetto a PNG e JPEG con qualità visiva equivalente e supportano tutte le funzionalità più comuni degli altri formati:

WebPPNGJPGGIF
Compressione lossy
Compressione lossless
Trasparenza
Animazione
Exif metadata
Profilo colore

Grazie ad una migliore compressione delle immagini e al supporto di diverse funzionalità, WebP può essere un eccellente sostituto per la maggior parte dei formati di immagine: PNG, JPEG o GIF.

Come funziona la compressione

Le immagini WebP possono essere compresse tramite i metodi lossless (senza perdita di dati) o lossy (con perdita di dati), due tecniche utilizzate per ottenere una perdita di peso differente.

WebP Lossless

La compressione WebP senza perdita funziona grazie ad una tecnica di previsione dove ciascun blocco di pixel viene generato matematicamente in base ad altri che lo circondano.

La differenza fra la previsione e la realtà viene quindi codificata utilizzando parti dell’immagine che sono già state analizzate per costruire quelle che rimangono.

WebP Lossless<
In tutte le misurazioni WebP dimostra di ottenere i migliori risultati

Per ottenere questo risultato è necessario ricorrere all’utilizzo una varietà di tecniche che includono:

  • Predictor (Spatial) Transform: l’immagine è divisa in più aree quadrate e tutti i pixel in un quadrato utilizzano la stessa modalità di previsione sfruttando il fatto che i pixel vicini sono spesso simili e “correlati”
  • Color (de-correlation) Transform: l’obiettivo è decorrelare i valori R, G e B di ciascun pixel mantenendo il valore del verde (G) e trasformando il rosso (R) in base al verde e il blu (B) in base al verde e quindi in base al rosso
  • Subtract Green Transform: sottrae i valori verdi dai valori rosso e blu di ciascun pixel e quando è presente questa trasformazione, il decodificatore deve aggiungere il valore verde sia a rosso che a blu
  • Color Indexing (palettes) Transform: controlla il numero di valori ARGB univoci e se è al di sotto di una soglia (256), crea un array che viene quindi utilizzato per sostituire i valori dei pixel con l’indice corrispondente.
  • Color cache coding: utilizza frammenti di immagini già visti per ricostruire nuovi pixel o può anche usare una tavola colori locale (continuamente aggiornata per riutilizzare i colori recenti) se non viene trovata alcuna corrispondenza interessante

Una volta completato il processo di trasformazione, l’ultimo passaggio della compressione senza perdita consiste nell’eseguire una codifica che utilizza una variante dell’algoritmo Huffman LZ77 chiamata LZ77 Backward Reference.

Le immagini WebP senza perdita hanno dimensioni inferiori del 25-34% rispetto alla media degli altri formati.

WebP Lossy

La compressione WebP con perdita utilizza la stessa tecnologia predittiva per le immagini che si trova nel codec video VT8, più comunemente noto come WebM dividendo il frame in segmenti più piccoli chiamati macroblocchi.

Quando si utilizza questo tipo di compressione, WebP considera i pixel adiacenti tra loro e quindi conta solo le differenze impiegando una codifica predittiva.

WebP lossy
Le diverse modalità di previsione utilizzate nella compressione lossy

La compressione avviene attraverso un processo chiamato discrete cosine transform, o DCT, che converte i dati ridondanti in valori zero che vengono quindi rimossi: in questo modo i file risultanti possono essere così piccoli.

WebP utilizza la quantizzazione a blocchi e distribuisce i bit in modo adattivo su diversi segmenti dell’immagine ottenendo una compressione migliore rispetto alla codifica Huffman utilizzata in JPEG.

Ottenere immagini in formato WebP

Esistono diversi strumenti che possono essere utilizzati per convertire i file JPG, PNG o altre tipologie di immagini in WebP.

Photoshop (+ WebPShop)

Per chi ha familiarità con software come Photoshop, il modo più semplice per esportare in WebP è utilizzare plugin come WebPShop che consente di regolare alcune caratteristiche come qualità o livello di compressione.

WebPShop WebP
WebPShop permette di gestire immagini e animazioni WebP da Photoshop

Altri programmi di grafica o di disegno come il famoso Sketch possono esportare in WebP nativamente.

Direttamente online

Squoosh è il nome dell’applicazione realizzata dal team al lavoro su Chrome e permette di comprimere le immagini riducendone il peso senza comprometterne la qualità ottenendo una versione WebP.

Squoosh WebP

Per impostazione predefinita viene sfruttato l’encoder MozJPEG per le immagini JPG e il software OptiPNG per quelle PNG, ma è possibile scegliere tra numerose opzioni di ridimensionamento e ottimizzazione.

Per chi usa WordPress

Attraverso il plugin ShortPixel è possibile gestire in modo completamente automatico e la conversione dei file.

È uno strumento per l’ottimizzatone di immagini JPEG, PNG, GIF (anche animate), WebP e di PDF e grazie ad un potente algoritmo di compressione è in grado di restituire immagini di alta qualità con una sensibile riduzione di peso.

ShortPixel WebP
ShortPixel effettua la conversione automatica dei file generando la versione WebP

ShortPixel copia le immagini sui suoi server, le comprime mantenendo gli originali nelle cartelle di backup e poi le sostituisce con quelle ottimizzate.

Command line tools

cwebp è lo strumento da riga di comando più popolare per convertire le immagini nel formato WebP: una volta installato, possiamo usarlo per convertire le immagini scegliendo, tra le varie opzioni come la qualità del file finale.

# cwebp -q [quality] [input_file] -o [output_file]
cwebp -q 75 img.png -o img.webp

Supporto e utilizzo nelle pagine

WebP è supportato nativamente in Google Chrome, Firefox, Microsoft Edge, Opera e da molti altri strumenti e librerie software; anche servizi come quello di messaggistica istantanea Telegram usa questo formato per gli sticker.

Data on support for the webp feature across the major browsers from caniuse.com

Sebbene la compatibilità di WebP sia piuttosto alta nei casi di mancato supporto Safari o iOS Safari ad esempio, l’immagine apparirà mancante se non viene fornita un’alternativa in un formato differente.

Per garantire il corretto funzionamento e la massima compatibilità viene in aiuto il tag <picture> che opera in modo simile ai tag <audio> e <video>, consentendo di posizionare più sorgenti all’interno dell’elemento padre.

<picture>
<source srcset="immagine.webp" type="image/webp">
<source srcset="immagine.jpg" type="image/jpeg">
<img src="immagine.jpg" alt="La mia immagine" />
</picture>

Ciascuna sorgente utilizza attributi specifici per definire il tipo e il percorso dell’immagine da mostrare:

srcset
l’URL dell’immagine da utilizzare per ogni tipo di estensione
type
l’Internet media type della sorgente

Con questa sintassi i browser che non supportano il tag <picture> mostreranno l’immagine specificata attraverso il tag <img>.

Per informazioni più dettagliate sull’utilizzo di questo tag e la gestione di immagini responsive rimando la lettura a questo ottimo articolo How to Use HTML5 “picture”, “srcset”, and “sizes” for Responsive Images.

Il futuro di WebP

Google ha reso disponibile durante il Chrome Dev Summit 2019 un video che racconta i traguardi raggiunti dal formato WebP dalla sua nascita al 2019.

Non mancano accenni alle prossime funzionalità su cui gli sviluppatori stanno lavorando come un algoritmo che promette un miglioramento del 25% sulla riduzione del peso, supporto all’HDR e un minore consumo di risorse per processare il rendering le immagini.

Unisciti alla community! Rimani aggiornato, scopri le migliori guide e ricevi risorse gratuite.



Aggiungi un commento

UX & Coding

Articoli recenti

Newsletter

Inserisci la tua email per restare aggiornato sulle ultime novità.