Il nuovo formato WebP, creato specificatamente per il web, promette una maggior compressione a parità di qualità e supporta, a differenza del Jpg, le trasparenze. Ma è davvero più efficiente, e quanto? Come possiamo sfruttare al meglio le sue qualità senza produrre immagini scadenti?

Jpg e Png sono i formati tuttora più usati nel web. Ci vuole un po’ per mollare le vecchie e funzionali abitudini. Comprensibile, perché si deve dedicare tempo e impegno e mantenersi curiosi e interessati per restare al passo. Molti sono stati illuminati sulla retta via dal Signore ma non risultano ancora riscontri in questo settore.

Certo, darsi arie da “vecchi tradizionalisti duri e puri” offre qualche soddisfazione, in qualche ambito. Ma in altri molto meno e se cercate nel dizionario il contrario di “tradizione”, troverete “digital economy”. Giuro, è così, verificate.

Caratteristiche del formato WebP

Abbiamo così il nostro nuovo formato immagini WebP che si sta affermando ma la diffidenza e la poca volontà di studiare ancora a quasi sessant’anni di età mi hanno costretto (non è colpa mia quindi) a continuare ad utilizzare fino ad ora gli affidabili Jpg e Png. Ma sto per cedere anch’io e vi dimostrerò perché.

Il sospetto che mi stessi perdendo un po’ di utile tecnologia si è fatto lentamente sempre più fastidioso come la mosca d’estate sul naso mentre cerchi di schiacciare un pisolino sul divano e non è più stato sufficiente scrollare la testa e riprovarci.

Ok, studiamolo un po’ mi son detto allora una mattina. WebP, ti sistemo io! Voglio proprio vedere se si si tratta di qualcosa di pratico o un prodotto dell’UCAS (Ufficio Complicazioni Affari Semplici)…

Piccola premessa sul Jpg

Jpg è un formato con compressione e perdita dati. Gli artefatti Jpg sono ben visibili alla massima compressione e spesso intollerabili. Alla minima compressione sono invece impercettibili pur offrendo dimensioni del file ancora molto ridotte il che consente di usare immagini Jpg anche per la stampa.

Per questo motivo il Jpg rimarrà ancora un formato molto utile e diffuso: il WebP non si integra ancora al flusso di lavoro per la stampa. E se il Jpg dovesse veramente sparire, scommetto che la sua nostalgia darà vita a miti e teorie del complotto talmente è stato popolare.

Sintesi del formato WebP

Il WebP consente ai siti web di usare immagini di alta qualità ma di dimensioni nettamente inferiori rispetto ai formati tradizionali, Jpg compreso.

Permette diversi gradi di comprensione cosi da ottenere il miglior compromesso tra qualità e velocità di download dell’immagine.

Supporta le trasparenze. Per essere più chiari e meno tenici, diciamo che si può usare con le immagini senza sfondo.

È supportato da almeno 9 browser su 10 (dico almeno perché è un dato di qualche anno fa). Sicuramente supportato dal browser Google Chrome visto che Google… l’ha inventato!

Parentesi sui formati Png e Svg

Un terzo formato che ha fatto la storia sul web è il Png. Comprime (poco rispetto a Jpg e ancor meno rispetto a WebP) l’immagine senza perdita di dati (e di qualità), supporta le trasparenze ed è compatibile con tutti i browser.

Il suo uso è perciò indicato nelle immagini di piccole dimensioni come simboli e logo. Il suo difetto maggiore risiede nelle dimensioni piuttosto grandi, infatti di solito si parte volendo realizzare un Png con le sue belle trasparenze e poi si finisce… con un Jpg dal fondo bianco!

Per immagini con fondo trasparente che siano realizzate con grafica vettoriale, tipici esempi i logo, il formato più indicato è l’Svg. In quanto formato vettoriale è scalabile più dell’uomo di gomma dei Fantastici 4 ed è un vero peso piuma.

Efficienza del formato WebP

Non vorrei soffermarmi troppo su tecnicismi. Tuttavia penso che anche l’approccio ereticamente pragmatico di questo articolo necessiti di una precisazione.

Dovete sapere che esiste un parametro che esprime la qualità tecnica di un’immagine, lo Structural Similarity Index Measure (SSIM). È un metodo per prevedere la qualità percepita di una immagine digitale (un’immagina vista su uno schermo per dirla terra-terra).

Il parametro SSIM è usato per misurare la somiglianza tra due immagini, tra una originale non-compressa e l’immagine compressa. È considerata la metrica migliore per questo tipo di valutazione.

In soldoni: le prove condotte per rilevare tale parametro hanno dimostrato che un’immagine WebP ha un SSIM superiore al 25-34% rispetto a un’immagine jpg.

Per tradurla in modo ancora più semplice, a parità di qualità, una immagine WebP pesa dal 25 al 354% in meno di un’immagine Jpg.

Questa è l’efficienza di una immagine WebP, il che non significa che l’immagine WebP sia dal 25 al 35% più leggera, può esserlo molto di più (o di meno) a scapito però di una inferiore qualità percepita.

