Formati grafici Presentazione 1.8 Architettura dell'informazione | Prof. Luca A. Ludovico

Formati grafici

Presentazione 1.8

Architettura dell'informazione | Prof. Luca A. Ludovico

• Formati vettoriali– dwg (Autodesk AutoCAD)– fla (Macromedia Flash)– svg (Scalable Vector Graphics)– wmf ed emf (Windows Metafile, Enhanced Metafile)

• Formati bitmap– raw– bmp – gif– png– tiff– jpeg

Elenco dei principali formati

Architettura dell'informazione Prof. Luca A. Ludovico

Non trattati

Formati vettorialiParte 1

• Molti formati vettoriali sono proprietari (ad esempio dwg e fla) e supportano anche la grafica raster (ad esempio svg e wmf)

• Comprimono molto bene immagini semplici e forme geometriche

• L’esempio sotto alla dimensione nominale 617 × 316 pixel occupa solo 6 KB ed è riscalabile a piacimento

Grafica vettoriale


Riscalatura di oggetti grafici vettoriali


• SVG permette di trattare tre tipi di oggetti grafici:– forme geometriche, cioè linee costituite da segmenti di retta e

curve e aree delimitate da linee chiuse;– immagini della grafica raster e immagini digitali;– testi esplicativi, eventualmente cliccabili.

• Gli oggetti grafici possono essere raggruppati in oggetti più comprensivi, muniti di attributi di stile e aggiunti ad oggetti grafici precedentemente costruiti e visualizzati

• Formato supportato da software free e commerciali– Adobe Illustrator, Corel Draw, Draw della suite OpenOffice, …

Scalable Vector Graphics (SVG)


Formati bitmap (o raster)Parte 2

• La grafica bitmap, o grafica raster (in italiano teoricamente traducibile come grafica a griglia), è una tecnica utilizzata per descrivere un'immagine in formato digitale

• La grafica bitmap si contrappone alla grafica vettoriale

• Il termine raster (trama, reticolo, griglia) ha origine nella tecnologia televisiva analogica. In computer grafica, indica la griglia ortogonale di punti che costituisce un'immagine raster

Grafica bitmap (o raster)


• Nella grafica raster l'immagine viene vista come una scacchiera e ad ogni elemento della scacchiera, chiamato pixel, viene associato uno specifico colore. Il colore può essere definito con due tecniche:– se l'immagine contiene pochi colori si crea un elenco dei

colori da utilizzare e nella scacchiera viene inserito l'indice che punta allo specifico colore del pixel. La selezione di colori prende il nome di palette, o tavolozza; di solito il numero di colori è potenza di 2 e raramente supera i 256 (che richiedono 8 bit)

– se l'immagine contiene molti colori il singolo pixel non definisce l'indice con il quale si punta a una tavolozza di colori, ma direttamente il colore.

Definizione del colore dei pixel


• La palette di colori può essere adeguata al contesto. Ad esempio, per un’immagine in B/N ha senso coprire la scala di grigi, per la foto di un deserto serve un gran numero di sfumature sabbia ecc.

Esempi di tavolozza


• Il colore dei pixel può essere definito come una combinazione di componenti

• Esempi di modelli di colore– RGB è di tipo additivo e si basa sui tre colori rosso (Red),

verde (Green) e blu (Blue). Tipicamente in uso nei monitor– CMYK è di tipo sottrattivo e si basa sulla quadricromia ciano

(Cyan), magenta (Magenta), giallo (Yellow) e lastra chiave nera per l’allineamento (Key black). Tipicamente in uso nei sistemi di stampa

• I colori ottenibili sono un sottoinsieme della gamma visibile, quindi non tutti i colori che percepiamo possono essere realizzati con la tricromia o la quadricromia

Definizione diretta del colore dei pixel


Tricromia additiva e quadricromia sottrattiva


