Sei in: Per i Webmaster - Tutorials - Alla scoperta dei formati grafici

Da quanto Internet è apparsa sotto i nostri occhi increduli, le immagini hanno sempre suscitato grande divertimento, stupore, interesse. Certo i contenuti sono importanti, ma anche l'occhio vuole la sua parte. Per questo un sito WEB che si rispetti è sempre ricco di fotografie, immagini animate, loghi e quant'altro possa attrarre la nostra attenzione con la magia dell'espressione visiva. In breve senza immagini il WEB farebbe un salto indietro di qualche hanno e ricorderebbe molto di più le ormai antiquate BBS (Banche dati on-line). Oggi le necessità dei WEB designer hanno obbligato programmatori e case di software a inventare formati grafici per il WEB, pronti a stupire in termini di qualità gli "ignari" navigatori della rete.

PNG, GIF e JPEG, questi i nomi, o meglio gli acronimi dei principali formati che si contendono il nome di "Re" del WEB. In realtà ognuno di questi è stato studiato per un particolare utilizzo: per raggiungere un buon risultato è sempre importante ottimizzare le immagini secondo regole specifiche.

Il formato JPEG

Il formato di compressione JPEG: le basi

Acronimo di Joint Photographic Expert Group, non si tratta di un vero e proprio formato, ma di una serie di protocolli standard per la compressione delle immagini. In realtà oggi tutti i programmi di fotoritocco e di grafica per il WEB adottano l'estensione JPEG, mentre è sempre più difficile trovare altri acronimi come, ad esempio, JFIF (acronimo di JPEG file interchange format, in realtà un'integrazione dello stesso JPEG). Fate attenziona perchè l'estensione del file è composta di tre lettere (a meno che non lavoriate con un computer Macintosh), quindi i file verranno estensione ".jpg".

Il formato JPEG utilizza un sistema di compressione con perdita di qualità. Questa significa che alcune informazioni della foto verranno cancellate per far si che questa occupi meno spazio in termini di KB. Di norma le informazioni eliminate sono quelle non necessarie e che non inficiano la qualità delle foto. In realtà questo processore ha dei vantaggi ma anche degli svantaggi: a ogni aumento di compressione corrisponde una perdita di "bit", cioè di informazioni, che possono provocare anche una drastica riduzione dei colori e del numero di pixel che compongono l'immagine. Bisogna considerare però il rovescio della medaglia, ovvero l'immancabile riduzione di spazio occupato.

Compressione: fare e disfare!

