La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

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

Presentazioni simili


Presentazione sul tema: "Formati grafici Presentazione 1.8 Architettura dell'informazione | Prof. Luca A. Ludovico."— Transcript della presentazione:

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

2 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

3 Formati vettoriali Parte 1

4 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

5 Riscalatura di oggetti grafici vettoriali Architettura dell'informazione Prof. Luca A. Ludovico

6 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

7 Formati bitmap (o raster) Parte 2

8 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

9 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

10 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

11 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

12 Tricromia additiva e quadricromia sottrattiva Architettura dell'informazione Prof. Luca A. Ludovico

13 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

14 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

15 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

16 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

17 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

18 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

19 Esempio di GIF animata Architettura dell'informazione Prof. Luca A. Ludovico

20 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

21 Smiley (152 × 151 pixel, 128 colori) –BMP non compresso: 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

22 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

23 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

24 Ringing aloni ciano Blocking Formato JPEG (Joint Photographic Experts Group) Architettura dell'informazione Prof. Luca A. Ludovico

25 Formato JPEG (Joint Photographic Experts Group) Architettura dell'informazione Prof. Luca A. Ludovico

26 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


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

Presentazioni simili


Annunci Google