Cos'è JPEG XL e quanto pesa rispetto a WebP e AVIF

JPEG XL in Chrome: su quali browser funziona #

Chrome 155 riconoscerà il formato sui computer, sui telefoni Android e nelle app che aprono pagine web con il componente di sistema di Android (WebView). Microsoft Edge, che è costruito sullo stesso codice di Chrome, lo aggiungerà pochi giorni dopo, mentre Firefox lo attiverà per tutti con la versione 158.

Safari mostra le immagini JPEG XL già da tre anni, su Mac, iPhone e iPad. Su iPhone anche Chrome si appoggia al motore di Safari, e quindi le visualizza già. Restano fuori Samsung Internet, il browser preinstallato sui telefoni Samsung, e Opera. Safari, poi, non riproduce le immagini JPEG XL animate, che invece sono previste dal formato.

JPEG XL, WebP e AVIF: quanto pesano alla stessa qualità #

Confrontare formati di immagini con lo stesso valore di "qualità" porta fuori strada: un JPEG salvato a qualità 80 e un AVIF compresso a qualità 80 non hanno la stessa resa, perché ogni programma ha la sua scala. Il confronto corretto fissa la qualità percepita e misura quanto pesa ogni formato per raggiungerla.

Per questo articolo i quattro formati sono stati confrontati con SSIMULACRA2, una metrica che stima quanto un'immagine compressa si discosti dall'originale per l'occhio umano, su una scala che arriva a 100. La soglia scelta è 80, una qualità molto alta: chi guarda l'immagine accanto all'originale, alla stessa dimensione, di solito non nota differenze. La metrica è stata sviluppata dallo stesso gruppo che lavora a JPEG XL, e quindi potrebbe favorirlo.

Le prove sono state fatte su due foto di paesaggio scattate con una reflex, di pubblico dominio e ridotte a 2000 pixel di larghezza, una misura comune per le foto grandi sugli schermi ad alta densità. JPEG XL ha prodotto file fra il 22 e il 32 per cento più leggeri del JPEG, e ha battuto anche WebP, con un risparmio fra il 13 e il 18 per cento. AVIF però ha fatto meglio di tutti: i file JPEG XL pesavano dall'11 al 27 per cento più di quelli AVIF.

Con un'immagine che non era una foto, la schermata di una pagina con testo, pulsanti e un grafico, il distacco è cresciuto: il file AVIF pesava meno della metà di quello JPEG XL. Alzando la soglia di qualità a 90, invece, i due formati si sono avvicinati, fino ad avere quasi lo stesso peso su una delle due foto.

JPEG XL è però più veloce: ha compresso le foto in un terzo del tempo di AVIF. Il dato conta per chi converte migliaia di immagini su un server, ma dipende molto da come è configurato ogni programma.

JPEG XL e i JPEG esistenti: meno peso senza perdita #

JPEG XL permette anche un'operazione che WebP e AVIF non prevedono: convertire un JPEG senza ricomprimere l'immagine. Il programma conserva i dati del JPEG e li riorganizza in modo più efficiente, e dal nuovo file, se serve, si ricava il JPEG di partenza, identico byte per byte. Con gli altri formati, invece, ogni conversione è una nuova compressione, che toglie dettagli a un'immagine già compressa.

Il risparmio dipende da come era stato creato il JPEG. Sulle foto già ottimizzate è stato dell'11 per cento, su quelle esportate con le impostazioni predefinite del 15, e sui file a piena risoluzione usciti da un programma di fotoritocco è arrivato al 19. Le due foto della NASA che illustrano questo articolo, scaricate dall'archivio dell'agenzia, sono scese del 27 e del 30 per cento. In tutti i casi il JPEG ricostruito era identico all'originale. Per un negozio online con decine di migliaia di foto dei prodotti, o per l'archivio di un fotografo, è un risparmio senza alcun rischio per la qualità.

Come usare JPEG XL in un sito web con l'elemento picture #

I browser senza JPEG XL resteranno in circolazione per anni, quindi la foto va inserita con l'elemento <picture>, che propone più versioni della stessa immagine e lascia scegliere al browser:

<picture>
  <source srcset="foto.jxl" type="image/jxl">
  <img src="foto.jpg" alt="La costa orientale degli Stati Uniti di notte"
       width="2000" height="1125">
</picture>

Il browser legge gli elementi <source> in ordine e scarica il primo in un formato che conosce; se non ne trova nessuno, carica l'immagine indicata in <img>. La prova è stata fatta su una pagina con un JPEG e la sua conversione JPEG XL: Chrome senza l'opzione sperimentale ha caricato il JPEG, e dopo averla attivata il file JPEG XL, senza modifiche al codice.

Per le foto nuove conviene ancora AVIF, che tutti i browser principali riconoscono da quasi due anni. Chi vuole offrire entrambi i formati può aggiungere un elemento <source> per ciascuno e mettere per primo il più leggero per quel tipo di immagine, perché il browser si ferma al primo che conosce.

JPEG XL nei siti web: cosa cambia per chi sviluppa #

Per un sito che oggi usa JPEG e WebP, l'arrivo di JPEG XL non rende urgente cambiare niente: AVIF resta la scelta più leggera per le immagini nuove, e pesa già meno di WebP. JPEG XL diventa interessante dove ci sono molti JPEG da conservare, come cataloghi, archivi fotografici e siti di notizie con anni di immagini. Lì alleggerisce i file senza che la qualità di ogni foto vada scelta di nuovo, e l'originale resta sempre recuperabile.

Immagini più leggere accorciano soprattutto il caricamento della pagina, che Google misura separatamente dalla risposta ai clic, come spiega l'articolo sui siti web veloci ma lenti ai clic.

Non è chiaro quanto in fretta adotteranno il formato i servizi che convertono le immagini in automatico, come i plugin dei CMS e le CDN, le reti che consegnano i contenuti dei siti. Per una parte dei siti sono loro a scegliere il formato delle immagini, senza che nessuno tocchi il codice.

Fonti #

• Chrome Platform Status: supporto a JPEG XL in Chrome
• Mozilla: JPEG XL attivo in modo predefinito in Firefox
• Mozilla: la richiesta di un decoder in Rust
• MDN: formati di immagine supportati dai browser
• libjxl: jxl-rs, il decoder in Rust