• Raw è un termine inglese che significa «non elaborato», «non raffinato», «grezzo»: l'immagine catturata dal sensore del dispositivo di acquisizione (ad es. una macchina fotografica) viene registrata nella sua forma originaria, cioè dopo essere stata solo convertita da analogico a digitale, senza ulteriore elaborazione

• Viene usato per non avere perdite di qualità della registrazione su un qualsiasi supporto di memoria, rispetto ai segnali catturati dal sensore e successivamente composti per interpolazione dal processore d’immagine nelle sue tre componenti fondamentali RGB (Red, Green, Blue)

• Per rendere visibile l’immagine è necessario un software ad hoc per l’elaborazione

Formato RAW


• Vantaggi– Registrazione del segnale nella sua forma originaria, quindi alla massima qualità

→ adeguato ad applicazioni professionali– Possibilità di produrre contestualmente un altro formato (tipicamente jpeg) per

la visualizzazione immediata– Possibilità di catturare le immagini con una regolazione anche non ottimale di

alcune impostazioni (esposizione, bilanciamento del bianco, ecc), in quanto la successiva elaborazione in studio (il cosiddetto sviluppo in camera chiara) consente di regolare questi parametri di ripresa mantenendo la qualità ai livelli più alti possibile

• Svantaggi– Proliferazione di formati proprietari (variano anche di modello in modello)– Dimensione delle immagini prodotte (la dimensione dei file Raw in una

fotocamera da 9 MPixel con campionamento a 16 bit è intorno a 18,5 MB contro i 2 MB di un file registrato in JPEG-modalità fine)

– Utilizzo obbligatorio di software per lo sviluppo in camera chiara

Formato RAW: vantaggi e svantaggi


• Il formato di file Windows bitmap permette operazioni di lettura e scrittura molto veloci e senza perdita di qualità, ma richiede generalmente una maggior quantità di memoria rispetto ad altri formati analoghi

• Le immagini bitmap possono avere una profondità di 1, 4, 8, 16, 24 o 32 bit per pixel. Le bitmap con 1, 4 e 8 bit contengono una tavolozza per la conversione dei (rispettivamente 2, 16 e 256) possibili indici numerici nei rispettivi colori. Nelle immagini con profondità più alta il colore non è indicizzato bensì codificato direttamente nelle sue componenti cromatiche RGB.

• La versione 3 del formato (in assoluto la più comune) non supporta il canale alfa né i metadati

Formato BMP (bitmap)


• Vantaggi– Semplicità del formato– Diretta conseguenza: velocità di lettura/scrittura su disco, soprattutto sulle macchine

più lente. Nelle bitmap non compresse la rappresentazione dei dati nella memoria RAM è in gran parte simile, spesso identica, a quella dei dati su disco: il processore non è costretto ad effettuare calcoli laboriosi durante le operazioni di codifica e di decodifica

– Formato ben documentato e non tutelato da brevetti (→ mondo open source)– Retrocompatibilità– Supporto di compressione senza perdita RLE (Run-length encoding), che però rallenta

la lettura/scrittura

• Svantaggi– Maggiori dimensioni dei file rispetto ad altri formati raster– Nessun supporto per la trasparenza– Formato inadeguato per Internet, data la dimensione dei file e lo scarso supporto da

parte dei browser– Formato superato e antiquato da molti punti di vista: esistono alternative migliori in

ogni campo

Formato BMP: vantaggi e svantaggi


• Formato per immagini digitali di tipo bitmap basato su tavolozza

• Prevede un numero massimo di 256 colori. Ogni colore all'interno della tavolozza è definito da una terna di valori RGB da un byte ciascuno – La tavolozza consta di 256 colori scelti tra i 16,8 milioni di colori distinti, e

ogni singolo pixel richiede un solo byte che fa riferimento alla posizione del colore nella tavolozza.

– Esiste una tecnica per simulare un numero maggiore di colori contemporanei (dithering), accostando pixel di colore diverso, simile alla retinatura della stampa in quadricromia. Tuttavia questo sistema tende a sgranare l'immagine

