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

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

Embed Size (px)

Citation preview

Page 1: Formati grafici Presentazione 1.6 Architettura dell'informazione | Prof. Luca A. Ludovico

Formati grafici

Presentazione 1.6

Architettura dell'informazione | Prof. Luca A. Ludovico

Page 2: Formati grafici Presentazione 1.6 Architettura dell'informazione | Prof. Luca A. Ludovico

Scaletta della lezione

•Distinzione tra immagini vettoriali e bitmap•Processi di digitalizzazione delle immagini•Concetto di antialiasing•Definizione dei principali parametri:

– Risoluzione– Profondità di colore

•Esempi

Architettura dell'informazione Prof. Luca A. Ludovico

Page 3: Formati grafici Presentazione 1.6 Architettura dell'informazione | Prof. Luca A. Ludovico

Campagne di digitalizzazione

Documento originale

Scansione

Oggetto digitale(o produzione diretta)

Editing/restauro dell’oggetto digitale

Argomento della lezione

Architettura dell'informazione Prof. Luca A. Ludovico

Page 4: Formati grafici Presentazione 1.6 Architettura dell'informazione | Prof. Luca A. Ludovico

Tipologie di immagini digitali

• Esistono due famiglie di immagini digitali:– immagini bitmap o raster

rappresentate sul supporto digitale come una matrice di punti

– immagini vettorialirappresentate come funzioni vettoriali che descrivono curve e poligoni

• Nella lezione corrente, si darà una definizione intuitiva. Nella prossima lezione, si presenteranno proprietà ed esempi di formato

Architettura dell'informazione Prof. Luca A. Ludovico

Page 5: Formati grafici Presentazione 1.6 Architettura dell'informazione | Prof. Luca A. Ludovico

Immagini vettoriali

• Nel caso di figure geometriche relativamente semplici, invece di descrivere l’immagine punto per punto, conviene specificare: tipo, forma, colore, dimensione e posizione delle figure geometriche (cerchi, rettangoli, linee, frecce e così via) che le compongono.

• Esempio del quadrilatero: descrizione tramite quattro vertici, colore del contorno, spessore del contorno, colore di riempimento.

• Esempi: le immagini ClipArt di Microsoft Word (WMF), i font TrueType, …

Architettura dell'informazione Prof. Luca A. Ludovico

ABCD

Page 6: Formati grafici Presentazione 1.6 Architettura dell'informazione | Prof. Luca A. Ludovico

Tra i vantaggi della descrizione vettoriale ricordiamo i seguenti:

•hanno un’occupazione ridotta di spazio su disco (invece della descrizione di tutti i punti basta specificare solo la posizione di pochi punti chiave e le equazioni per collegarli)

•si possono facilmente ridimensionare, rimpicciolendo ma anche ingrandendo, senza perdita di qualità

•è possibile modificare in modo indipendente ogni singolo elemento geometrico che compone l’immagine (vedi slide successiva)

Immagini vettoriali

Architettura dell'informazione Prof. Luca A. Ludovico

Page 7: Formati grafici Presentazione 1.6 Architettura dell'informazione | Prof. Luca A. Ludovico

Variazione di colore, spostamento, ingrandimento, rotazione di singoli elementi graficianche in un software non dedicato all’editing di immagini quale Microsoft Word

Editing di immagini vettoriali

Architettura dell'informazione Prof. Luca A. Ludovico

Page 8: Formati grafici Presentazione 1.6 Architettura dell'informazione | Prof. Luca A. Ludovico

Immagini bitmap (o raster)

• Un’immagine digitale bitmap (o raster) è costituita da una matrice di punti detti pixel (contrazione di picture element), simili ai punti della retinatura nelle immagini a stampa

Architettura dell'informazione Prof. Luca A. Ludovico

Page 9: Formati grafici Presentazione 1.6 Architettura dell'informazione | Prof. Luca A. Ludovico

• Digitalizzare = passare dal dominio analogico (mondo reale) a quello digitale (mondo elettronico/informatico) attraverso opportuni processi

• I processi di digitalizzazione non hanno luogo solo nel campo delle immagini statiche: si pensi ad esempio ai suoni e ai video

• Come si costruisce la matrice di pixel che definisce un’immagine bitmap a partire da un’immagine reale?

Il processo di digitalizzazione

Architettura dell'informazione Prof. Luca A. Ludovico

Page 10: Formati grafici Presentazione 1.6 Architettura dell'informazione | Prof. Luca A. Ludovico

Un esempio di digitalizzazione (1)

Architettura dell'informazione Prof. Luca A. Ludovico

Consideriamo il semplice caso di un disegno in bianco e nero. Per estrarre la sequenza di bit che rappresenti tale disegno:

•Per prima cosa si divide il disegno in quadrati molto piccoli, chiamati pixel, sovrapponendo idealmente una griglia

•Ad ogni quadratino della griglia si attribuisce il colore nero se il contenuto di nero al suo interno supera quello del bianco, e viceversa il colore bianco se il contenuto del bianco al suo interno supera quello del nero (a destra un esempio molto grossolano)

