Formato immagine: i formati di file più importanti per la grafica web

Dagli albori del web le immagini appartengono alla serie di componenti essenziali che non potevano assolutamente mancare in un sito web. Non importa che sia una foto o una grafica: gli elementi visivi presenti su un sito attirano inevitabilmente l’attenzione dei visitatori. In molti casi le immagini offrono agli utenti un chiaro plusvalore e mettono il progetto web in buona luce evidenziando il messaggio di un testo rendendo più chiari i contenuti, fornendo informazioni aggiuntive (come fanno ad esempio le infografiche oppure ancora stimolando alla riflessione.

Mentre rispetto al significato degli elementi visivi in sé c’è unità di pensiero, per quanto riguarda invece i corretti formati di immagine da utilizzare 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 determinata occasione. Inoltre con i dispositivi mobili la questione si fa ancora più delicata. Vediamo dunque insieme quali formati esistono e quale utilizzo dovreste farne.

Nonostante gli svantaggi in termini di scalatura, le grafiche raster hanno un utilizzo molto più comune rispetto a quelle vettoriali soprattutto perché possono venire eseguite molto più velocemente e sono adatte per quasi tutti i tipi di applicazione. 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 rappresentazione grafica in pixel sta proprio nella presentazione di fotografie che nella progettazione web moderna giocano un ruolo molto importante. Di fatto una qualsiasi foto può essere facilmente scannerizzata e digitalizzata come grafica pixel, per poi essere eventualmente elaborata. Oltre ai formati di file grafici già nominati c’è una quantità di fomati liberi o proprietari, che tuttavia fanno fatica a trovare un impiego diffuso.

Il JPG, conosciuto anche come JPEG, è un formato tra i più noti e si tratta in realtà di una norma (ISO/IEC 10918-1) pubblicata nel 1992 che descrive vari procedimenti per la compressione di immagini. Siccome la norma stessa non contiene precisi criteri secondo cui vada salvata l’immagine, a questo scopo è indispensabile un formato aggiuntivo nonostante il formato JPEG File Interchange Format (JFIF) si sia affermato come standard per tutti i browser. Meno utilizzate sono le alternative Still Picture Interchange File Format (SPIFF) e il formato di file grafico JPEG Network Graphics (JNG).

Il formato JPG è comprimibile e modifica la struttura usuale delle grafiche pixel in modo tale che ogni 8 x 8 pixel vengano raggruppati in un blocco e calcolati insieme passo passo. Durante questo processo avvengono ad esempio una conversione cromatica dal modello RGB a quello YCbCr e il cosiddetto filtro passa basso, in cui le alte frequenze vengono bloccate per ridurre la dimensione del file. A seconda del grado di compressione scelto, questo processo è collegato a una certa perdita di dati poiché non tutte le informazioni dell’immagine possono essere mantenute. Secondo le statistiche di W3Techs tre quarti di tutti i siti web utilizzano immagini in formato JPG. Il motivo risiederebbe nella convenienza che ne deriva in termini di dimensioni dei file, questione legata alla compressione.

Utilizzo consigliato: salvataggio e pubblicazione di foto

Ugualmente diffuso in rete è il formato PNG (Portable Network Graphics), un formato di file grafico riconosciuto universalmente dal World Wide Web Consortium (W3C) e apparso per la prima volta nel 1996 sugli schermi dei computer. Come alternativa libera e al contempo anche più moderna alla GIF (Graphic Interchange Format), il PNG è caratterizzato dalla possibilità di essere sottoposto a una compressione dati senza perdita e una profondità 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 animazioni. Grazie a un canale alfa integrato il formato PNG supporta la trasparenza, la semi-trasparenza (che può applicare su qualsiasi tipologia di immagine) e infine anche la scansione interlacciata o l’interlacciamento, che permette una trasmissione più veloce del file immagine durante il processo di caricamento. I meccanismi di correzione di luce e colore garantiscono che le immagini in PNG abbiano un aspetto simile anche se presenti su diversi sistemi. Per comprimere una grafica PNG si possono utilizzare 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 paragonate ad altri formati, per questo motivo se ad esempio l’oggetto in questione sono delle fotografie, il formato JPG risulta allora più idoneo. C’è però la possibilità di ridurre il campo cromatico (da 1 fino 32 bit per pixel). Utilizzo consigliato: salvataggio e pubblicazione di foto e grafiche di dimensioni ridotte (loghi, icone, grafici a barre, e così via), grafiche con trasparenze, foto senza perdita di informazioni

Il portale online CompuServe ha introdotto il Graphics Interchange Format, abbreviato in GIF, nel 1987 come alternativa cromatica al formato in bianco e nero allora in uso, X BitMap (XBM). Al contrario di altre soluzioni contemporanee come PCX o MacPaint, i file GIF necessitano di molto meno spazio grazie all’efficace compressione LZW (compressione 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 decisamente 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 animazioni.

Tutte le combinazioni cromatiche 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 è particolarmente adatto alla rappresentazione di fotografie. Le singole informazioni possono essere definite come trasparenti, tuttavia, diversamente dal moderno PNG, non sono supportate le semi-trasparenze per cui un pixel o è visibile oppure no.

Utilizzo consigliato: generazione di animazioni; clip-art o loghi in cui una profondità di colore ristretta non costituisce un ostacolo

Un formato immagine che trova un utilizzo in special modo per la trasmissione di file per la stampa e immagini ad alta risoluzione è il TIFF (Tagged Image File Format). Sviluppato già nel 1986 da Microsoft in cooperazione con Aldus (che oggi appartiene ad Adobe), il TIFF è ottimizzato per l’integrazione della separazione cromatica e dei profili colore (profili ICC) di immagini scannerizzate. Oltre a ciò il TIFF supporta il modello cromatico CMYK e permette una profondità di colore per ogni canale di fino a 16 bit (la profondità di colore totale comporta quindi 48 bit). Infine dal 1992 si può comprimere il formato senza perdita con l’aiuto della compressione LZW, la quale viene applicata anche nel formato GIF.

Per via di queste caratteristiche il TIFF si è imposto quasi a standard per le immagini in cui la qualità dell’immagine gioca un ruolo più importante rispetto alla dimensione del file. Per questo motivo il formato immagine viene utilizzato fra le altre cose da case editoriali e stampa; anche l’archiviazione di grafiche monocromatiche (come ad esempio i disegni tecnici) conta tra i molteplici campi d’applicazione. Per il salvataggio e la presentazione di informazioni geografiche raster (cartine, mappe, riprese aeree, ecc.) si è inoltre affermato il formato GeoTIFF, munito di ulteriori tag.

Utilizzo consigliato: trasmissione di immagini ad alta risoluzione per la stampa

Per il salvataggio di progetti grafici che sono stati creati con il popolare software Photoshop, Adobe offre fra gli altri formati disponibili il proprio formato proprietario PSD (Photoshop Document). Esso si caratterizza perché mantiene tutte le informazioni riguardo a livelli, canali e vettori, rendendo così possibile a posteriori una riapertura e manipolazione del file. Ad esempio si possono quindi aggiungere, duplicare, nascondere, spostare o rimuovere dei livelli e modificare 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 riconoscimento come i loghi, banner e così via, che se necessario devono essere adattati in fretta a diverse piattaforme e dimensioni del display. Solitamente le immagini in formato PSD si possono aprire solamente con Adobe Photoshop anche se lo scambio tra applicazioni per i diversi sistemi operativi Windows e macOS funziona in maniera ineccepibile. Perciò in un certo senso si può dire che il formato grafico è compatibile con diversi sistemi. Il PSD funge per prima cosa come formato di archiviazione durante il processo di elaborazione. Per l’esportazione sul web il relativo file dovrebbe tuttavia essere convertito in formato PNG o in alternativa in JPG prima di venire caricato sul server, poiché nonostante il salvataggio senza perdita delle informazioni dell’immagine e tutti i livelli in essa contenuti permettano l’efficiente riapertura e modifica successiva del file, ciò comporta anche una ingente quantità di dati. Per convertire una grafica PSD basta ricorrere a un semplice tool disponibile online come Zamzar. Utilizzo consigliato: salvataggio intermedio e riapertura del file per la modifica successiva di grafiche e template di design utilizzati di frequente

Il formato BMP (Windows Bitmap) è stato sviluppato per i sistemi operativi Microsoft e IBM e pubblicato per la prima volta nel 1990 con Windows 3.0 come formato di salvataggio per grafiche pixel con una profondità 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 consigliato: salvataggio di foto e grafiche per l’utilizzo offline

Le grafiche vettoriali si adattano così bene all’utilizzo sul web perché spesso necessitano di molto meno spazio di archiviazione rispetto alle grafiche pixel. I rispettivi formati non descrivono 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 caratteristiche.

In combinazione con il già accennato aspetto della scalatura senza perdita, la realizzazione di elementi web responsive e liberi da barriere diventa un gioco da ragazzi. In più è possibile applicare modifiche in ogni momento e con facilità a file in formato vettoriale, anche se il grado di difficoltà aumenta in maniera sproporzionata rispetto alla crescente complessità del file immagine. Un ulteriore vantaggio delle grafiche vettoriali è la possibilità di creare animazioni con JavaScript.

In collaborazione con i produttori di software Aldus e Altsys, nel 1987 Adobe ha sviluppato e pubblicato il formato vettoriale EPS (Encapsulated PostScript). Il nome del formato deriva dal fatto che i relativi file vengono salvati nel linguaggio di descrizione 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à informazioni riguardo a dove sono posizionati. L’EPS contribuisce a queste informazioni sull’immagine dando indicazioni precise sulla dimensione dell’emissione, la cosiddetta bounding box (scatola di delimitazione).

Eventualmente i file EPS contengono un’immagine di anteprima in bassa risoluzione che può servire come segnaposto. Il formato di immagine di Adobe descrive i singoli oggetti indipendentemente dal dispositivo di emissione che si userà, permettendo così lo scambio tra differenti mezzi.

L’EPS ha trovato un utilizzo soprattutto nell’ambito della stampa, tuttavia anche lì ha ormai passato il testimone al suo noto successore, il formato PDF (Portable Document Format), il quale si adatta anche all’invio di e-mail per via delle sue dimensioni di file decisamente più ridotte. Come formato immagine per progetti web non è adatto né lo storico EPS tantomeno il moderno PDF, che viene utilizzato più per lo scambio o la presentazione di documenti di testo.

Utilizzo consigliato: descrizione di pagine di stampa complesse (formato non più attuale)

Mentre molti altri formati vettoriali come il formato AI (Adobe Illustrator Artwork) risultano ugualmente poco adatti all’utilizzo sul web, il formato SVG (Scalable Vector Graphics), consigliato dal W3C, conferma in maniera convincente i vantaggi dei file vettoriali accennati al principio dell’articolo. Da quando è stata integrata appieno su tutti i browser esistenti dall’HTML5, la specifica per la descrizione di grafiche vettoriali bidimensionali che si basa sul linguaggio XML è un’alternativa da prendere seriamente in considerazione rispetto alle più tradizionali grafiche raster – nello specifico con uno sguardo ai siti web Mobile e responsive. In tutto ciò i file SVG, oltre a una scalabilità 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 presentazione come colori, font, ecc.
• Gli script possono attingere ai contenuti tramite DOM (Document Object Model).
• Le grafiche SVG sono in linguaggio macchina.
• Il rispettivo codice è contrassegnato e adattabile come file separato oppure direttamente all’interno del documento HTML.
• Vi si possono aggiungere animazioni in diverse modalità (SMIL, JavaScript, CSS).

Nello specifico per quanto riguarda le grafiche che contengono simboli (com’è ad esempio il caso dei loghi) oppure che devono reagire agli inserimenti dei visitatori di siti web (diagrammi dinamici), il formato SVG rappresenta una scelta eccellente. Inoltre il moderno formato immagine vettoriale sembra essere proprio fatto ad hoc per le grafiche di stampo tecniche. Uno sguardo alla statistica 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 informazioni complete e guide per l’inserimento del formato nel nostro articolo dedicato all’SVG.

Utilizzo consigliato: grafiche interattive o di stampo tecnico (loghi, pulsanti, icone e altri ancora.)