Questo articolo, non fa altro che tradurre questo concetto rendendolo alla portata (e utilizzabile) da chiunque.

Perché un’immagine compressa si rovina?

Sarebbe forse più giusto chiedersi: “perché mai non dovrebbe rovinarsi?”. In un’immagine compressa, una parte dei dati (i byte che compongono i singoli pixel e ne determinano il colore) viene sostituita da un algoritmo predittivo.

Suona importante questa locuzione “algoritmo predittivo”. Ho deciso però di infrangere ancora una volta uno dei tabù più severi della Scienza (non a caso con la s maiuscola): essere comprensibili.

Detto tra noi, l’algoritmo predittivo è un calcolo che produce un codice che occupa molto meno spazio in memoria delle singole descrizioni dei singoli pixel e che lavora in base a una “previsione” delle caratteristiche dei pixel adiacenti.

Più il file è compresso e più tenta di “prevedere”. Più tenta di prevedere è più “sbagli nella previsione” vengono fatti. Più “sbagli di previsione” vengono fatti e peggiore sarà la qualità dell’immagine.

Così, avete appena letto un’altra delle mie oltraggiose, tanto semplificate, spiegazioni tecniche. Ad ogni modo, se volete conoscere tutta la storia nei dettagli vi consiglio questa pagina di cui cito soltanto un paragrafo tanto per fare capire che non le sparo a casaccio!

La compressione Lossy WebP utilizza la codifica predittiva per codificare un’immagine, lo stesso metodo utilizzato dal codec video VP8 per comprimere i fotogrammi chiave nei video. La codifica predittiva utilizza i valori nei blocchi di pixel vicini per prevedere i valori in un blocco e poi codifica solo la differenza.

Nelle pagine web indicate trovate anche dei raffronti ma sono molto meno chiari dei miei. Ovviamente il riferimento è essenziale e primario ma uno sviluppatore non è allenato quanto un designer nella valutazione estetica dell’immagine.

Perciò, al diavolo la modestia: i miei esempi sono migliori di quelli Google, chiaro?

Confronto WebP – Jpg. Prove pratiche (molto)

Il formato WebP può realmente ridurre ai minimi termini il peso di un’immagine. Qui sta il suo pregio fondamentale, in effetti sembra una magia. È la stessa magia della compressione video dal quale il formato deriva.

Questo rappresenta però anche il tranello maggiore, uno specchietto per le allodole per i meno esperti che si fanno travolgere da questa capacità.

La qualità minima del formato produce, sì, un’enorme riduzione di dati ma anche un’enorme quantità di alterazioni (per i motivi spiegati sopra).

È facile farsi tentare applicando la massima compressione quando per pochi byte in più potremmo ottenere un file ugualmente molto leggero ma molto, molto superiore nella qualità. Ve lo mostro con alcuni esempi.

Di seguito due immagini, delle medesime dimensioni (tutte le immagini che vedrete hanno una dimensione di 750 x 560 pixel), la prima in formato WebP, la seconda in Jpg, entrambe alla massima compressione consentita.

(nota: questo sito web converte periodicamente tutte le immagini in formato WebP. Tuttavia il confronto visivo relativo qui proposto risulta sempre valido poiché un’eventuale e successiva conversione in WebP riprende pregi e difetti dell’originale in Jpg).

(Foto credits: Jacob Mejicanos)

L’avrete notato, la prima immagine, in formato WebP è visibilmente peggiore, ripeto: entrambe sono alla massima compressione consentita dai due formati WebP e Jpg.

Nelle immagini a colori accadono cose anche peggiori. Negli esempi sotto, prima una WebP e poi una Jpg, sempre alle massime compressioni consentite:

(Foto credits: Uriel)

Se il nostro sito web deve essere anoressico può andare bene anche così. La prima immagine, WebP pesa infatti appena 11K, la seconda in Jpg 36. Il WebP arriva quindi a pesare meno di un terzo del Jpg alla massima compressione.

La differenza proporzionalmente è, certo, enorme, pensate poi se viene sommata a più immagini sulla stessa pagina web. Tuttavia la faccenda nasconde un ulteriore trabocchetto tecnico.

Per i moderni collegamenti in fibra ottica questa differenza, in termini assoluti è in realtà irrilevante visto che va a sommarsi ai tempi di risposta e di collegamento al server e ai tempi di scaricamento del codice della pagina. Tempi che sono elevatissimi nei server più economici.

Il discorso è naturalmente diverso se fossimo costretti, magari sotto la minaccia del cliente o del datore di lavoro, a inserire molte immagini in una stessa pagina. Alla fine il risparmio in termini di caricamento diventerebbe, effettivamente, importante.

Rimane un fatto che voglio sottolineare: assegnare arbitrariamente la compressione maggiore possibile semplicemente perché il formato lo consente è una scorciatoia adatta solo a lavori di scarsa qualità.

Il giusto compromesso

La potenzialità di compressione del formato WebP va invece usata in modo più intelligente e per lo scopo per cui è stato creato che è opportuno quindi ribadire: usare sul web immagini di alta qualità. Alta qualità, ok?