Page 11: Formati grafici Presentazione 1.6 Architettura dell'informazione | Prof. Luca A. Ludovico

• La figura mostrata rappresenta la nuova immagine che si ottiene dopo aver portato a termine la precedente operazione

• A questo punto, a ogni quadratino o pixel della griglia si associa 0 se il suo contenuto è il bianco e 1 in caso contrario.

• In tal modo si ottiene una matrice di 0 e 1 che codifica l’immagine della lampadina in formato digitale

Un esempio di digitalizzazione (2)

Architettura dell'informazione Prof. Luca A. Ludovico

Page 12: Formati grafici Presentazione 1.6 Architettura dell'informazione | Prof. Luca A. Ludovico

• L’immagine di partenza, dopo questa operazione, si è dunque trasformata in una sorta di mappa composta di 0 e 1, ed infatti il nome tecnico che si usa per descrivere questa sequenza di bit è proprio bitmap

• Ovviamente, più fitta è la griglia che si sovrappone all’immagine e più la rappresentazione digitale risulterà fedele all’originale, inseguendone la forma con maggiore raffinatezza. Analogo discorso per i colori (nell’esempio ci siamo limitati al B/N).

• D’altra parte, una griglia più fitta implica un maggior numero di pixel, e una codifica più ricca dei colori un maggiore numero di bit per pixel. Di conseguenza l’occupazione su disco cresce in proporzione.

Un esempio di digitalizzazione (3)

Architettura dell'informazione Prof. Luca A. Ludovico

Page 13: Formati grafici Presentazione 1.6 Architettura dell'informazione | Prof. Luca A. Ludovico

• Avendo un’immagine di partenza a colori, anziché utilizzare solo un bit per pixel, è possibile utilizzare una combinazione di 0 e 1 in base a una tabella di codifica dei colori.

• La successiva tabella è ad esempio composta di 64 colori, e quindi ad ogni pixel si può assegnare un numero da 0 a 63 in binario che individuerà univocamente un colore della tabella stessa

• Per esprimere in binario numeri da 0 a 63 sono necessari sei bit, quindi a ogni pixel dell’immagine corrisponderà una combinazione di 6 bit che ne rappresenta il colore

• In generale, detto n il numero di bit da utilizzare e c il numero di colori rappresentabili usando n bit per pixel, si ha c = 2n

Un esempio di digitalizzazione (4)

Architettura dell'informazione Prof. Luca A. Ludovico

Page 14: Formati grafici Presentazione 1.6 Architettura dell'informazione | Prof. Luca A. Ludovico

Da 16 milioni di colori a B/N

Architettura dell'informazione Prof. Luca A. Ludovico

Page 15: Formati grafici Presentazione 1.6 Architettura dell'informazione | Prof. Luca A. Ludovico

• L’antialiasing è un metodo per rappresentare immagini vettoriali continue su dispositivi di visualizzazione discreti, di modo che assomiglino il più possibile all’originale.

• Anche per immagini vettoriali, il monitor è comunque una matrice discontinua di punti!

Antialiasing

Architettura dell'informazione Prof. Luca A. Ludovico

X10

Page 16: Formati grafici Presentazione 1.6 Architettura dell'informazione | Prof. Luca A. Ludovico

Architettura dell'informazione Prof. Luca A. Ludovico

Effetto dell’antialiasing su immagini e testi

Page 17: Formati grafici Presentazione 1.6 Architettura dell'informazione | Prof. Luca A. Ludovico

Architettura dell'informazione Prof. Luca A. Ludovico

Effetto dell’antialiasing nei videogame

Page 18: Formati grafici Presentazione 1.6 Architettura dell'informazione | Prof. Luca A. Ludovico

Immagini bitmap: caratteristiche

• Ciascun punto rappresenta una porzione di immagine in un particolare colore (o tono di grigio) e viene codificato mediante uno o più bit

• Il numero di punti in una data area determina la risoluzione dell’immagine

• Il numero di colori (o di toni di grigio) che ciascun punto può assumere individua la profondità di colore

Architettura dell'informazione Prof. Luca A. Ludovico

Page 19: Formati grafici Presentazione 1.6 Architettura dell'informazione | Prof. Luca A. Ludovico

• La risoluzione (e dunque la qualità del dettaglio) di un’immagine è tanto maggiore quanti più punti «coprono» una data area

• Si esprime in ragione del numero di pixel per unità di lunghezza verticale e orizzontale (tipicamente l’area è quadrata):– 72 punti per pollice (DPI) > risoluzione standard per i monitor– 300 punti per pollice (DPI) > risoluzione standard per la stampa– 600 punti per pollice (DPI) > risoluzione alta per la stampa

DPI = dot per inchPPI = pixel per inch1 inch (pollice) = 2,54 cm

La risoluzione

Architettura dell'informazione Prof. Luca A. Ludovico

Page 20: Formati grafici Presentazione 1.6 Architettura dell'informazione | Prof. Luca A. Ludovico

Esempio

