Presentazione 1.6
Formati grafici
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
Campagne di digitalizzazione
Documento originale
Scansione
Argomento della lezione
Oggetto digitale
(o produzione diretta)
Editing/restauro dell’oggetto digitale
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 vettoriali
rappresentate 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
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.
ABCD
ABCD
ABCD
• Esempi: le immagini ClipArt di Microsoft Word (WMF), i font TrueType, …
Architettura dell'informazione
Prof. Luca A. Ludovico
Immagini vettoriali
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)
Architettura dell'informazione
Prof. Luca A. Ludovico
Editing di immagini vettoriali
Variazione di colore, spostamento, ingrandimento,
rotazione di singoli elementi grafici
anche in un software non dedicato all’editing di immagini quale Microsoft Word
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
Il processo di digitalizzazione
• 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?
Architettura dell'informazione
Prof. Luca A. Ludovico
Un esempio di digitalizzazione (1)
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)
Architettura dell'informazione
Prof. Luca A. Ludovico
Un esempio di digitalizzazione (2)
• 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
Architettura dell'informazione
Prof. Luca A. Ludovico
Un esempio di digitalizzazione (3)
• 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.
Architettura dell'informazione
Prof. Luca A. Ludovico
Un esempio di digitalizzazione (4)
• 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
Architettura dell'informazione
Prof. Luca A. Ludovico
Da 16 milioni di colori a B/N
Architettura dell'informazione
Prof. Luca A. Ludovico
Antialiasing
• 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!
X10
Architettura dell'informazione
Prof. Luca A. Ludovico
Effetto dell’antialiasing su immagini e testi
Architettura dell'informazione
Prof. Luca A. Ludovico
Effetto dell’antialiasing nei videogame
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
La risoluzione
• 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 inch
PPI = pixel per inch
1 inch (pollice) = 2,54 cm
Architettura dell'informazione
Prof. Luca A. Ludovico
Esempio
risoluzione 2k
Architettura dell'informazione
Prof. Luca A. Ludovico
risoluzione k
Esempio: cosa succede ai DPI?
1200 / 300 = 4
4 volte la dimensione originale
oppure
si ricampiona mantenendo
dimensioni fisiche
(perdita info)
Scanner
(1200 dpi)
Monitor
(72 dpi)
1200 / 72 = 16,67
16,67 volte maggiore della
dimensione originale
Architettura dell'informazione
Prof. Luca A. Ludovico
Stampante
(300 dpi)
La profondità di colore
• 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?
Architettura dell'informazione
Prof. Luca A. Ludovico
Occupazione di spazio in memoria
• 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 esatto
1. 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
Architettura dell'informazione
Prof. Luca A. Ludovico
La compressione delle immagini
• 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
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
La compressione delle immagini
JPEG (media qualità)
345 KB
Architettura dell'informazione
Prof. Luca A. Ludovico
JPEG (bassa qualità)
97 KB
La compressione delle immagini
Originale in formato TIFF compresso senza perdita – circa 8 MB
Architettura dell'informazione
Prof. Luca A. Ludovico
La compressione delle immagini
JPEG (alta qualità) – 2,7 MB
Architettura dell'informazione
Prof. Luca A. Ludovico
La compressione delle immagini
JPEG (bassa qualità) – 407 KB
Architettura dell'informazione
Prof. Luca A. Ludovico
Le «dimensioni» delle immagini
• «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?
Architettura dell'informazione
Prof. Luca A. Ludovico