Cos'è un JPEG progressivo?

Il JPEG progressivo è un metodo di codifica delle immagini JPEG in cui i dati sono memorizzati in modo tale che l’immagine venga visualizzata progressivamente durante il caricamento. Viene caricata prima una versione a bassa risoluzione o meno dettagliata, e poi, man mano che vengono ricevuti nuovi dati, la qualità migliora.

Differenze rispetto al JPEG di base (Baseline):

JPEG progressivo	JPEG di base
L’immagine viene visualizzata progressivamente, migliorando.	L’immagine si carica dall’alto verso il basso, a blocchi.
Adatto per connessioni lente.	Adatto per connessioni veloci.
Il file è leggermente più grande.	Il file è leggermente più piccolo.
Richiede più tempo di elaborazione per la decodifica.	Richiede meno tempo di elaborazione per la decodifica.

Applicazione nel Frontend:

• Migliorare l’esperienza utente su internet lento.
• Sensazione visiva di caricamento più rapido del contenuto.
• Può essere combinato con il lazy loading per ottimizzare.

Tecnicamente, il JPEG progressivo divide i coefficienti di frequenza dell’immagine in più scansioni. Prima vengono trasmessi i coefficienti a bassa frequenza (struttura generale), poi quelli ad alta frequenza (dettagli).

Esempio di conversione da JPEG di base a progressivo usando ImageMagick:

# base.jpg - file originale
# progressivo.jpg - file risultante
convert base.jpg -interlace Plane progressivo.jpg

L’uso in CSS o HTML non differisce dal JPEG normale, poiché si tratta di un formato di codifica interno:

<img src="progressivo.jpg" alt="Immagine progressiva">

.background {
  background-image: url('progressivo.jpg');
}