Prova JPEG XL: la stessa immagine in quattro formati

Schema della conversione di un'immagine JPEG in JPEG XL con riduzione del peso del file
Stessa immagine, quattro formati. Se usi Safari 17 o successivo vedi la versione JPEG XL; negli altri browser vedi l'AVIF.

Pesi misurati sulla stessa immagine (1536×1024 pixel):

FormatoPesoNota
PNG originale1.939 KBfile caricato in libreria
JPEG (qualità 82)122 KBcompatibile ovunque
JPEG XL lossy (qualità 80)70 KBquello mostrato sopra in Safari
AVIF (CompressX)41 KBquello mostrato negli altri browser
JPEG XL lossless1.119 KBnessuna perdita di qualità

Su questa immagine l'AVIF pesa meno del JPEG XL lossy. Il vantaggio del JPEG XL è altrove: qualità visiva e conversione lossless dei JPEG esistenti.

Come è inserita l'immagine

Nessun plugin e nessun JavaScript: è un normale elemento <picture> HTML. Il browser scorre le sorgenti dall'alto e usa la prima di cui riconosce il tipo.

  1. Conversione. Ho preso la copertina dell'articolo (un PNG da 1.939 KB) e l'ho convertita in JPEG XL lossy con qualità 80 e impegno 7, usando un encoder JPEG XL compilato in WebAssembly, direttamente nel browser.
  2. Incorporata nella pagina. WordPress rifiuta l'upload dei file .jxl e il server li servirebbe come pagine web. Per questo il file (circa 70 KB) è scritto nell'HTML come data:image/jxl;base64,…, che non dipende dal tipo di file del server.
  3. Fallback. Se il browser non sa leggere il JPEG XL, passa all'immagine successiva: l'AVIF generato da CompressX. Il PNG originale non è nel fallback, perché il plugin avrebbe avvolto l'immagine in un secondo <picture> annullando la scelta.
  4. Verifica. In un Chrome con il JPEG XL attivo l'immagine si apre a 1536 pixel di larghezza dalla sorgente JPEG XL; in Safari 17 o successivo dovresti vedere lo stesso risultato.
<picture>
  <source type="image/jxl"
          srcset="data:image/jxl;base64,/woA…">
  <img src="…/immagine.png.avif" alt="…"
       width="1536" height="1024">
</picture>

Limiti. Incorporare il file nell'HTML aggiunge circa 95 KB alla pagina e non è una soluzione da ripetere su tutto il sito. Per un uso generale servirebbe che il server servisse i .jxl con il tipo corretto.