| Massimo Fuser - Genius@Work | 27-11-2020
[articolo revisionato in data 11 Luglio 2024]
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
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.
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.
Il “suggerimento” di PageSpeed Insights è questo:
Cliccando su ‘Ulteriori informazioni’:
Cliccando sui tre formati immagine raccomandati si scopre la compatibilità con i browser:
https://caniuse.com/#feat=webp
https://caniuse.com/#feat=jpegxr
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.
Il soggetto del test è questa immagine presa da Pixabay:
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:
Formato JPEG ottimizzato, 213KB.
Mantenendo le impostazioni standard dell’app abbiamo praticamente dimezzato il peso dell’immagine.
Processiamo ora l’immagine con un convertitore online, disponibile a questo indirizzo: https://webp-converter.com/ per salvarla nel formato WebP oppure utilizzando il convertitore da JPG in PDF o WebP di Canva:
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:
Formato PNG nativo, 532KB.
ImageOptim:
Formato PNG ottimizzato, 483KB.
Convertitore online:
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.
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
