Le immagini digitali Formati e caratteristiche di digitalizzazione Docente: Tommaso Mazzoli
Immagini Digitali Cosa si intende con analogico e digitale? Come avviene la rappresentazione digitale delle immagini? Come è possibile memorizzare un immagine digitale? 2
Rappresentazione analogica La rappresentazione analogica di un informazione si basa su un insieme continuo di valori Esempio: il termometro a mercurio rappresenta il valore della temperatura in base alla lunghezza della colonnina di mercurio. In teoria non ci sono limiti alla precisione delle rappresentazioni analogiche Infatti ad ogni minima variazione di temperatura si ottiene (o si dovrebbe ottenere) un analoga variazione della dimensione della colonnina di mercurio. 3
Rappresentazione digitale La rappresentazione digitale si basa su un insieme discreto di valori Esempio: un termometro digitale rappresenta la temperatura in gradi e decimi di grado e la visualizza su un display. Un termometro di questo tipo non è in grado di misurare variazioni di temperatura inferiori al decimo di grado poiché la sua rappresentazione si basa su un insieme discreto composto da multipli di un unità di base, nel nostro esempio decimi di grado. 4
Le Immagini Immagine fotografica (analogica): è composta da milioni di pigmenti colorati molto piccoli e spazialmente irregolari. Si parla di grana della fotografia: sulla pellicola fotografica sono posti dei materiali fotosensibili che alterano il loro stato se colpiti dalla luce. L immagine e ottenuta per analogia con la quantità di luce che ha impresso i diversi punti della pellicola durante la fase dell esposizione 5
La digitalizzazione delle immagini Esistono due tipi di immagini digitali: Immagini bitmap, rappresentate sul supporto digitale come una matrice di punti Immagini vettoriali, rappresentate come funzioni vettoriali che descrivono curve e poligoni
Le 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 grafiche già pronte con l estensione WMF che Word mette a disposizione, le cosiddette clipart, sono realizzate in grafica vettoriale. Anche i font TrueType si basano sulla grafica vettoriale
Le immagini vettoriali I vantaggi della descrizione vettoriale sono essenzialmente i seguenti: si risparmia sulle dimensioni dell immagine (al posto della descrizione di tutti i punti basta specificare solo la posizione di pochi punti chiave e le equazioni per collegarli) si possono facilmente ridimensionare senza perdita di qualità È possibile muovere e modificare ogni singolo elemento geometrico che compone l immagine.
Le immagini bitmap Una immagine digitale bitmap è costituita da una matrice di punti detti picture element (pixel), simili ai punti della retinatura nelle immagini a stampa
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 dividiamo il disegno in quadratini molto piccoli, chiamati pixel, sovrapponendogli una griglia ad ogni quadratino della griglia attribuiamo il colore nero se il contenuto di nero al suo interno supera quello del bianco, e viceversa diamo il colore bianco se il contenuto del bianco al suo interno supera quello del nero.
Un esempio di digitalizzazione (2) La figura sotto mostrata rappresenta la nuova immagine che otterremo dopo aver portato a termine la precedente operazione. A questo punto, a ogni quadratino o pixel della griglia associamo 0 se il suo contenuto è il bianco e 1 in caso contrario. In tal modo otterremo una matrice di 0 e 1 che codifica l immagine della lampadina in formato digitale.
Un esempio di digitalizzazione (3) La nostra 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 sovrapponiamo all immagine e più la nostra rappresentazione digitale risulterà fedele all originale. D altra parte, una griglia più fitta significa un maggior numero di pixel e quindi un maggiore numero di bit che dovranno essere utilizzati per descrivere digitalmente l immagine.
Un esempio di digitalizzazione (4) Avendo un immagine di partenza a colori, anziché utilizzare solo uno 0 o un 1 per ogni pixel, utilizzeremo una combinazione di 0 e 1 in base a una tabella di codifica dei colori. La successiva tabella di codifica dei colori è ad esempio composta di 64 colori, e quindi ad ogni pixel potremo 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 ad ogni pixel dell immagine corrisponderà una combinazione di sei bit. In generale: c = 2 n c = numero di colori da rappresentare n = numero di bit da utilizzare
Le 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ò rappresentare individua la profondità di colore
La risoluzione La risoluzione esprime la densità dei pixel che compongono l immagine ed è tanto maggiore quanti più punti sono rappresentati in una data area (e maggiore è la qualità dell'immagine) Si misura in numero di pixel contenuti in una unità lineare dell immagine, generalmente in un pollice (1 inch = 2,54 cm) L unità di misura è il pixel per inch : Es: 72 punti per pollice (PPI) il termine DPI (dot per inch) viene spesso utilizzato al posto di PPI. ( Il termine DPI dovrebbe essere utilizzato per gli elementi stampati, mentre PPI per le immagini visualizzate sullo schermo).
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 ( 0 bianco, 1 nero) Con 8 bit (un byte) è possibile rappresentare immagini con 256 toni di colore o di grigio. Infatti 2 8 =256 Un immagine a 65.536 colori associa a ciascun pixel 16 bit (infatti 2 16 =65536) In un immagine True Color, cioè a colori a 24 bit, ogni pixel può assumere 16 milioni di colori diversi
Dimensioni di un immagine Dimensione in pixel : è il numero totale di pixel presenti nell immagine. Si esprime con il formato N pixel-base x N pixel-altezza Foto a lato: 400x309 pixel Dimensione fisica in cm. o inch: dimensione che assume sul supporto utilizzato per la sua visualizzazione Foto a lato: 5,21x6,75 cm Dimensione del file immagine in byte: quanti byte occupa in memoria (es: 363 KB)
Risoluzione e dimensioni Esiste un rapporto diretto fra la dimensione in pixel, la dimensione fisica in pollici e la risoluzione: Dim.in pixel= Dim.fisica x risoluzione Spesso è importante la formula inversa Dim.fisica= Dim.in pixel / risoluzione Aumentando la dimensione fisica di un immagine e tenendo costante il n totale di pixel, diminuisce la risoluzione
Esempio Immagine 70x70 pixel, 2,54x2,54 cm risoluzione= 70 ppi Immagine 70x70 pixel, 10x10 cm (3,9x3,9 inch) risoluzione=70/3,9 ppi = 17,8 ppi La qualità dell immagine è diminuita
Calcolo dell occupazione in memoria del file immagine Le immagini digitali bitmap occupano spazio sui supporti di memoria secondo questa formula: = N totale-di-pixel x profondità-di-colore Es: una immagine 800x600 pixel a 256 toni di grigio (=2 8 ) occupa 72x72x8 = 41472 bit = 5184 byte = circa 5 KByte Una immagine 300x300 pixel e 16 mil. di colori occupa 300x300x24 = 2160000 bit=270000 byte= 263,67 KB Es: una immagine 1600x1200 pixel e profondità di colore a 16 bit (2 byte) occupa 1600x1200x16 = 3840000 byte = 3,6 MB
La memorizzazione delle immagini Le immagini digitali sono memorizzate su file con diversi formati alternativi, ciascuno in grado di codificare un determinato numero di colori e dotato di caratteristiche peculiari Alcuni di questi formati prevedono forme di compressione, cioè di diminuzione dei bit dell immagine in modo da ridurne l occupazione di memoria
La compressione delle immagini Gli algoritmi di compressione si dividono in due categorie Compressione con perdita: (lossy) Compressione senza perdita: (lossless)
Metodi Lossy I metodi Lossy sono quei metodi che, proprio per comprimere al massimo i dati, scartano alcune delle informazioni riguardanti l'immagine originale. Sono metodi molto vantaggiosi per aumentare al massimo la velocità di scaricamento, ma irreversibili: ogni qual volta una immagine viene salvata in un formato lossy, vengono perse alcune informazioni, che non sono più recuperabili. Proprio a causa di questa loro caratteristica, è assai sconsigliabile fare progressive modifiche e salvataggi in questo tipo di formati, perchè ad ogni passaggio la qualità peggiorerà e sarà sempre meno fedele all'originale. Conviene invece salvare in un formato senza perdita fino a lavoro ultimato, e solo in ultima istanza salvare in un formato con perdita. L'esempio più classico di formato lossy per quanto riguarda le immagini è il JPEG; un altro esempio di formato lossy assai usato oggi in rete è l'mp3.
Metodi Lossless I metodi lossless sono invece i metodi che non hanno perdita di informazioni; ovviamente essi risultano sempre meno efficaci nell'ottimizzare lo scaricamento dei dati, ma hanno il grande pregio di mantenere costanti e stabili le informazioni contenute nell'originale. Formati lossless per le immagini web sono il GIF e il PNG, uno dei tanti formati lossless per l'audio è il WAV.
Il formato GIF La sigla GIF è acronimo di Graphic Interchange Format. Questo tipo di compressione, al contrario del JPEG non lavora a perdita di dati, ma può esportare solo immagini che contengono al massimo 256 colori. Se l originale contiene un numero più elevato di colori, la perdita di qualità sarà significativa. Il formato GIF usa colori a 8 bit ed è efficace per comprimere immagini vettoriali, geometriche o testo. Il formato GIF supporta la trasparenza, quindi puoi far emergere lo sfondo attraverso l immagine senza vincolare le immagini stesse al solo formato rettangolare o quadrato. Le immagini GIF ti permettono anche di creare delle piccole animazioni, le GIF ANIMATE, perché supportano anche fotogrammi multipli. I GIF animati si realizzano con semplici tool grafiche e con la tecnica del cartone animato.
Il formato JPG La sigla JPEG o JPG è l'acronimo di Joint Photographic Experts Group. Questo tipo di immagine usa una compressione con perdita di dati. La perdita dei dati consiste nel fatto che alcuni dati che formavano la tua immagine vengono persi durante il processo di compressione. Questo corrisponde a una perdita di qualità nell'immagine, direttamente proporzionale al livello di compressione che sceglierai. Possiamo dire che a bassi livelli di compressione la perdita di qualità è praticamente nulla e non si percepisce a occhio nudo, ma se aumentiamo il livello di compressione dobbiamo controllare che l'immagine sia comunque di buona qualità, perché la perdita di dati in questo caso può essere rilevante.
Il formato JPG Qualsiasi sia il numero di profondità dei colori dell'immagine sorgente il formato JPEG supporta colori a 24 bit. Usa questo tipo di formato per immagini a tinte non piatte, cioè per immagini fotografiche o con immagini con sfumature leggere e continue. Il formato Jpeg non è sicuramente adatto per il trattamento di immagini vettoriali o contenenti testo. Allora usa questo formato di esportazione (Jpeg) per riportare sul web immagini ottenute tramite scansione di fotografie, oppure per le immagini che utilizzano texture e comunque per tutte quelle che necessitano di un numero di colori superiore a 256. Ricorda che questo formato non supporta le trasparenze. Dato che, come abbiamo già detto, il formato è a perdita di dati non è una buona soluzione salvare un'immagine JPEG da un'altra immagine JPEG. La cosa migliore è ottenere immagini JPEG dall'immagine originale. Esiste anche un formato chiamato JPEG selettivo. Questo permette di esportare un'immagine con una diversa compressione applicata alle varie parti che la compongono.
GIF o JPG? Osserva la prima immagine a sinistra (GIF originale), Poi osserva l'ultima immagine alla destra (JPEG, compressione: 30%). Puoi notare qualche differenza? Inoltre, a causa del tipo di algoritmo di compressione, puoi ottenere risultati migliori con immagini di dimensioni maggiori. GIF dimensione: 34 Kb JPEG dimensione: 20 Kb JPEG (compressa al 10%) dimensione: 17 Kb JPEG (compressa al 30%) dimensione: 9 Kb
Il formato PNG Il formato PNG è acronimo di Portable Network Graphic. Questo tipo di formato non è supportato da tutti i tipi di browser, ma è tuttavia possibile installare un plug-in per visualizzare le immagini PNG. Non usare questo formato se il tuo sito dovrà essere accessibile a un grande numero di utenti, tuttavia è utile sapere come funziona, quali sono le sue caratteristiche e quali opportunità offre. Questo formato supporta colori fino a 32 bit e può contenere la trasparenza. E un tipo di compressione senza perdita di dati, anche per alte profondità di colore. Purtroppo però produce file di grandi dimensioni. Esistono due tipi di file PNG: PNG-8 PNG-24 Il formato PNG-8 usa colori a 8 bit e presenta molte analogie con i file di tipo GIF. Risulta utile per la compressione di aree a tinta unita e mantiene i dettagli nitidi. Il formato PNG-24 supporta colori a 24 bit e presenta molte analogie con i file di tipo JPEG. È adatto sia per le immagini fotografiche che per le immagini geometriche e in più ha il vantaggio di supportare la trasparenza anche su più livelli.
PNG vs JPG e GIF Il formato PNG, come il JPEG, supporta immagini fino a 24 bit, ma in più il PNG supporta il cosiddetto canale alfa (vedi seguito) che permette 256 livelli di trasparenza. JPG non supporta la trasparenza, GIF permette di rendere completamente trasparente un solo colore della palette. PNG, invece, può supportare fino a 256 livelli di trasparenza. GIF supporta le animazioni mentre sia JPEG che PNG supportano solamente immagini statiche (per le animazioni esiste un formato gemello di PNG, detto MNG).
PNG vs JPG e GIF Sia PNG che GIF supportano il metodo interlacciato (ovvero la possibilità di visualizzare, mentre si scarica l'immagine completa, un'anteprima meno dettagliata della stessa, una funzionalità utilissima in caso di connessioni lente). La visualizzazione dell'anteprima in PNG è però più veloce rispetto alla corrispondente in GIF. JPEG non possiede questa possibilità. PNG e GIF, al contrario di JPEG, sono formati "lossless", ovvero senza perdita di informazione durante la compressione. Di GIF esiste una versione non compressa, mentre nè PNG nè JPEG la prevedono. E' stata volutamente omessa questa possibilità per PNG poichè, essendo quest'ultimo un formato pensato per il web, è sembrato inopportuno l'invio in rete di dati non compressi, inutilmente più pesanti. PNG supporta solo la codifica RGB o RGBA (Ovvero RGB più il canale Alfa) con o senza palletizzazione, in quanto è la più portabile e meno dipendente dalla piattaforma. JPEG usa la codifica colore HSB (Hue Saturation Brightness) mentre GIF usa una palette di colori RGB.
Altri formati BMP Questo e' il formato grafico di tipo bitmap nativo di Microsoft Windows e supporta immagini fino a 24 bit. La compressione e' opzionale ma di solito e' impostata. TGA TGA sta per Truevision Graphics Array. Supporta immagini da 1 a 32 bit e alcune caratteristiche professionali come un canale alpha (mask), impostazioni gamma ed incorpora un'immagine di tipo 'thumbnail'. TIF TIFF sta per Tag Image File Format. Il TIFF era un formato a 24 bit troppo grande e difficile da maneggiare fino alla versione 6, con la quale venne supportata anche la compressione. Ad ogni modo si tratta di un formato che utilizza l' algoritmo di compressione LZW (di proprieta' della Unisys). WMF WMF sta per Windows Metafile Format, ed e' un formato vettoriale intermedio utilizzato dai programmi Windows per scambiarsi i dati tra di loro. Percio' non dovrebbe in linea di massima essere mai visto da nessun altra parte.
Immagini e HTML Ci sono tre tipi diversi di file immagine che possono essere inseriti nelle tue pagine web: * GIF (Graphics Interchange Format) * JPG / JPEG (Joint Photographic Experts Group) * PNG (Portable Network Graphics) Le immagini GIF generalmente sono migliori per i grafici e i disegni, mentre le immagini JPEG sono migliori per le fotografie. Questo per due ragioni principali: primo, le immagini GIF possono avere solo 256 colori, mentre le immagini JPEG sono formate da milioni di colori e secondo, il formato GIF è migliore per comprimere immagini semplici, mentre il formato JPEG è stato ottimizzato per immagini più complesse. Migliore è la compressione, più piccola sarà la dimensione del file immagine, e più veloce il caricamento sulla tua pagina. Come probabilmente sai già dall'esperienza, le pagine "pesanti" senza motivazione possono annoiare pesantemente un visitatore.