Vi ricordate il parametro SSIM accennato prima? Si può interpretare anche così: Se vogliamo mantenere la stessa qualità dobbiamo aspettarci una riduzione delle dimensioni dal 25 al 34% inferiore rispetto al Jpg, non di più.

Se confrontiamo le immagini sotto, la prima una WebP con una compressione del 75%, la seconda sempre un jpg alla massima compressione, scopriamo che già a questa compressione molto elevata la qualità del WebP, a vedere bene, è sensibilmente superiore al Jpg :

Le due immagini hanno un peso abbastanza simile, 36K il jpg, 44K il WebP, qualità sensibilmente superiore del WebP rispetto al Jpg.

In questa circostanza inizia a essere veramente vantaggioso l’uso del WebP. Quante volte non ho usato la compressione massima del Jpg nel mio sito web? Non l’ho mai usata in effetti per non rovinare le immagini. Ora, col WebP, potrò usare immagini del peso equivalente di un Jpg di bassa qualità ma di qualità molto superiore.

Proseguiamo con gli esempi. Osserviamo l’immagine che segue in formato Jpg. Ha una qualità paragonabile al WebP sopra ma pesa molto di più: 89K contro 36. Meglio del parametro SSIM, verrebbe da dire, perché il WebP riduce di oltre la metà le dimensioni mantenendo una buona qualità visiva. Per fortuna le persone non sono algoritmi.

Formato WebP e immagini con trasparenza

Il WebP supporta anche la trasparenza, assolta finora, per le immagini di tipo fotografico dal tradizionale formato Png.

Di seguito due immagini uguali con fondo trasparente, la prima una WebP, la seconda una Png:

La qualità è molto simile ma la differenza di peso è abissale. Nonostante l’immagine sopra, WebP, non usi alcuna compressione, pesa già 1/5 dell’immagine Png sotto! 99K contro 456K. Notevole, no?

Tale differenza non sarà uguale per ogni tipo di immagine ma resterà comunque sempre a nettissimo vantaggio del WebP.

Conclusioni

Le conclusioni sono abbastanza semplici. Da quanto evidenziato, possiamo trarre alcune linee di condotta.

• In generale, nella grafica web sostituite il jpg col formato WepP, magari senza fare i fenomeni volendo provare “l’ultra-compressione” o creare l’anti-materia.
• Se proprio dovete dare priorità alla velocità di caricamento della pagina web e se la qualità delle stesse ha pochissima importanza, solo in tali casi, usate immagini WebP alla massima compressione (oppure se lavorate su un hosting da 20 euro/anno).
• Se non volete peggiorare la qualità, potete ridurre le dimensioni di un file del 34%, circa.
• 25-34% è una media. Lavorando sulla singola immagine, un controllo visivo può darvi un valore più corretto. Forse è un concetto difficile da afferrare ma quando si tratta di immagini l’importante è… quello che si vede.
• Se non avete molto tempo per ragionare su qualità e velocità di caricamento delle pagine web, usate il formato WebP con un valore di compressione massimo del 75%.
• Le immagini con trasparenze in formato WebP sono molto più vantaggiose del Png ma se dovete riprodurre dei logo o disegni vettoriali come delle illustrazioni, usate il formato Svg (se disponete inizialmente di un file in formato grafico vettoriale come quello dei programmi Illustrator o Corel Draw).
• Tenete presente che esistono plug in in grado di convertire tutte le immagini del vostro sito in WebP e qui vi torna utile questa “pappardella” perché sapete che se impostate un valore di comodo, riducete il vostro sito web a una schifezza (se il sito lo è già il danno è relativo).

Precisazioni

La scarsa qualità delle immagini che incrociamo sul web e non solo, non ha come unico colpevole la compressione eccessiva e usata senza criterio. Spesso deriva da un aumento artificiale della risoluzione e da continui salvataggi.

Ogni volta che si salva e poi si ri-salva in un formato compresso qualsiasi, gli artefatti si sommano. Così, se salvo un file in Jpg e poi apro il file, lo modifico e lo salvo un’altra volta e poi lo riapro… la qualità peggiora sempre più.

L’inesperto prende un’immagine di, che so, 300 x 200 pixel e la trasforma con qualche programma in una da 600 x 400. La osserva bene e si illude che sia diventata più bella perché ora “ha una risoluzione elevata”.

Quando si fa questa operazione, Il programma non fa altro che “inventarsi” i pixel che mancano deducendoli dai blocchi di pixel adiacenti. Spesso le immagini contengono entrambi gli artefatti: compressione e aumento delle dimensioni artificiosa (interpolazione – tanto per giocarmi un’altra parola intelligente). Il risultato sono veri pasticci.

Ci sono molte fonti sul web da dove reperire, anche gratuitamente, immagini di alta qualità, completamente o parzialmente libere da diritti. Solo la pigrizia è una ragione per usare immagini scadenti (e non voglio asserire che non sia una ragione valida).

In questo blog ho pubblicato diversi articoli sul soggetto del trattamento e della reperibilità delle immagini. La fonte di quelle usate in questo articolo è unsplash.com.