Pro­gres­si­ve JPEG: un’in­tro­du­zio­ne

Il formato di immagine più co­mu­ne­men­te usato sul web è il JPEG. Circa il 71,4% di tutti i siti web con­ten­go­no foto e grafici in questo formato. Tuttavia, il JPEG è in realtà solo un termine generico per uno standard di com­pres­sio­ne delle immagini. Anche il PJPEG, o pro­gres­si­ve JPEG, fa parte di questo standard. I JPEG pro­gres­si­vi com­pri­mo­no foto e grafici in un modo speciale che fa sì che il browser carichi i file in modo diverso rispetto ai JPEG “normali” o baseline.

JPEG si riferisce a uno standard svi­lup­pa­to nel 1992 per la com­pres­sio­ne delle immagini, che comprende diversi metodi di com­pres­sio­ne. L’ab­bre­via­zio­ne JPEG sta per “Joint Pho­to­gra­phic Expert Group”, ovvero il comitato di esperti che ha svi­lup­pa­to questo standard. JPEG è il formato di immagine più co­mu­ne­men­te usato sul web e, grazie alla sua ef­fi­cien­za, viene uti­liz­za­to sia per grafici complessi con un’elevata pro­fon­di­tà di colore che per le foto. Lo standard prevede notevoli dif­fe­ren­ze di com­pres­sio­ne in base alle im­po­sta­zio­ni di espor­ta­zio­ne uti­liz­za­te dal cor­ri­spon­den­te programma di ela­bo­ra­zio­ne delle immagini.

La com­pres­sio­ne riduce le di­men­sio­ni dei file, come ad esempio i file di immagini. In questo modo si risparmia spazio di ar­chi­via­zio­ne e si riducono i tempi di tra­sfe­ri­men­to e ca­ri­ca­men­to. In termini concreti, un tempo di tra­smis­sio­ne più breve significa che un’immagine si carica più ve­lo­ce­men­te su un sito web. La riduzione della di­men­sio­ne del file, tuttavia, avviene, nella maggior parte dei casi, a spese del contenuto, che deve in qualche modo essere ridotto. So­prat­tut­to quando si tratta di immagini e grafici è quindi ne­ces­sa­rio as­si­cu­rar­si che la qualità dell’immagine non venga ridotta ec­ces­si­va­men­te durante la com­pres­sio­ne. È vero che in questo modo i tempi di ca­ri­ca­men­to del file saranno più brevi, ma il risultato è meno con­vin­cen­te.

Il co­sid­det­to PJPEG o pro­gres­si­ve JPEG è uno dei metodi per la com­pres­sio­ne delle immagini dello standard JPEG. Anche i PJPEG vengono creati uti­liz­zan­do un algoritmo di com­pres­sio­ne, ma sono strut­tu­ra­ti di­ver­sa­men­te quando vi si accede dal browser. I PJPEG fun­zio­na­no in tutti i browser attuali, compresi Chrome, Firefox e Internet Explorer dalla versione 9. Tutti i vecchi Internet Explorer pre­sen­ta­no invece dif­fi­col­tà si­gni­fi­ca­ti­ve nella vi­sua­liz­za­zio­ne dei JPEG pro­gres­si­vi. Questo tuttavia è ir­ri­le­van­te per la maggior parte dei progetti web, se si considera che la di­stri­bu­zio­ne mondiale di Internet Explorer 8 è appena dello 0,4%. Un browser che non supporta il formato pro­gres­si­ve JPEG caricherà la foto cor­ri­spon­den­te come un JPEG normale. Qual è esat­ta­men­te la dif­fe­ren­za tra i due formati?

La dif­fe­ren­za prin­ci­pa­le tra JPEG e PJPEG sta nel modo in cui l’immagine viene caricata. Mentre i baseline JPEG (cioè i JPEG “normali”) caricano le immagini linea per linea dall’alto verso il basso, i pro­gres­si­ve JPEG li caricano in modo diverso: nel caso dei PJPEG, l’intera immagine viene vi­sua­liz­za­ta im­me­dia­ta­men­te e caricata pixel per pixel. Questo significa che l’immagine appare ini­zial­men­te sfocata e pixelata per poi diventare gra­dual­men­te più nitida. Mentre un baseline JPEG viene caricato dall’alto verso il basso, un PJPEG viene pra­ti­ca­men­te costruito dal retro verso avanti.

Questo ha un effetto positivo sulla User Ex­pe­rien­ce, cioè sul modo in cui l’utente per­ce­pi­sce il sito web. Il ca­ri­ca­men­to del sito viene sog­get­ti­va­men­te percepito come più rapido perché non ci sono aree bianche che devono essere riempite vi­si­va­men­te. La sequenza di immagini illustra il modo in cui vengono ef­fet­ti­va­men­te caricati i JPEG e i PJPEG. I baseline JPEG caricano i pixel dell’immagine linea per linea dall’alto verso il basso:

In confronto, le immagini in formato PJPEG vengono caricate da dietro in avanti. L’immagine diventa più chiara con il ca­ri­ca­men­to e il numero di pixel aumenta gra­dual­men­te.

Il fatto che appaia un’immagine completa sin dall’inizio, anche se fuori fuoco, è percepito come piacevole da molti utenti. Ma anche i PJPEG hanno degli svantaggi.

La maggior parte dei programmi di ela­bo­ra­zio­ne delle immagini salva au­to­ma­ti­ca­men­te le foto e i grafici nel formato baseline JPEG. Salvare i file come PJPEG è comunque molto facile. Ci sono diversi modi per creare un file pro­gres­si­ve JPEG. Con programmi come IrfanView o Adobe Photoshop è molto semplice esportare i file nel formato moderno. Per salvare un’immagine come PJPEG con il popolare programma di ela­bo­ra­zio­ne delle immagini Adobe Photoshop, procedete come segue:

• Andate sull’opzione “Esporta” nel menu “File” e se­le­zio­na­te “Salva per Web (legacy)”
• In alto a destra, se­le­zio­na­te JPEG come formato del file e spuntate la casella “Pro­gres­si­ve”
• Impostate la qualità de­si­de­ra­ta
• Fate clic su “Salva” in basso a sinistra

Anche il programma gratuito IrfanView vi permette di salvare i file nel formato pro­gres­si­ve JPEG ed è un’al­ter­na­ti­va semplice all’opzione pro­fes­sio­na­le Adobe Photoshop. IrfanView non è di­spo­ni­bi­le per iOS. Per salvare un file come PJPEG, procedete come segue:

• Fate clic su “Salva” nel menu “File” o sull’icona “Salva”
• Nella finestra di dialogo “Opzioni di sal­va­tag­gio JPEG/GIF” spuntate l’opzione “Salva come pro­gres­si­ve JPEG”
• Fate clic su “Salva”

Ora i file possono essere fa­cil­men­te integrati in un sito web. Se il browser dell’utente supporta il formato, la foto o la grafica verrà caricata come JPEG pro­gres­si­vo.