Gestisci e ottimizza le tue immagini con WebP

| Massimo Fuser - Genius@Work | 27-11-2020

WebP è un formato di compressione immagine introdotto da Google (Google Developers) nel 2010. Web designer e sviluppatori si imbattono in questo formato aperto soprattutto nei speed-test dei siti web.

Il messaggio del risultato del test invita a convertire le immagini elencate nel formato WebP, al fine di ottimizzare le prestazioni del sito web influenzate dalla compressione delle immagini.

 

Sommario:
1- Caratteristiche e performance dichiarate di WebP
2- Applicazioni compatibili
3- Parentesi curiosità
4- Test sul campo
5- Conclusioni

 

Caratteristiche e performance dichiarate di WebP

Il formato WebP è sviluppato da Google, come anticipato nell’introduzione, a partire dal codec video VP8, da cui è nato anche WebM (formato di compressione audio/video).

L’estensione del file: .webp.

Il suo scopo è permettere di utilizzare immagini di peso (in termini di bytes) più basso, mantenendo inalterata o quasi la qualità.

Potenzialmente ecco cosa comporta:

·      immagini più piccole del 25-35% rispetto al formato JPEG

·      del 25% rispetto al PNG

·      supporta la trasparenza senza perdita dati, PNG con canale alfa

·      supporta l’animazione GIF

Sembrerebbe il formato definitivo, ma nel web le sorprese sono sempre dietro l’angolo. Ma andiamo con ordine.

 

Applicazioni compatibili

In linea di massima non ci sono problemi di compatibilità con i browser più noti. Chrome, Firefox, Opera e Edge e tecnicamente tutti i browser che sono in grado di visualizzare WebM sono tecnicamente in grado di supportare WebP tramite Javascript.

Dal 2010 ad oggi il formato si è fatto strada oltre che nativamente introdotto nei programmi di grafica più noti, anche nelle applicazioni di messaggistica come ad esempio gli stickers di WhatsApp.

 

Parentesi curiosità

Il “suggerimento” di PageSpeed Insights è questo:

webp-google-suggestion

Cliccando su ‘Ulteriori informazioni’:

webp-google-format

Cliccando sui tre formati immagine raccomandati si scopre la compatibilità con i browser:

webp-compatibility

https://caniuse.com/#feat=webp

jpeg-xr-compatibility

https://caniuse.com/#feat=jpegxr

jpeg-2000-compatibility

https://caniuse.com/#feat=jpeg2000

 

E’ stato il formato JPEG 2000 che mi ha portato ad approfondire. Mi sono chiesto come Google possa raccomandare un formato di compressione di ben 24 anni fa, del 1992 si parla, come introduzione e poi sviluppato negli anni a seguire.

Un ottimo formato, sia lossy che lossless , ma non più compatibile con Chrome in primis.

Stessa cosa anche per il JPEG XR, ripeto, ottimi formati di compressione, ma non compatibili!

Forse avranno voluto esaltare le potenzialità del loro WebP.

 

Test sul campo

Il soggetto del test è questa immagine presa da Pixabay:

 

pappagallo-jpg

Formato JPEG nativo, 422KB.

 

La prassi iniziale prevede, prima di richiamare l’immagine nel sito web in costruzione, di processare il file attraverso un tool di ottimizzazione. Nel mio caso ho utilizzato ImageOptim:

 

pappagallo-jpg-imageoptim

Formato JPEG ottimizzato, 213KB.

 

Mantenendo le impostazioni standard dell’app abbiamo praticamente dimezzato il peso dell’immagine.

 

Processiamo ora l’immagine con un convertire online, disponibile a questo indirizzo: https://webp-converter.com/ per salvarla nel formato WebP:

 

pappagallo-jpg-webp

Formato WebP, 176KB.

 

Sempre con impostazioni standard abbiamo ulteriormente abbassato la dimensione in termini di KBytes. Un buon risultato, abbinato alle classiche regole di ottimizzazione porterà notevoli benefici al sito web.

 

Testiamo la compressione su un immagine di partenza in formato PNG:

 

pappagallo-png

 

Formato PNG nativo, 532KB.

 

ImageOptim:

 

pappagallo-png-imageoptim

 

Formato PNG ottimizzato, 483KB.

 

Convertitore online:

 

pappagallo-png-webp

 

Formato WebP, 74KB.

 

Sempre con impostazioni standard abbiamo ulteriormente abbassato la dimensione in termini di KBytes. Un ottimo risultato. Le immagini PNG sono largamente usate nella realizzazione di un sito web, perché permettono di creare immagini e sovrapposizioni di effetto donando al sito web personalità ed efficacia visiva.

 

Conclusioni

Ho riassunto in questo articolo il risultato di tre test su tre immagini diverse e i risultati sono stati confermati sempre nello stesso ordine di successo. Ovviamente questi risultati non rappresentano assolutamente una regola, perché molto dipende da settaggi e caratteristiche dell’immagine, comunque il formato WebP in fase di realizzazione di un sito web è da tenere in considerazione.

Ho utilizzato un convertitore online come già scritto nell’articolo, per comodità d’uso e proprio per mantenere il più possibile standardizzate le impostazioni.

Esistono tool e app per PC Windows e macOS e plug-in per software di grafica come Photoshop. La conversione delle immagini può altresì essere effettuata anche da linea di comando, la varietà di metodologie di compressione è vasta e non è il fulcro di quest’articolo; merita di essere approfondita in un prossimo articolo alla luce anche di un’analisi di compatibilità con i sistemi operativi o con le versioni dei software di grafica.

 

 

Ti invitiamo a visitare la nostra pagina relativa alla grafica, sono sicuro troverai interessanti informazioni.

 

Massimo Fuser

Genius@Work

articoli della stessa categoria

Ultime news