Mentre un protocollo di compressione senza perdita di qualità può raggiungere un rapporto pari a 2:1 (il 50% più piccolo) lo standard JPEG riesce ad ottenere un livello di compressione pari a 10:1 o anche 20:1 senza un apprezzabile (all'occhio umano) perdita di definizione. Alla fatidica domanda "Quanto è possibile comprimere un'immagine in formato JPEG?", una prima risposta immediata potrebbe essere: fino a quando l'immagine mantiene un aspetto pulito senza difetti percettibili.

Tenete ben presente che salvare più volte una fto in JPEG significa perdere altre informazioni e sommarle alle precedenti ottenendo così, nella maggior parte dei casi, un pessimo risultato. C'è da considerare inoltre che non sempre la qualità iniziale di una foto è eccelsa e quindi è necessario fare i conti anche con i difatti preesistenti.

è necessario partire da un concetto base: lavorate sempre con le immagini nel loro formato nativo, magari non compresso, come possono essere TIF o BMP e, a lavoro finito, salvate e comprimete in JPEG.

Il formato GIF

Immagini GIF e loro funzionalità sul WEB

Graphis Interchange Format, è questo il nome per esteso di uno dei più noti formati grafici realizzati per soddisfare alcune esigenze della rete. Viene distribuito dalla CompuServe per consentire la diffusione di immagini a 8 bit (256 colori) attraverso reti come le BBS e TelNet.

Le caratteristiche di questo formato si conformavano bene con le necessità delle banche dati e soprattutto con i modem non troppo veloci di allora.

Esistono sostanzialmente due tipi di GIF: le 87a e le 89a. Il secondo tipo si differenzia per il fatto che supporta la trasparenza e le animazioni. Entrambi i formati utilizzano una comprensione di tipo LWZ. Questo particolare tipo di compressione crea una tabella, ordinando ogni singolo bit che compone l'immagine. A questo punto le informazioni che fanno capo all'immagine vengono comparate, mentre quelle superflue vengono scartate. Il vantaggio di questo algoritmo è che i colori vengono confrontati secondo una sequenza di sfumature e non per ogni singolo bit, riducendo così i tempi di compressione e lo spazio richiesto per la memorizzazione. Le GIF ottengono grandi risultati quando sono utilizzate per disegnare interfacce grafiche e pulsanti di navigazione. Infatti la compressione funziona perfettamente con ampie porzioni di colore piuttosto che molti toni e sfumature, che sono prerogativa di immagine fotografiche.

Quale scegliere

Il sistema di memorizzazione delle immagini a 8 bit di profondità di colore è leggermente differente rispetto alle immagini a 16 o 24 bit in modalità "true color", ovvero a milioni di colori.

Infatti, piuttosto che definire il colore di un singolo pixel utilizzando da gli 8 bit disponibili, la GIF crea una tavolozza di 256 colori suddivisi in box da 24 bit ciascuna. In poche parole è come se un artista avesse con sè una tavolozza di 16.777.215 colori e tutte le sue variazioni. Questi colori sono identificabili da un numero che va da 0 a 255 all'interno dell'immagine. Ad esempio, ammettiamo che il nero sia il primo colore presente nella tavolozza. A questo punto tutti i pixel neri presenti nell'immagine saranno indicati con il numero 0, e di conseguenza, se il colore bianco corrispondesse al 2, tutti i colori bianchi farebbero riferimento alla seconda tavolozza a 24 bit. Peraltro, dato dato che ogni palette di colori viene indicizzata, è possibile ottenere, come dicevamo prima, un colore di trasparenza e sfruttarlo appieno sui siti WEB.

Il formato PNG

Il formato PNG (Portable Network Graphis) non è supportato da tutti i tipi di browser, ma è tuttavia possibile utilizzarlo grazie a un plung-in che consente di visualizzare le immagini PNG. Il primo consiglio è quello di non usare questo formato se il vostro sito dovrà essere accessibile  un grande numero di utenti. Tuttavia è utile sapere come funziona, quali sono le sue caratteristiche e quali vantaggi offre. Esistono due versioni del formato PNG: il formato PNG-8 usa colori a 8 bit e presenta alcune similitudini con i file di tipo GIF.

è quindi molto utile per la compressione di aree a tinta unita e mantiene i dettagli nitidi. Il formato PNG-24 supporta colori a 24 bit ed è del tutto simile ai file compressi di tipo JPEG. Questo infatti si adatta sia alle immagini fotografiche sia alle immagini geometriche e in più ha il vantaggio di supportare la trasparenza. Ecco perchè in fin dei conti questo formato mantiene le peculiarità degli altri due, pur essendo il meno diffuso della rete.

Quale formato scegliere?

IL formato grafico ideale non esiste. è necessario scegliere quello giusto a seconda del tipo di immagine che si intende pubblicare sul WEB.

Ognuno dei formati che abbiamo analizzato è dotato di caratteristiche proprie, ma tutti sono adatti per ridurre drasticamente lo spazio occupato da file grafici. Non ci sogneremo mai di pubblicare formati senza perdita di qualità come le BMP o le TIFF.

Il formato JPEG è il migliore per quanto riguarda la pubblicazione di immagini fotografiche a sedici milioni di colori, mentre le GIF sono ottimali per realizzare grafica WEB, come pulsanti e interfacce di navigazione. Il filtro dithering e la trasparenza fanno di questo formato un must per tutti i WEB disigner.

è consigliabile inoltre non usare il formato JPEG per immagini contenenti testo, che potrebbe risultare sgranato e di difficile lettura, a meno che non utilizzate una compressione minima, a discapito delle dimensioni. Anche il formato GIF va utilizzato con immagini che contengono larghe aree di colore, per sfruttare al massimo l'algoritmo di compressione LZW. Il formato PNG si trova a metà strada tra gli altri due e raggiunge un buon livello con immagini a 24 bit per colore; peraltro può sfruttare la trasparenza, molto utile in determinate situazioni. Per concludere, pur esistendo regole ben precise, è importante fare delle continue prove per personalizzare il proprio sito da un punto di vista grafico e ottenere risultati migliori. Il compromesso migliore è quello intermedio, tra qualità visiva e dimensioni, ma chiunque può trovare il giusto equilibrio.

Una tavolozza di colori... sicura

è incredibile come un monitor che oggi riesce a ottenere milioni di colori sia sufficiente a riprodurre solamente 216 colori. O meglio, colori che il WEB riconosce sicuri. Ma cosa significa esattamente sicuri? Sono quei colori che vengono riprodotti esattamente come tali su ogni tipo di di schermo, ovvero quei colori che rispettano appieno le caratteristiche definite dalla tavolozza standard di ogni programma di grafica. Il motivo per cui solo 216 colori dei 256 totali contenuti nella tavolozza sono utilizzati, è perchè sia Mac che i PC lasciano 40 tonalità per disegnare e colorare l'interfaccia grafica. Le due piattaforma distribuiscono in modo differente questi ultimi colori. Ecco perchè non vengono inseriti nella tavolozza.

Un estratto dei 216 colori sicuri.

Nome e colori

La maggior parte dei colori utilizzati sul WEB possono essere inseriti semplicemente richiamando il loro nome in inglese. Ad esempio, per inserire uno sfondo di colore nero è sufficiente ultilizzare il comando: <body bgcolor="black">.

Come vedete all'interno del tag è stata inserita la parola inglese "black", che è appunto il colore nero. Sono ben 136 le definizioni possibili e quindi non si possono raggiungere il numero di 216. Peraltro non tutti i colori vengono riportati fedelmente.

Ecco perchè la soluzione migliore è quella di identificare il colore con il suo diretto codice esadecimale (il nero corrisponde a #000000). Questo codice fa riferimento all'intensità dei colori principali, che sono il rosso, il verde e il blu. Le prime due cifre fanno riferimento al colore rosso, le seconde al verde e le ultime al blu. La combinazione dei sei valori permette di ottenere milioni di sfumature.