Download PDF

Lezione 1 – Fisica dell‘immagine, immagine analogica e digitalizzazione dell’immagine

L’immagine?

Un’immagine, in maniera molto generale può essere definita come un’area con una determinata distribuzione di colori.
Ogni punto di un’immagine è caratterizzato da una particolare grandezza fisica, il colore, che corrisponde alla frequenza e all’intensità della radiazione elettromagnetica che quel punto emette o riflette.

Quando dobbiamo pensare di elaborare un’immagine tramite computer dobbiamo ragionare su due fattori:

    1. cos’è un’immagine per un computer?
    2. quali dispositivi permettono di trasformare l’immagine “analogica” in un’immagine digitale, cioè definita da bit e leggibile dal computer?

L’immagine – lo Spettro Luminoso

Il colore è una grandezza complessa caratterizzata dall’intensità della radiazione elettromagnetica emessa in corrispondenza delle frequenze dello spettro del visibile

IL COLORE

  • E’ una piccolissima porzione delle onde elettromagnetiche che arrivano sulla Terra!
  • E’ un intervallo di lunghezze d’onda dello spettro visibile:
    • da 380 nm (nanometri), luce violetta
    • a 760 nm, luce rossa
  • Sotto i 380 nm, raggi ultravioletti (non visibili)
  • Sopra i 760 nm, raggi infrarossi (non visibile)
  • Fino ad 1 nm percepiamo le onde elettromagnetiche come calore

L‘immagine analogica (l’immagine come segnale continuo)

Un’immagine analogica è composta da milioni di pigmenti colorati che, messi uno vicino all’altro, ci danno l’impressione degli oggetti che compongono. Questi punti disposti in modo irregolare diventano visibili se ingrandiamo  molto qualche dettaglio dell’immagini e vengono indicati con il nome di grana.

L’immagine è un segnale, cioè una grandezza che varia in un dominio. Nel caso dell’immagine è il dominio dello spazio.

Ciò che varia è l’intensità luminosa nello spazio. Ogni punto della grana dell’immagine è caratterizzato da una variazione di intensità luminosa rispetto al punto precedente.

Tale variazione, che percepiamo come continua, per essere interpretata da un computer, dovrà essere analizzata e rigenerata tramite un sistema che non è continuo ma discreto, numerico.

La digitalizzazione infatti non è altro che rendere “discreto” – “numerico” – un segnale continuo, analogico.
In generale, un segnale analogico è la rappresentazione o la trasformazione di una grandezza fisica tramite una sua analoga. Il digitale si riferisce ad un segnale o più in generale ad un’informazione espressa attraverso i numeri (digit: numero).

La discretizzazione (digitalizzazione) dell’immagine

Per rendere un’informazione comprensibile da un computer è necessario esprimerla sotto forma di una sequenza di 0 e 1. Questa numerizzazione è la digitalizzazione e vale per qualunque forma di forma di informazione (testi, immagini, audio, video..).

La digitalizzazione di un’immagine è quindi un processo di discretizzazione, cioè un meccanismo che assegna un valore numerico ad ogni “punto” dell’immagine.

Un’immagine digitale è quindi la rappresentazione bidimensionale tramite una serie di valori numerici che ne descrivono le qualità distintive: dimensione e colore.

Ogni “punto” a cui assegnare un valore numerico determinante la qualità luminosa dell’immagine è denominata pixel.

Quando digitalizziamo un’immagine è come se sovrapponessimo una griglia quadrata ad un’immagine analogica: i pixel sono quadratini risultanti di questo processo di grigliatura.

Ogni quadrato della griglia darà origine ad un pixel con un colore preciso.
Immaginiamo di associare un colore ad un valore numerico. Ad esempio prendiamo in considerazione una scala di grigi che vanno da 0 = nero a 255 = bianco e assegniamo un valore corrispondente più vicino alla scala di grigi:

1) Sovrapposizione di una griglia quadrata all’immagine
2) ad ogni quadratino della griglia assegnamo il valore della scala di grigi più vicino possibile al suo colore originale
3) associamo ad ogni quadratino della griglia (il pixel!) il valore numerico relativo alla propria approssimazione di colore (256 valori, cioè 256 colori o meglio 256 colori della scala di grigio)
4) convertiamo in numeri binari (0 e 1 comprensibili al computeR) ogni valore numerico associato ai pixel

