Post on 02-May-2015
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
Architettura dell'informazione Prof. Luca A. Ludovico
Riscalatura di oggetti grafici vettoriali
Architettura dell'informazione Prof. Luca A. Ludovico
• 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)
Architettura dell'informazione Prof. Luca A. Ludovico
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)
Architettura dell'informazione Prof. Luca A. Ludovico
• 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
Architettura dell'informazione Prof. Luca A. Ludovico
• 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
Architettura dell'informazione Prof. Luca A. Ludovico
• 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
Architettura dell'informazione Prof. Luca A. Ludovico
Tricromia additiva e quadricromia sottrattiva
Architettura dell'informazione Prof. Luca A. Ludovico
• 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
Architettura dell'informazione Prof. Luca A. Ludovico
• 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
Architettura dell'informazione Prof. Luca A. Ludovico
• 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)
Architettura dell'informazione Prof. Luca A. Ludovico
• 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
Architettura dell'informazione Prof. Luca A. Ludovico
• 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)
Architettura dell'informazione Prof. Luca A. Ludovico
• 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
Architettura dell'informazione Prof. Luca A. Ludovico
Esempio di GIF animata
Architettura dell'informazione Prof. Luca A. Ludovico
• 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)
Architettura dell'informazione Prof. Luca A. Ludovico
• 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
Architettura dell'informazione Prof. Luca A. Ludovico
• 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)
Architettura dell'informazione Prof. Luca A. Ludovico
• 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)
Architettura dell'informazione Prof. Luca A. Ludovico
Ringingaloni ciano
Blocking
Formato JPEG (Joint Photographic Experts Group)
Architettura dell'informazione Prof. Luca A. Ludovico
Formato JPEG (Joint Photographic Experts Group)
Architettura dell'informazione Prof. Luca A. Ludovico
• 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
Architettura dell'informazione Prof. Luca A. Ludovico