{"id":19390,"date":"2023-02-14T15:42:39","date_gmt":"2023-02-14T15:42:39","guid":{"rendered":"https:\/\/carlogislon.it\/staging\/?p=19390"},"modified":"2025-12-18T15:11:12","modified_gmt":"2025-12-18T15:11:12","slug":"formato-webp-e-jpg-a-confronto","status":"publish","type":"post","link":"https:\/\/carlogislon.it\/staging\/formato-webp-e-jpg-a-confronto\/","title":{"rendered":"Formato WebP e Jpg a confronto. Teoria semplificata e test (molto) pratici"},"content":{"rendered":"

WebP o Jpg?<\/div><\/div>

Jpg e Png sono i formati tuttora pi\u00f9 usati nel web. Ci vuole un po’ per mollare le vecchie e funzionali abitudini. Comprensibile, perch\u00e9 si deve dedicare tempo e impegno e mantenersi curiosi e interessati per restare al passo.<\/p>\n

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, \u00e8 cos\u00ec, verificate.<\/p>\n

Scopriamo il formato WebP<\/h2>\n

Abbiamo cos\u00ec il nostro nuovo formato immagini WebP che si sta affermando ma la diffidenza e la poca volont\u00e0 di studiare ancora a quasi sessant’anni di et\u00e0 mi hanno costretto (non \u00e8 colpa mia quindi) a continuare ad utilizzare fino ad ora gli affidabili Jpg e Png. Ma sto per cedere anch’io e vi dimostrer\u00f2 perch\u00e9.<\/p>\n

Il sospetto che mi stessi perdendo un po’ di utile tecnologia si \u00e8 fatto lentamente sempre pi\u00f9 fastidioso come la mosca d’estate sul naso mentre cerchi di schiacciare un pisolino sul divano e non \u00e8 pi\u00f9 stato sufficiente scrollare la testa e riprovarci.<\/p>\n

Ok, studiamolo un po’ mi son detto una mattina. WebP, ti sistemo io! Voglio vedere se si si tratta di qualcosa di pratico o un prodotto dell’Ufficio Complicazioni Affari Semplici…<\/p>\n

Piccola premessa sul Jpg<\/h3>\n

Il Jpg \u00e8 un formato con compressione e perdita dati. Gli artefatti Jpg sono ben visibili e spesso intollerabili alla massima compressione.<\/p>\n

Alla minima compressione sono invece impercettibili pur offrendo dimensioni del file<\/span> ancora molto ridotte il che consente di usare immagini Jpg anche per la stampa.<\/p>\n

Per questo motivo il Jpg rimarr\u00e0 ancora un formato molto utile e diffuso: il WebP non si integra infatti col flusso di lavoro per la stampa. E se il Jpg dovesse veramente sparire, scommetto che la sua nostalgia dar\u00e0 vita a miti e teorie del complotto talmente \u00e8 stata alta la popolarit\u00e0.<\/p>\n

E il formato Jpg 2000, chi l’ha visto?<\/h3>\n

Tale formato presenta tutt’oggi una compatibilit\u00e0 limitata nel web e nei dispositivi digitali.<\/p>\n

Probabilmente a causa della complessit\u00e0 del codice di compressione, tale formato che pur supporterebbe trasparenze e vanterebbe una qualit\u00e0 maggiore (non sempre evidente) rispetto al Jpg, ha goduto di una scarsa implementazione.<\/p>\n

Per questo non verr\u00e0 trattato in questo articolo.<\/p>\n

Sintesi del formato WebP<\/h3>\n

Il WebP consente ai siti web di usare immagini di alta qualit\u00e0 ma di dimensioni nettamente inferiori rispetto ai formati tradizionali, Jpg compreso.<\/p>\n

Permette diversi gradi di comprensione cos\u00ec da ottenere il miglior compromesso tra qualit\u00e0 e velocit\u00e0 di download dell’immagine.<\/p>\n

Supporta le trasparenze. Per essere pi\u00f9 chiari e meno tecnici, diciamo che si pu\u00f2 usare con le immagini senza sfondo. In alternativa abbiamo da molto tempo il formato Png che produce file, s\u00ec con trasparenze, ma molto, molto pesanti.<\/p>\n

\u00c8 supportato da almeno 9 browser su 10 (dico almeno perch\u00e9 \u00e8 un dato di qualche anno fa). Sicuramente supportato dal browser Google Chrome visto che Google… l’ha sviluppato!<\/p>\n

Parentesi sui formati Png<\/i> e Svg<\/i><\/h3>\n

Un terzo formato che accennavo prima, che ha fatto la storia sul web, \u00e8 il Png. Comprime (poco rispetto a Jpg e ancor meno rispetto a WebP) l’immagine senza perdita di dati (e di qualit\u00e0), supporta le trasparenze ed \u00e8 compatibile con tutti i browser.<\/p>\n

Il suo uso \u00e8 perci\u00f2 indicato nelle immagini di piccole dimensioni come simboli e logo. Il suo difetto maggiore risiede nelle dimensioni piuttosto grandi del file, infatti di solito si parte volendo realizzare un Png con le sue belle trasparenze e poi si finisce… con un Jpg dal fondo bianco!<\/p>\n

Per immagini con fondo trasparente che siano realizzate con grafica vettoriale, tipici esempi i logo, il formato pi\u00f9 indicato \u00e8 sicuramente l’Svg. In quanto formato vettoriale \u00e8 scalabile pi\u00f9 dell’uomo di gomma dei Fantastici 4 ed \u00e8 un vero peso piuma.<\/p>\n

WebP e Jpg a confronto<\/h2>\n

Non vorrei soffermarmi troppo su tecnicismi. Tuttavia penso che anche l’approccio ereticamente pragmatico di questo articolo necessiti di una precisazione.<\/p>\n

Dovete sapere che esiste un parametro che esprime la qualit\u00e0 tecnica di un’immagine, lo Structural Similarity Index Measure<\/i> (SSIM… gi\u00e0 mi sento pi\u00f9 intelligente dopo aver usato questo termine).<\/p>\n

\u00c8 un metodo per prevedere la qualit\u00e0 percepita di una immagine digitale (un’immagina vista su uno schermo detto terra-terra).<\/p>\n

Il parametro SSIM <\/a>\u00e8 usato per misurare la somiglianza tra due immagini, tra una originale non-compressa e la stessa immagine compressa. \u00c8 considerata la metrica migliore per questo tipo di valutazione.<\/p>\n

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.<\/p>\n

Per tradurla in modo ancora pi\u00f9 semplice e vederla da un altro punto di vista: a parit\u00e0 di qualit\u00e0, un’immagine WebP pesa dal 25 al 35% in meno di un’immagine Jpg.<\/p>\n

Questa \u00e8 l’efficienza di una immagine WebP, il che non significa che l’immagine WebP sia dal 25 al 34% pi\u00f9 leggera, pu\u00f2 esserlo molto di pi\u00f9 (o di meno) a scapito per\u00f2 di una inferiore qualit\u00e0 percepita.<\/p>\n

Potrei dire che questo articolo non fa altro che tradurre quest’unico concetto rendendolo comprensibile e utilizzabile da chiunque.<\/p>\n

Perch\u00e9 un’immagine compressa si rovina?<\/h3>\n

In un’immagine compressa Jpg, una parte dei dati (i valore Rgb che compongono i singoli pixel e ne determinano il colore) viene sostituita da codice in grado di rappresentare i pixel, eliminando i dettagli reputati meno essenziali.<\/p>\n

Il formato WebP utilizza un metodo pi\u00f9 raffinato e potente, un algoritmo predittivo<\/i>, capace cio\u00e8 di prevedere e rappresentare i pixel vicini.<\/p>\n

Suona importante questa locuzione “algoritmo predittivo” (un altro termine cos\u00ec intelligente che sono cresciuto di almeno un paio di centimetri nello scriverlo).<\/p>\n

Ho deciso per\u00f2 di infrangere ancora una volta uno dei tab\u00f9 pi\u00f9 severi della Scienza (non a caso con la s maiuscola): essere comprensibili.<\/p>\n

L’algoritmo predittivo \u00e8 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.<\/p>\n

Pi\u00f9 il file<\/span> \u00e8 compresso e pi\u00f9 tenta di “prevedere”. Pi\u00f9 tenta di prevedere \u00e8 pi\u00f9 “sbagli nella previsione” vengono fatti. Pi\u00f9 “sbagli di previsione” vengono fatti e peggiore sar\u00e0 la qualit\u00e0 dell’immagine.<\/p>\n

Cos\u00ec, 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<\/a> di cui cito soltanto un paragrafo tanto per fare capire che non le sparo a casaccio:<\/p>\n

\n

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 \u2014 Google<\/p>\n<\/blockquote>\n

Nelle pagine web indicate trovate anche dei raffronti ma sono molto meno chiari dei miei. Ovviamente il riferimento \u00e8 essenziale ma uno sviluppatore non \u00e8 allenato quanto un designer nella valutazione estetica dell’immagine. Perci\u00f2, al diavolo la modestia: i miei esempi sono migliori di quelli Google!<\/p>\n

Confronto WebP \u2013 Jpg. Prove pratiche<\/h2>\n

Il formato WebP pu\u00f2 realmente ridurre ai minimi termini il peso di un’immagine. Qui sta il suo pregio fondamentale, in effetti sembra una magia. \u00c8 la stessa magia della compressione video dal quale il formato deriva.<\/p>\n

Questo rappresenta per\u00f2 anche il tranello maggiore, uno specchietto per le allodole per i meno esperti che si fanno travolgere da questa capacit\u00e0.<\/p>\n

La qualit\u00e0 minima del formato produce, s\u00ec, un’enorme riduzione di dati ma anche un’enorme quantit\u00e0 di alterazioni (per i motivi spiegati sopra).<\/p>\n

Uso scriteriato del formato WebP<\/h3>\n

\u00c8 facile farsi tentare applicando la massima compressione quando per pochi byte in pi\u00f9 potremmo ottenere un file<\/span> ugualmente molto leggero ma di qualit\u00e0 molto superiore. Ve lo mostro con alcuni esempi.<\/p>\n

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.<\/p>\n

Tali esempi dimostrano come sia pericoloso gettarsi a capofitto nella ricerca semplicemente della minima dimensione del file.<\/p>\n

(Nota: il mio sito web converte periodicamente tutte le immagini in formato WebP. Tuttavia il confronto visivo relativo qui proposto risulta sempre valido poich\u00e9 un’eventuale e successiva conversione in WebP riprende i difetti originali).<\/p>\n

\"immagine
\n\"\"
(Foto credits: Jacob Mejicanos)<\/figcaption><\/figure>\n

L’avrete notato, la prima immagine, in formato WebP \u00e8 visibilmente peggiore, ripeto: entrambe sono alla massima compressione consentita dai due formati WebP e Jpg.<\/p>\n

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

\"immagine
\n\"immagine<\/p>
(Foto credits: Uriel)<\/figcaption><\/figure>\n

Se il nostro sito web deve essere anoressico pu\u00f2 andare bene anche cos\u00ec. 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.<\/p>\n

La differenza proporzionalmente \u00e8, certo, enorme, pensate poi se viene sommata a pi\u00f9 immagini sulla stessa pagina web. Tuttavia la faccenda nasconde un ulteriore trabocchetto tecnico.<\/p>\n

Per i moderni collegamenti in fibra ottica questa differenza, in termini assoluti \u00e8 in realt\u00e0 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\u00f9 economici.<\/p>\n

Il discorso \u00e8 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.<\/p>\n

Rimane un fatto che voglio sottolineare: assegnare arbitrariamente la compressione maggiore possibile semplicemente perch\u00e9 il formato lo consente \u00e8 una scorciatoia adatta solo a lavori di scarsa qualit\u00e0, a dilettanti e grafici in erba.<\/p>\n

Lasciamo alle spalle quindi la modalit\u00e0 scriteriata di usare il formato WebP e affrontiamo il modo giusto.<\/p>\n

Il giusto compromesso<\/h2>\n

La potenzialit\u00e0 di compressione del formato WebP va invece usata in modo pi\u00f9 intelligente e per lo scopo per cui \u00e8 stato creato che \u00e8 opportuno quindi ribadire: usare sul web immagini di alta qualit\u00e0. Alta qualit\u00e0<\/i>, ok?<\/p>\n

Vi ricordate il parametro SSIM accennato prima? Si pu\u00f2 interpretare anche cos\u00ec: Se vogliamo mantenere la stessa qualit\u00e0 dobbiamo aspettarci una riduzione delle dimensioni dal 25 al 34% inferiore rispetto al Jpg, non di pi\u00f9. <\/b><\/p>\n

Se confrontiamo le immagini sotto, la prima una WebP con una compressione del 75%, la seconda un jpg alla massima compressione, scopriamo che gi\u00e0 a questa compressione elevata la qualit\u00e0 del WebP, a vedere bene, \u00e8 sensibilmente superiore al Jpg :<\/p>\n

\"Formato\"Formato<\/p>
Sopra, WebP, sotto Jpg. Le due immagini hanno un peso abbastanza simile, 36K il jpg, 44K il WebP, ma qualit\u00e0 sensibilmente superiore del WebP rispetto al Jpg.<\/figcaption><\/figure>\n

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\u00f2 usare immagini del peso equivalente di un Jpg di bassa qualit\u00e0 ma molto migliori.<\/p>\n

Proseguiamo con gli esempi. Osserviamo l’immagine che segue in formato Jpg. Ha una qualit\u00e0 paragonabile al WebP sopra ma pesa molto di pi\u00f9: 89K contro 36. Meglio del parametro SSIM, verrebbe da dire, perch\u00e9 il WebP ha ridotto di oltre la met\u00e0 le dimensioni a pari qualit\u00e0 visiva. Per fortuna le persone non sono algoritmi.<\/p>\n

\"\"<\/figure>\n

Formato WebP e immagini con trasparenze<\/h2>\n

Il WebP supporta anche la trasparenza, assolta finora, per le immagini di tipo fotografico dal tradizionale formato Png.<\/p>\n

Di seguito due immagini uguali con fondo trasparente, la prima una WebP, la seconda una Png:<\/p>\n

\"\"\"\"<\/p>
La qualit\u00e0 \u00e8 molto simile ma la differenza di peso \u00e8 abissale. Nonostante l’immagine sopra, WebP, non usi alcuna compressione, pesa gi\u00e0 1\/5 dell’immagine Png sotto! 99K contro 456K. Notevole, no?<\/figcaption><\/figure>\n

Tale differenza non sar\u00e0 uguale per ogni tipo di immagine ma rester\u00e0 comunque sempre a nettissimo vantaggio del WebP.<\/p>\n

Conclusioni<\/h2>\n

Le conclusioni sono abbastanza semplici. Da quanto evidenziato, possiamo trarre alcune linee di condotta nell’uso del formato WebP:<\/p>\n