L’immagine di partenza si è trasformata in una sorta di mappa composta di 0 e 1, in cui ogni quadratino risultante della grigliatura dell’immagine è ora rappresentato da una seguenza di 0 e 1 che il computer riconoscerà come il colore di quel pixel.

La digitalizzazione di un’immagine è divisa in tre fasi:

CAMPIONAMENTO
QUANTIZZAZIONE
CODIFICA

Il campionamento

La girglia utilizzata per “mappare” e “discretizzare” l’immagine è chiamata griglia di campionamento e definisce il meccanismo di campionamento dell’immagine.

L’assegnazione di un valore numerico ad ogni pixel e corrispondente ad un colore è chiamata quantizzazione cromatica.

La traduzione del valore numerico concernente il colore del pixel in una specifica sequenza di bit è chiamata codifica.

Il campionamento definisce il numero totale di pixel dell’immagine.
I pixel che compongono un’immagine rappresentano la dimensione dell’immagine stessa.
La dimensione è espressa indicando separamente il numero di pixel orizzontali e il numero di pixel verticali, ad esempio 800 x 1020 pixel

5-digital4

La quantizzazione cromatica definisce invece il numero di colori dell’immagine (la si vedrà in seguito).

Il campionamento: dimensione e risoluzione

La dimensione dell’immagine è sempre data dai valori x e y della griglia di sovrapposizione. Più la griglia è fitta più l’immagine è definitia.
Un’immagine digitale di una determinata dimensione può essere visualizzata su un qualche supporto (carta, monitor) a diverse grandezze (centrimetri, centimetri)

La risoluzione invece dipende dal supporto su cui viene visualizzata l’immagine!
La risoluzione dipende quindi sia dalle dimensioni in pixel dell’immagine, sia dal tipo di supporto su cui viene visualizzata!
La risoluzione si misura in punti su cm o punti su pollice (dot per inch, o DPI).

La risoluzione si misura in punti / cm o in punti / pollice e definisce il numero di punti che sono contenuti in un centimetro o in un pollice (2,54 cm).
La risoluzione è quindi una misura di densità.

L’uso di pixel quadrati, infatti, da luogo a densità uguali sia orizzontalmente sia verticalmente. In genere come misura lineare è usato il pollice e la risoluzioni si misura in dpi cioè in punti per pollice.
Il concetto di risoluzione è quindi legato a quanto sono fitti i punti che visualizziamo.

Le dimensioni visualizzati su PC dipendono da:

  • dimensioni in pixel dell’immagine + grandezza del monitor + impostazione del monitor

Questo significa che un’immagine 640×480 pixel avrà misure (in cm) differenti a seconda del supporto su cui è visualizzata e a seconda delle caratteristiche del supporto stesso.
Varierà la grandezza del singolo pixel.
Varierà lo spazio occupato dall’immagine sullo schermo (o sul supporto scelto).

La risoluzione di un’immagine digitale, infatti non è una caratteristica dell’immagine in sé ma è sempre legata alle dimensioni del supporto e al rapporto di scala o di ingrandimento che viene scelto.

Il monitor hanno una risoluzione standard che può essere 72 dpi o 96 dpi anche se i monitor retina hanno rotto questo standard portando le risoluzioni fino a 400dpi:

http://www.mrwebmaster.it/web-design/siti-web-ottimizzati-retina-display_11898.html

Retina Display: https://www.starbytes.it/blog/web-design-retina-display/

72 dpi significa che visualizzano 72 pixel per pollice.

      • un’ipotetica immagine quadrata di 72 pixel salvata a 72dpi verrà visualizzata a monitor su un pollice quadro e stampata a 2,54 x 2,54 cm
      • La stessa immagine 72×72 a 144 dpi occuperà su monitor sempre 72 pixel (e quindi lo spazio visivo occupato sarà lo stesso dell’immagine precedente!) ma stampata misurerà mezzo pollice quadro, cioè 1,27cm x 1,27cm .. perché i punti saranno più piccoli della metà!
      • Un’immagine 300×200 a 72 dpi occuperà in stampa lo spazio di 300/72 pollici x 200/72 pollici
      • Se raddoppio  i dpi l’immagine che succede? Ho due possibilità: posso ricampionare l’immagine e raddoppiare il numero di pixel per ottenere un’immagine in stampa della stessa dimensione dell’originale o tenere il numero di pixel uguale ma ottenere, in stampa, un’immagine che occupa metà spazio rispetto all’originale (ma è più definita!).