– Un singolo colore della tavolozza può essere, opzionalmente, definito come trasparente e quindi in fase di visualizzazione viene sostituito con il colore di sfondo o con l'immagine sottostante. Differisce però dal canale alfa in quanto non consente la semitrasparenza

Formato GIF (Graphics Interchange Format)


• Vantaggi– Dimensioni del file contenute (al più un byte per pixel)– Supporto alla trasparenza– Supporto di animazioni– Supporto di compressione senza perdita LZW, molto più efficiente dell'RLE (Run-

length encoding)– Supporto da parte dei browser → formato adeguato per Internet– Adozione (opzionale) del dithering e dell’interlacciamento, che memorizza le linee

in un ordine tale da rendere riconoscibile un'immagine solo parzialmente scaricata– Nessun brevetto (esistevano ma sono scaduti)

• Svantaggi– Inadeguatezza su immagini fotografiche o ricche di colori (palette limitata a 256

colori, anche se scelti tra 16,8 milioni)– Nessun supporto per la semitrasparenza (canale alfa)

• Si veda l’esempio del koala nel file zip allegato

Formato GIF: vantaggi e svantaggi


Esempio di GIF animata


• Nasce in seguito alla decisione di introdurre royalty sul formato GIF (1994)

• Apparentemente simile al GIF, in quanto capace di immagazzinare immagini con compressione lossless

• Può memorizzare immagini – truecolor fino a 48 bit per pixel– in scala di grigio sino a 16 bit per pixel

con gestione dei colori classica tipo bitmap oppure indicizzata. Ha un canale dedicato per la trasparenza (canale alfa) che si

comporta diversamente dal colore trasparente del GIF

• Più efficiente con immagini non fotorealistiche

Formato PNG (Portable Network Graphics)


• Smiley (152 × 151 pixel, 128 colori)– BMP non compresso: 24030 byte– BMP compresso senza perdita: 8764 byte– GIF: 5365 byte– PNG: 4029 byte

Esempio di confronto tra formati


• Formato immagine di tipo raster dotato di notevole flessibilità, largamente utilizzato per lo scambio di immagini fra stampanti e scanner perché permette di specificare numerose indicazioni aggiuntive come le tabelle di gamut o informazioni sulla calibratura del colore

• Permette di rappresentare immagini con diversi spazi di colore:– Scale di grigio– RGB– CMYK– CIELab

• Supporta diversi formati di compressione:– LZW e ZIP (di tipo «lossless», cioè senza perdita di informazione);– JPEG (di tipo «lossy», cioè con perdita di informazione).

Formato TIFF (Tagged Image File Format)


• Formato attualmente più utilizzato per le immagini fotografiche non professionali, molto comune anche sul Web

• L'estensione più comune per questo formato è .jpg, ma sono anche usate .jpeg, .jfif, .JPG, .JPE

• Adotta normalmente algoritmi di compressione con perdita. All'aumentare del livello di compressione, compaiono artefatti sempre più visivamente evidenti: – la quadrettatura o blocking; – ringing (fenomeno di Gibbs, tipico della trasformata discreta del coseno)– blurring (sfocatura)

Formato JPEG (Joint Photographic Experts Group)


Ringingaloni ciano

Blocking





• I browser supportano nativamente 3 formati bitmap:

– GIF (lossless, ma con palette limitata a 256 colori)Indicato per gli elementi grafici delle pagine, immagini con pochi colori o con aree molto estese di un singolo colore

– JPEG (lossy)Modulabile come qualità (e conseguente livello di compressione), indicato per la grafica fotorealistica e per le texture

– PNG (lossless)Alternativa valida a entrambi i formati, con supporto della trasparenza tramite il canale alfa

Formati grafici per il Web


Documents

Formati grafici Presentazione 1.8 Architettura dell'informazione | Prof. Luca A. Ludovico