Formato immagine: i formati di file più im­por­tan­ti per la grafica web

Dagli albori del web le immagini ap­par­ten­go­no alla serie di com­po­nen­ti es­sen­zia­li che non potevano as­so­lu­ta­men­te mancare in un sito web. Non importa che sia una foto o una grafica: gli elementi visivi presenti su un sito attirano ine­vi­ta­bil­men­te l’at­ten­zio­ne dei vi­si­ta­to­ri. In molti casi le immagini offrono agli utenti un chiaro plu­sva­lo­re e mettono il progetto web in buona luce evi­den­zian­do il messaggio di un testo rendendo più chiari i contenuti, fornendo in­for­ma­zio­ni ag­giun­ti­ve (come fanno ad esempio le in­fo­gra­fi­che oppure ancora sti­mo­lan­do alla ri­fles­sio­ne.

Mentre rispetto al si­gni­fi­ca­to degli elementi visivi in sé c’è unità di pensiero, per quanto riguarda invece i corretti formati di immagine da uti­liz­za­re da anni regna sovrana la discordia. Una pluralità di opzioni non fa che rendere più ardua la scelta di trovare il formato adatto a una de­ter­mi­na­ta occasione. Inoltre con i di­spo­si­ti­vi mobili la questione si fa ancora più delicata. Vediamo dunque insieme quali formati esistono e quale utilizzo dovreste farne.

No­no­stan­te gli svantaggi in termini di scalatura, le grafiche raster hanno un utilizzo molto più comune rispetto a quelle vet­to­ria­li so­prat­tut­to perché possono venire eseguite molto più ve­lo­ce­men­te e sono adatte per quasi tutti i tipi di ap­pli­ca­zio­ne. Ecco che si possono salvare elementi grafici del sito web sia in formato pixel sia in formato PNG o JPG proprio come i file più complessi. Tuttavia il punto di forza della rap­pre­sen­ta­zio­ne grafica in pixel sta proprio nella pre­sen­ta­zio­ne di fo­to­gra­fie che nella pro­get­ta­zio­ne web moderna giocano un ruolo molto im­por­tan­te. Di fatto una qualsiasi foto può essere fa­cil­men­te scan­ne­riz­za­ta e di­gi­ta­liz­za­ta come grafica pixel, per poi essere even­tual­men­te elaborata. Oltre ai formati di file grafici già nominati c’è una quantità di fomati liberi o pro­prie­ta­ri, che tuttavia fanno fatica a trovare un impiego diffuso.

Il JPG, co­no­sciu­to anche come JPEG, è un formato tra i più noti e si tratta in realtà di una norma (ISO/IEC 10918-1) pub­bli­ca­ta nel 1992 che descrive vari pro­ce­di­men­ti per la com­pres­sio­ne di immagini. Siccome la norma stessa non contiene precisi criteri secondo cui vada salvata l’immagine, a questo scopo è in­di­spen­sa­bi­le un formato ag­giun­ti­vo no­no­stan­te il formato JPEG File In­ter­chan­ge Format (JFIF) si sia affermato come standard per tutti i browser. Meno uti­liz­za­te sono le al­ter­na­ti­ve Still Picture In­ter­chan­ge File Format (SPIFF) e il formato di file grafico JPEG Network Graphics (JNG).

Il formato JPG è com­pri­mi­bi­le e modifica la struttura usuale delle grafiche pixel in modo tale che ogni 8 x 8 pixel vengano rag­grup­pa­ti in un blocco e calcolati insieme passo passo. Durante questo processo avvengono ad esempio una con­ver­sio­ne cromatica dal modello RGB a quello YCbCr e il co­sid­det­to filtro passa basso, in cui le alte frequenze vengono bloccate per ridurre la di­men­sio­ne del file. A seconda del grado di com­pres­sio­ne scelto, questo processo è collegato a una certa perdita di dati poiché non tutte le in­for­ma­zio­ni dell’immagine possono essere mantenute. Secondo le sta­ti­sti­che di W3Techs tre quarti di tutti i siti web uti­liz­za­no immagini in formato JPG. Il motivo ri­sie­de­reb­be nella con­ve­nien­za che ne deriva in termini di di­men­sio­ni dei file, questione legata alla com­pres­sio­ne.

Utilizzo con­si­glia­to: sal­va­tag­gio e pub­bli­ca­zio­ne di foto

Ugual­men­te diffuso in rete è il formato PNG (Portable Network Graphics), un formato di file grafico ri­co­no­sciu­to uni­ver­sal­men­te dal World Wide Web Con­sor­tium (W3C) e apparso per la prima volta nel 1996 sugli schermi dei computer. Come al­ter­na­ti­va libera e al contempo anche più moderna alla GIF (Graphic In­ter­chan­ge Format), il PNG è ca­rat­te­riz­za­to dalla pos­si­bi­li­tà di essere sot­to­po­sto a una com­pres­sio­ne dati senza perdita e una pro­fon­di­tà di colore massimale fino a 24 bit per pixel (16,7 milioni di colori) che con un canale alfa arriva persino a 32 bit. Al contrario della GIF, con il PNG non è tuttavia possibile creare ani­ma­zio­ni. Grazie a un canale alfa integrato il formato PNG supporta la tra­spa­ren­za, la semi-tra­spa­ren­za (che può applicare su qualsiasi tipologia di immagine) e infine anche la scansione in­ter­lac­cia­ta o l’in­ter­lac­cia­men­to, che permette una tra­smis­sio­ne più veloce del file immagine durante il processo di ca­ri­ca­men­to. I mec­ca­ni­smi di cor­re­zio­ne di luce e colore ga­ran­ti­sco­no che le immagini in PNG abbiano un aspetto simile anche se presenti su diversi sistemi. Per com­pri­me­re una grafica PNG si possono uti­liz­za­re tool come ad esempio pngcrush, tramutato in servizio web. Anche una volta compresse, le immagini non perdono di qualità e rimangono perciò piuttosto pesanti se pa­ra­go­na­te ad altri formati, per questo motivo se ad esempio l’oggetto in questione sono delle fo­to­gra­fie, il formato JPG risulta allora più idoneo. C’è però la pos­si­bi­li­tà di ridurre il campo cromatico (da 1 fino 32 bit per pixel). Utilizzo con­si­glia­to: sal­va­tag­gio e pub­bli­ca­zio­ne di foto e grafiche di di­men­sio­ni ridotte (loghi, icone, grafici a barre, e così via), grafiche con tra­spa­ren­ze, foto senza perdita di in­for­ma­zio­ni

Il portale online Com­pu­Ser­ve ha in­tro­dot­to il Graphics In­ter­chan­ge Format, ab­bre­via­to in GIF, nel 1987 come al­ter­na­ti­va cromatica al formato in bianco e nero allora in uso, X BitMap (XBM). Al contrario di altre soluzioni con­tem­po­ra­nee come PCX o MacPaint, i file GIF ne­ces­si­ta­no di molto meno spazio grazie all’efficace com­pres­sio­ne LZW (com­pres­sio­ne di dati con l’algoritmo Lempel Ziv Welch), motivo per cui il formato ha riscosso un grande successo fin dagli inizi del web. Tuttavia come formati per foto e grafiche, il JPG e il PNG sono de­ci­sa­men­te più avanzati: dalla versione GIF89a del 1989 il formato può però riunire più immagini in un file e per questo trova ancora oggi un utilizzo per la creazione di brevi ani­ma­zio­ni.

Tutte le com­bi­na­zio­ni cro­ma­ti­che in GIF sono presenti all’interno di una tabella, lo spettro cromatico. La tabella contiene fino a 256 colori (8 bit): perciò il formato immagine non è par­ti­co­lar­men­te adatto alla rap­pre­sen­ta­zio­ne di fo­to­gra­fie. Le singole in­for­ma­zio­ni possono essere definite come tra­spa­ren­ti, tuttavia, di­ver­sa­men­te dal moderno PNG, non sono sup­por­ta­te le semi-tra­spa­ren­ze per cui un pixel o è visibile oppure no.

Utilizzo con­si­glia­to: ge­ne­ra­zio­ne di ani­ma­zio­ni; clip-art o loghi in cui una pro­fon­di­tà di colore ristretta non co­sti­tui­sce un ostacolo

Un formato immagine che trova un utilizzo in special modo per la tra­smis­sio­ne di file per la stampa e immagini ad alta ri­so­lu­zio­ne è il TIFF (Tagged Image File Format). Svi­lup­pa­to già nel 1986 da Microsoft in coo­pe­ra­zio­ne con Aldus (che oggi ap­par­tie­ne ad Adobe), il TIFF è ot­ti­miz­za­to per l’in­te­gra­zio­ne della se­pa­ra­zio­ne cromatica e dei profili colore (profili ICC) di immagini scan­ne­riz­za­te. Oltre a ciò il TIFF supporta il modello cromatico CMYK e permette una pro­fon­di­tà di colore per ogni canale di fino a 16 bit (la pro­fon­di­tà di colore totale comporta quindi 48 bit). Infine dal 1992 si può com­pri­me­re il formato senza perdita con l’aiuto della com­pres­sio­ne LZW, la quale viene applicata anche nel formato GIF.

Per via di queste ca­rat­te­ri­sti­che il TIFF si è imposto quasi a standard per le immagini in cui la qualità dell’immagine gioca un ruolo più im­por­tan­te rispetto alla di­men­sio­ne del file. Per questo motivo il formato immagine viene uti­liz­za­to fra le altre cose da case edi­to­ria­li e stampa; anche l’ar­chi­via­zio­ne di grafiche mo­no­cro­ma­ti­che (come ad esempio i disegni tecnici) conta tra i mol­te­pli­ci campi d’ap­pli­ca­zio­ne. Per il sal­va­tag­gio e la pre­sen­ta­zio­ne di in­for­ma­zio­ni geo­gra­fi­che raster (cartine, mappe, riprese aeree, ecc.) si è inoltre affermato il formato GeoTIFF, munito di ulteriori tag.

Utilizzo con­si­glia­to: tra­smis­sio­ne di immagini ad alta ri­so­lu­zio­ne per la stampa

Per il sal­va­tag­gio di progetti grafici che sono stati creati con il popolare software Photoshop, Adobe offre fra gli altri formati di­spo­ni­bi­li il proprio formato pro­prie­ta­rio PSD (Photoshop Document). Esso si ca­rat­te­riz­za perché mantiene tutte le in­for­ma­zio­ni riguardo a livelli, canali e vettori, rendendo così possibile a po­ste­rio­ri una ria­per­tu­ra e ma­ni­po­la­zio­ne del file. Ad esempio si possono quindi ag­giun­ge­re, duplicare, na­scon­de­re, spostare o rimuovere dei livelli e mo­di­fi­ca­re singoli elementi. In un solo file PSD si possono salvare senza perdita i livelli e tutti i singoli dati dell’immagine. Nello specifico questo formato immagine di Adobe si dimostra molto pratico per quanto riguarda le grafiche con un elevato valore di ri­co­no­sci­men­to come i loghi, banner e così via, che se ne­ces­sa­rio devono essere adattati in fretta a diverse piat­ta­for­me e di­men­sio­ni del display. So­li­ta­men­te le immagini in formato PSD si possono aprire solamente con Adobe Photoshop anche se lo scambio tra ap­pli­ca­zio­ni per i diversi sistemi operativi Windows e macOS funziona in maniera inec­ce­pi­bi­le. Perciò in un certo senso si può dire che il formato grafico è com­pa­ti­bi­le con diversi sistemi. Il PSD funge per prima cosa come formato di ar­chi­via­zio­ne durante il processo di ela­bo­ra­zio­ne. Per l’espor­ta­zio­ne sul web il relativo file dovrebbe tuttavia essere con­ver­ti­to in formato PNG o in al­ter­na­ti­va in JPG prima di venire caricato sul server, poiché no­no­stan­te il sal­va­tag­gio senza perdita delle in­for­ma­zio­ni dell’immagine e tutti i livelli in essa contenuti per­met­ta­no l’ef­fi­cien­te ria­per­tu­ra e modifica suc­ces­si­va del file, ciò comporta anche una ingente quantità di dati. Per con­ver­ti­re una grafica PSD basta ricorrere a un semplice tool di­spo­ni­bi­le online come Zamzar. Utilizzo con­si­glia­to: sal­va­tag­gio in­ter­me­dio e ria­per­tu­ra del file per la modifica suc­ces­si­va di grafiche e template di design uti­liz­za­ti di frequente

Il formato BMP (Windows Bitmap) è stato svi­lup­pa­to per i sistemi operativi Microsoft e IBM e pub­bli­ca­to per la prima volta nel 1990 con Windows 3.0 come formato di sal­va­tag­gio per grafiche pixel con una pro­fon­di­tà di colore di fino a 24 bit per pixel. Il formato immagine non compresso assegna ad ogni pixel un valore cromatico ben preciso, ragion per cui i file BMP di norma sono molto grandi. Per questo motivo il formato non si adatta all’utilizzo sul web.

Utilizzo con­si­glia­to: sal­va­tag­gio di foto e grafiche per l’utilizzo offline

Le grafiche vet­to­ria­li si adattano così bene all’utilizzo sul web perché spesso ne­ces­si­ta­no di molto meno spazio di ar­chi­via­zio­ne rispetto alle grafiche pixel. I ri­spet­ti­vi formati non de­scri­vo­no quali parti di colore ha un pixel nella relativa immagine, bensì gli oggetti di cui è composta l’immagine – superfici tonde e angolate, testo, linee dritte e storte e così via – e la sua posizione, la sua misura, i suoi colori e altre ca­rat­te­ri­sti­che.

In com­bi­na­zio­ne con il già accennato aspetto della scalatura senza perdita, la rea­liz­za­zio­ne di elementi web re­spon­si­ve e liberi da barriere diventa un gioco da ragazzi. In più è possibile applicare modifiche in ogni momento e con facilità a file in formato vet­to­ria­le, anche se il grado di dif­fi­col­tà aumenta in maniera spro­por­zio­na­ta rispetto alla crescente com­ples­si­tà del file immagine. Un ulteriore vantaggio delle grafiche vet­to­ria­li è la pos­si­bi­li­tà di creare ani­ma­zio­ni con Ja­va­Script.

In col­la­bo­ra­zio­ne con i pro­dut­to­ri di software Aldus e Altsys, nel 1987 Adobe ha svi­lup­pa­to e pub­bli­ca­to il formato vet­to­ria­le EPS (En­cap­su­la­ted PostScript). Il nome del formato deriva dal fatto che i relativi file vengono salvati nel lin­guag­gio di de­scri­zio­ne di pagina PostScript, il quale permette l’emissione di pagine complesse per mezzo di stampanti laser e processi CTP e CTF. A questo scopo PostScript descrive gli elementi della pagina stampata come linee, cerchi, immagini, ecc. e dà in­for­ma­zio­ni riguardo a dove sono po­si­zio­na­ti. L’EPS con­tri­bui­sce a queste in­for­ma­zio­ni sull’immagine dando in­di­ca­zio­ni precise sulla di­men­sio­ne dell’emissione, la co­sid­det­ta bounding box (scatola di de­li­mi­ta­zio­ne).

Even­tual­men­te i file EPS con­ten­go­no un’immagine di anteprima in bassa ri­so­lu­zio­ne che può servire come se­gna­po­sto. Il formato di immagine di Adobe descrive i singoli oggetti in­di­pen­den­te­men­te dal di­spo­si­ti­vo di emissione che si userà, per­met­ten­do così lo scambio tra dif­fe­ren­ti mezzi.

L’EPS ha trovato un utilizzo so­prat­tut­to nell’ambito della stampa, tuttavia anche lì ha ormai passato il testimone al suo noto suc­ces­so­re, il formato PDF (Portable Document Format), il quale si adatta anche all’invio di e-mail per via delle sue di­men­sio­ni di file de­ci­sa­men­te più ridotte. Come formato immagine per progetti web non è adatto né lo storico EPS tantomeno il moderno PDF, che viene uti­liz­za­to più per lo scambio o la pre­sen­ta­zio­ne di documenti di testo.

Utilizzo con­si­glia­to: de­scri­zio­ne di pagine di stampa complesse (formato non più attuale)

Mentre molti altri formati vet­to­ria­li come il formato AI (Adobe Il­lu­stra­tor Artwork) risultano ugual­men­te poco adatti all’utilizzo sul web, il formato SVG (Scalable Vector Graphics), con­si­glia­to dal W3C, conferma in maniera con­vin­cen­te i vantaggi dei file vet­to­ria­li accennati al principio dell’articolo. Da quando è stata integrata appieno su tutti i browser esistenti dall’HTML5, la specifica per la de­scri­zio­ne di grafiche vet­to­ria­li bi­di­men­sio­na­li che si basa sul lin­guag­gio XML è un’al­ter­na­ti­va da prendere se­ria­men­te in con­si­de­ra­zio­ne rispetto alle più tra­di­zio­na­li grafiche raster – nello specifico con uno sguardo ai siti web Mobile e re­spon­si­ve. In tutto ciò i file SVG, oltre a una sca­la­bi­li­tà senza perdita, offrono spesso anche un volume di dati molto ridotto e altri vantaggi come i seguenti:

• Tramite CSS si può mettere mano a tutti gli attributi di pre­sen­ta­zio­ne come colori, font, ecc.
• Gli script possono attingere ai contenuti tramite DOM (Document Object Model).
• Le grafiche SVG sono in lin­guag­gio macchina.
• Il ri­spet­ti­vo codice è con­tras­se­gna­to e adat­ta­bi­le come file separato oppure di­ret­ta­men­te all’interno del documento HTML.
• Vi si possono ag­giun­ge­re ani­ma­zio­ni in diverse modalità (SMIL, Ja­va­Script, CSS).

Nello specifico per quanto riguarda le grafiche che con­ten­go­no simboli (com’è ad esempio il caso dei loghi) oppure che devono reagire agli in­se­ri­men­ti dei vi­si­ta­to­ri di siti web (diagrammi dinamici), il formato SVG rap­pre­sen­ta una scelta ec­cel­len­te. Inoltre il moderno formato immagine vet­to­ria­le sembra essere proprio fatto ad hoc per le grafiche di stampo tecniche. Uno sguardo alla sta­ti­sti­ca di W3Techs di cui sopra mostra tuttavia che l’SVG in confronto alle grafiche raster non trova ancora utilizzo nella maggior parte dei progetti web. Trovate in­for­ma­zio­ni complete e guide per l’in­se­ri­men­to del formato nel nostro articolo dedicato all’SVG.

Utilizzo con­si­glia­to: grafiche in­te­rat­ti­ve o di stampo tecnico (loghi, pulsanti, icone e altri ancora.)