7-digital6

Grandezza schermo: 15 pollici
Dimensione e risoluzione immagine: 1024 x 768 pixel – 72 dpi
Risoluzione monitor: 1024 x 768
Dimensione in stampa: 14,2 x 10,6 pollici

L’immagine riempie tutto lo schermo

Grandezza schermo: 20 pollici
Dimensione e risoluzione immagine: 1024 x 768, 72 dpi
Risoluzione monitor: 1024 x 768
Dimensione in stampa: 14,2 x 10,6 pollici

L’immagine riempie tutto lo schermo ma i singoli pixel sono più grandi. In stampa è uguale a quella visualizzata sullo schermo di 15 pollici

Grandezza schermo: 20 pollici
Dimensione e risoluzione immagine: 800 x 600, 72 dpi
Risoluzione monitor: 1024 x 768
Dimensione in stampa: 11,1 x 8,3 pollici

L’immagine non riempie tutto lo schermo

Grandezza schermo: 20 pollici
Dimensione e risoluzione immagine: 1024 x 768, 72 dpi
Risoluzione monitor: 800 x 600
Dimensione in stampa: 11,1 x 8,3 pollici

Lo schermo non riesce a contenere tutta l’immagine

Tipi di risoluzione

10-risoluzioni

Il Ricampionamento (cambiare la risoluzione di un’immagine)

Se raddoppio la risoluzione in DPI avrò due possibilità:

  • con ricampionamento: con  questo metodo aggiungo dei Pixel all’immagine che aumenta la sua dimensione (in px) ma mantengo la stessa dimensione in centimetri dell’immagine in stampa. Cosa cambia? La densità dei punti in stampa, che raddoppia! Denso non significa per forza più definito: il ricampionamento è un processo per cui un algoritmo aggiunge dei pixel “inventandoli” ex novo (cioè non presenti sull’originale!).
  • senza ricampionamento: in questo modo non aggiungo Pixel all’immagine che rimane della stessa dimensione. In stampa occuperà metà della sua grandezza originale ma con con una doppia densità di stampa (in questo caso l’immagine è realmente più definita ma più piccola).

Nota

Si può avere un’immagine di alta qualità nel web? L’alta risoluzione nel web non ha senso (anche se numerosi siti si stanno adeguando e forniscono immagini alternative per gli schermi retina). L’importante è avere un’immagine definita e non sgranata e con un sufficiente numero di pixel

E l’alta risoluzione in stampa? In genere si intende una risoluzione uguale o superiore ai 300 punti per pollice!

ESERCIZIO:

Ho un’immagine su computer: 300×500 pixel a 300 dpi. Qual è la grandezza dell’immagine in stampa?
Se trasformo l’immagine a 72 dpi senza ricampionarla che succede?
E se la ricampiono?

esercizioOK

Risposte al quesito

Dimensione di stampa?

300px/300dpi = 1 inch = 2,54 cm
500px/300dpi = 1,6 inches = 4,23 cm

Se la trasformo in un’immagine a 72 dpi e non la campiono i pixel rimangono invariati ma su stampa l’immagine verrà molto più grossa

Se la ricampiono la grandezza in cm rimane invariata ma poiché la densità di pixel e molto più bassa e lo spazio disponibile in stampa è lo stesso avrò bisogno di meno pixel! (che infatti verranno cancellati)

Quantizzazione Cromatica

Quantizzazione cromatica: assegnazione ad ogni pixel di valori finiti di intensità luminosa.

Valori dipendono dal numero di bit: N bit = 2n valori
L’immagine 24×32 pixel è quantizzata a 16 colori.

11-quantizzazioni

I possibili colori utilizzabili dipendono quindi dal numero di bit utilizzati: N bit = 2n valori

12-quantizzazioni2

Avendo a disposizione una tavolozza di 16 colori assegno al pixel corrispondente il colore disponibile più vicino al colore originale dell’immagine.
L’immagine digitale sarà sempre quindi un’approssimazione dell’immagine reale

La quantizzazione cromatica definisce infatti la profondità di pixel, cioè il numero di colori possibili per ogni pixel. E’ un valore che dipende dal numero di bit, cioè dal numero di possibili di bit.

Un bit = 0,1  -> il computer legge solo sezuenze binarie di 0 e di 1

Se ad ogni pixel posso assegnare due bit, ad esempio, quante configurazioni potrò ottenere?

13-codifica

Ogni pixel occuperà 2 bit!