Architettura dell'informazione Prof. Luca A. Ludovico

risoluzione 2k risoluzione k

Page 21: Formati grafici Presentazione 1.6 Architettura dell'informazione | Prof. Luca A. Ludovico

Stampante(300 dpi)

Monitor(72 dpi)

1200 / 72 = 16,67

16,67 volte maggiore della dimensione originale

Scanner(1200 dpi)

1200 / 300 = 4

4 volte la dimensione originaleoppure

si ricampiona mantenendodimensioni fisiche

(perdita info)

Architettura dell'informazione Prof. Luca A. Ludovico

Esempio: cosa succede ai DPI?

Page 22: Formati grafici Presentazione 1.6 Architettura dell'informazione | Prof. Luca A. Ludovico

• La profondità di colore è determinata dal numero di bit utilizzato per rappresentare ciascun pixel– Un’immagine in bianco e nero associa a ciascun punto un

solo bit– Un’immagine con 256 toni di colore o di grigio associa a

ciascun pixel 8 bit (un byte)– Un’immagine a 65.536 colori associa a ciascun pixel 16 bit– Un’immagine a 16 milioni di colori associa a ciascun pixel 24

o 32 bit

• E’ possibile fare un calcolo esatto dell’occupazione di spazio su disco date le dimensioni fisiche dell’immagine, la risoluzione e la profondità di colore?

La profondità di colore

Architettura dell'informazione Prof. Luca A. Ludovico

Page 23: Formati grafici Presentazione 1.6 Architettura dell'informazione | Prof. Luca A. Ludovico

• Le immagini digitali bitmap occupano tanto più spazio in memoria quanto più aumenta la loro qualità.Esempi:– un’immagine di un pollice quadrato a 72 dpi e 256 toni di

grigio occupa 72x72x8 = 40 Kbit = 5 KByte (circa)– un’immagine di un pollice quadrato a 300 dpi e 16 mil. di

colori occupa 300x300x24 = 2 Mbit = 270 KByte (circa)

• Attenzione: questo calcolo non è del tutto esatto1. Una volta salvata in un formato grafico, è probabile che questo

presenti qualche byte di intestazione (a meno che non si tratti di un formato RAW)

2. Molti formati prevedono compressione, con o senza perdita

Occupazione di spazio in memoria

Architettura dell'informazione Prof. Luca A. Ludovico

Page 24: Formati grafici Presentazione 1.6 Architettura dell'informazione | Prof. Luca A. Ludovico

• Alcuni formati prevedono forme di compressione, cioè di diminuzione dei bit/byte richiesti per la memorizzazione dell’immagine in memoria

• Gli algoritmi di compressione si dividono in due categorie (e non solo per le immagini)– Compressione senza perdita: la codifica avviene riducendo

le aree di colore uguale in modo tale da poter ricostruire esattamente l’immagine originale; ha un rapporto medio di compressione di 2:1

– Compressione con perdita: la codifica avviene eliminando definitivamente alcune informazioni statisticamente meno rilevanti per la ricostruzione dell’immagine; permette rapporti di compressione fino a 100:1

La compressione delle immagini

Architettura dell'informazione Prof. Luca A. Ludovico

Page 25: Formati grafici Presentazione 1.6 Architettura dell'informazione | Prof. Luca A. Ludovico

La compressione delle immagini

Originale in formato TIFF

compresso senza perdita

(circa 4 MB)

Architettura dell'informazione Prof. Luca A. Ludovico

Page 26: Formati grafici Presentazione 1.6 Architettura dell'informazione | Prof. Luca A. Ludovico

JPEG (media qualità)345 KB

JPEG (bassa qualità)97 KB

Architettura dell'informazione Prof. Luca A. Ludovico

La compressione delle immagini

Page 27: Formati grafici Presentazione 1.6 Architettura dell'informazione | Prof. Luca A. Ludovico

La compressione delle immagini

Originale in formato TIFF compresso senza perdita – circa 8 MB

Architettura dell'informazione Prof. Luca A. Ludovico

Page 28: Formati grafici Presentazione 1.6 Architettura dell'informazione | Prof. Luca A. Ludovico

La compressione delle immagini

JPEG (alta qualità) – 2,7 MB

Architettura dell'informazione Prof. Luca A. Ludovico

Page 29: Formati grafici Presentazione 1.6 Architettura dell'informazione | Prof. Luca A. Ludovico

Architettura dell'informazione Prof. Luca A. Ludovico

La compressione delle immagini

JPEG (bassa qualità) – 407 KB

Page 30: Formati grafici Presentazione 1.6 Architettura dell'informazione | Prof. Luca A. Ludovico

• «Dimensioni» è un termine ambiguo, che si può riferire a:

– Dimensioni dell’oggetto fisico(es.: in cm)

– Dimensioni dell’oggetto digitale/digitalizzato(es.: in pixel)

– Occupazione di memoria (es.: in KB)

• Quali sono le relazioni tra le diverse dimensioni?

Le «dimensioni» delle immagini

Architettura dell'informazione Prof. Luca A. Ludovico