E con 8 bit? Quante combinazioni di colori posso ottenere?
00000001
00000010
0000100     –> 2 8 combinazioni = 256 colori. Ogni pixel occuperà 8 bit, 1 byte.

Quantizzazione cromatica – Esercizio

L’occupazione di memoria

Stampa 10×15 cm
Risoluzione 300 dpi
Profondità di colore: 24 bit per pixel

Risposte al quesito

Intanto.. la profondità di colore a 24 bit (3 bytes) significa 224 combinazioni possibili di colori per pixel
10 x 15 cm = 3.94 x 5.91 inches
300 x 3.94 = 1182 pixel
300 x 5.91 = 1772 pixel
Pixel totali: 1772 x 1182 = 2.095.686 pixel
Peso totale: 2.095.686 x 3 byte (24 bit) = 6.287.058 bytes
Quasi 6 mega!

Schermata 2016-01-21 alle 16.11.29

L’intervallo compreso e la massima intensità di ogni colore presente nell’immagine originale viene suddiviso in un certo numero di livelli. Maggiore è tale numero, migliore è la precisione con cui il colore è definito.
Un valore tipico è 256 livelli di colori (2 8), corrispondenti all’utilizzo di 1 byte per ogni pixel.

Schermata 2016-01-21 alle 16.11.35

Il tipo di immagine digitale che abbiamo analizzato sino ad ora è chiamato Raster o Bitmap.
Le immagini raster o bitmap sono composte da una matrice di pixel.


L’immagine Vettoriale

Schermata 2016-01-21 alle 16.11.43 Esiste un altro tipo di immagine digitale: l’immagine vettoriale.
Nella grafica vettoriale un’immagine è descritta mediante un insieme di primitive geometriche che descrivono punti, linee, curve e poligoni quali possono essere attribuiti colori e sfumature.

L’immagine vettoriale è usata per diversi motivi, in genere per la stampa.
I formati per il web e per il mondo digital sono bitmap!

I principali vantaggi della grafica vettoriali rispetto alla raster sono:

      • la scalabilità: l’immagine vettoriale non si deteriora se viene scalata o modificata
      • la possibilità di elaborarne la forma e il colore attraverso punti di controllo
      • il peso dell’immagine vettoriale non dipende dalla dimensione di stampa

La grafica vettoriale, essendo definita attraverso equazioni matematiche è indipendente dalla risoluzione mentre la grafica raster se viene ingrandita o visualizzata su un dispositivo dotato di una risoluzione maggiore di quella del monitor perde di definizione.

La grafica vettoriale ha tuttavia diversi svantaggi.
Non può approssimare bene un’immagine fotografica come la grafica bitmap. Se per figure piatte o con cromie ristrette è indicata non lo è affatto, appunto, per immagini fotorealistiche.
Viene perlopiù utilizzata per la realizzazione di figure geometriche, iconografiche quali loghi, illustrazioni, disegni architettonici-topografici..

Poiché un’immagine vettoriale è la risultante di formule matematiche, una grafica molto complessa può essere molto corposa e richiedere l’impiego di un numero molto elevato di processi per essere modificata (più è attinente è al reale più richiede calcoli!)

Raster_VS_Vector-LogoGeek


Schermata 2016-01-21 alle 16.11.59

Dimensione, risoluzione ..in Photoshop

Tutti i concetti espressi sono parte integrante dei meccanismi dei software di elaborazione digitale dell’immagine..

Come si può notare dalla finestra “Dimensione immagine” di Photoshop se non ricampiono l’immagine, la grandezza rimane invariata mentre varierà il numero di pixel totali.
Se ricampiono l’immagine il numero di pixel totali rimane invariato mentre cambierà la grandezza dell’immagine


L’INTERFACCIA DI PHOTOSHOP

zz

Esercizio dimensione e risoluzione

Creare una nuova immagine 900×500 pixel, 24 bit per pixel.

  1. modificare il colore si fondo con “riempi”
  2. modificare la dimensione dell’immagine riducendo il numero di pixel dell’altezza a 300px
  3. modificare la risoluzione dell’immagine senza variare le dimensioni stampa dell’immagine a 150dpi
  4. aumentare lo spazio del piano su cui è poggiata l’immagine di 2 cm per lato
  5. modificare la dimensione in pixel dell’immagine variando la risoluzione, 100 dpi
  6. salvare nel formato proprietario di photoshop (PSD).