Immagini Digitali. Dr. Annamaria Bria

Transcript

1 Immagini Digitali Dr. Annamaria Bria

2 Codifica delle Informazioni Dr. Annamaria Bria - Comunicazione e DAMS A.A

3 Codifica delle Informazioni Le informazioni che vengono memorizzate all interno del computer sono sequenze di 0,1 (Bit) Rappresentazione Numeri/Lettere Uomo Macchina N Bit A b

4 Codifica delle Informazioni Unità di Misura: Bit Bit: unità di misura dell'informazione (dall'inglese BInary Unit ). I suoi unici valori sono 0 e 1. Per memorizzare N=4 informazioni, quanti Bit sono necessari?

5 Bit Esempio (Parte 1) Supponiamo di scrivere le stagioni in Binario: Dr. Annamaria Bria Codifica delle Informazioni Stagione «Estate»% Codifica E s t a Allora per la parola estate il computer deve memorizzare TROPPO PESANTE

6 Codifica delle Informazioni Bit Esempio (Parte 2) N 2 Bit per rappresentare 4 informazioni (2 2 ) Stagione Codifica Estate 00 Autunno 10 Inverno 01 Primavera 11

7 Codifica delle Informazioni I multipli dei Byte Byte Nome Byte 1 (= 2 3 Bit) kilobyte KB 2 10 = 1024 Megabyte MB 2 20 = Gigabyte GB 2 30 = Terabyte TB 2 40 =

8 Codifica delle Informazioni Applicazioni Multimediali Lettere e numeri non costituiscono le uniche informazioni utilizzate dagli elaboratori ma essi utilizzano anche altri tipi di informazione: diagrammi, immagini, suoni, filmati: applicazioni di tipo Multimediale. Anche le informazioni multimediali vengono memorizzate come sequenze di Bit.

9 Codifica delle Immagini Differenze Immagini Bitmap e Vettoriali Dr. Annamaria Bria - Comunicazione e DAMS A.A

10 Codifica delle Immagini Per un calcolatore: immagine = sequenza di bit Esistono numerose tecniche per la memorizzazione digitale e l'elaborazione di un'immagine

11 Codifica delle Immagini

12 Immagini Digitali Rappresentazione numerica di una immagine bidimensionale. La rappresentazione può essere di tipo: 1. vettoriale 2. raster

13 Immagini Digitali Tipo Definizione Proprietà Raster o Bitmap Mappata all'interno di una griglia, come un grande mosaico. La grandezza della griglia dipende dalla risoluzione dell'immagine. Rappresentazione più semplice (richiesta poca elaborazione) Spazio maggiore per essere memorizzate. Vettoriale Basate su forme e colori generate tramite formule matematiche Ingrandimento teoricamente infinito. Rappresentazione più complessa

14 Immagini Digitali: Ingrandimento Raster o Bitmap Vettoriale

15 Codifica delle Immagini Immagini Raster o Bitmap SOFTWARE Gimp Shop 2 Riferimenti Dr. Annamaria Bria - Comunicazione e DAMS A.A

16 Immagini Digitali: Bitmap Come si memorizzano? suddivisione Immagine da memorizzare Ogni quadratino derivante dalla suddivisione prende il nome di PIXEL (PICTure ELement) e può essere codificato in binario secondo la seguente convenzione: - 0 = quadratino bianco (o in cui il bianco occupa più del 50% del pixel) - 1 quadratino nero (o in cui il nero occupa più del 50% del pixel)

17 Immagini Digitali: Bitmap Come si memorizzano? suddivisione Immagine da memorizzare

18 Immagini Digitali: Bitmap Riconverzione

19 Immagini Digitali: Bitmap Riconverzione La rappresentazione sarà più fedele all'aumentare del numero di pixel, ossia al diminuire delle dimensioni dei quadratini della griglia in cui è suddivisa l'immagine!

20 Immagini Digitali: Bitmap Immagni B/N e a gradazioni di grigio Per rappresentare in Bit una immagine in Bianco e Nero è sufficiente N 1 Bit per Pixel Per rappresentare sfumature di colori differenti è necessario utilizzare più bit per ogni pixel. Esempio: con 4 bit possiamo rappresentare 2 2 =4 colori diversi

21 Immagini Digitali: Bitmap Immagini a Colori: codifica RGB CODIFICA RGB (Red, Green, Blue): Qualsiasi colore può essere rappresentato dalla composizione del Rosso, del Verde e del Blu (colori primari). Ogni pixel viene rappresentato con una combinazione dei tre colori. Rappresentando ogni colore primario con N 8 Bit (1 Byte) allora 3 Byte per ogni Pixel. NOTA: con 8 bit per ogni colore primario rappresentiamo 2 8 = 256 sfumature per ogni colore E quindi, con la codifica RGB riusciamo a rappresentare 256 x 256 x 256 = colori diversi ESEMPIO: Se un pixel deve essere di colore la sua codifica RGB è:

22 - Comunicazione e DAMS A.A

23 - Comunicazione e DAMS A.A

24 - Comunicazione e DAMS A.A

25 - Comunicazione e DAMS A.A

26 Immagini Digitali: Bitmap Proprietà Risoluzione numero di pixel contenuti nel file immagine ed è ottenuta moltiplicando il numero delle righe di pixel per quello dei delle colonne di pixel. Profondità di colore (o profondità) quantità di memoria che si dedica ad ogni pixel, ovvero numero di bit dedicati ad ogni pixel per descrivere il colore. Si misura in BPP (Bit Per Pixel); maggiore è il numero di bit, maggiore è il numero di colori che è possibile descrivere.

27 Immagini Digitali: Bitmap Spazio per Memorizzare N Bit immagine = Risoluzione x Profondità

28 Immagini Digitali: Bitmap Spazio di Memorizzazione Per distinguere colori (numero di colori che si ottengono con la codifica RGB) sono necessari 24 bit per la codifica di ciascun pixel ESEMPIO: la codifica di un'immagine formata da Immagine 640 x 480 pixel Spazio occupato bit ( byte)

29 Immagini Digitali: Bitmap Tecniche di Compressione Esistono tecniche di compressione delle informazione che consentono di ridurre drasticamente lo spazio occupato dalle Immagini codifiche di compressione: le più famose sono la CompuServe Graphic Interface (GIF) (estensione.gif) Joint Photographic Experts Group (JPEG) (estensone.jpg o.jpeg) Usano un sistema per comprimere l informazione prima di memorizzarla e per decomprimerla prima di visualizzarla. tendono ad eliminare i pixel ripetitivi, sono compressioni con perdita di informazione. Tale perdita non può essere recuperata in alcun modo. La codifica JPEG consente di manipolare tale fattore di compressione.

30 Comunicazione e DAMS A.A Immagini Digitali: Bitmap Unità di misura PPI (pixel per inch - pixel per pollice circa 2,54 cm) si riferisce ai dispositivi di input (fotocamera, scanner, ) e rappresenta la risoluzione di un immagine digitale DPI (dot per inch - punti per pollice circa 2,54 cm) si riferisce ai dispositivi di output (stampanti a getto di inchiostro, laser, ) ed è l unità di misura della risoluzione di questi dispositivi

31 Comunicazione e DAMS A.A Immagini Digitali: Bitmap Qualità immagine per la stampa Nella stampa si lavora con gli inchiostri. Il software che gestisce la stampante trasforma l informazione pixel in punti di una certa dimensione. Ogni pixel viene trasformato in 3 minuscole goccioline di inchiostro (per la codifica RGB). Per una stampa di qualità bisogna avere un immagine a 300 PPI L accuratezza della stampa di ferma ad una certa dimensione di dettaglio poiché l occhio umano non è in grado di distinguere al di sotto di un certo valore

32 - Comunicazione e DAMS A.A

33 - Comunicazione e DAMS A.A

34 Comunicazione e DAMS A.A Immagini Digitali: Bitmap Qualità immagine per la stampa Gli schermi visualizzano i contenuti a risoluzione bassa Se l immagine viene utilizzata per il web è sufficiente avere: DPI E necessario ridimensionare altezza e larghezza in pixel in base alle dimensioni desiderate

35 - Comunicazione e DAMS A.A

36 Comunicazione e DAMS A.A Immagini Digitali: Bitmap Utilizzi Frequenti: Ritagliare Per ritagliare una immagine: Strumenti Trasformazione Ritaglia Il cursore cambia forma e trascinando, disegna una forma rettangolare. Ottenuta la dimensione desiderata cliccare il tasto INVIO

37 - Comunicazione e DAMS A.A

38 - Comunicazione e DAMS A.A Immagini Digitali: Bitmap Utilizzi Frequenti: Ritagliare

39 - Comunicazione e DAMS A.A Immagini Digitali: Bitmap Utilizzi Frequenti: Riflettere immagine Per riflettere una immagine: Strumenti Trasformazione Rifletti Cliccando sul tasto INVIO la riflessione avviene in orizzontale, tenendo premuto contemporaneamente il tasto CTRL la riflessione avviene in verticale.

40 - Comunicazione e DAMS A.A

41 - Comunicazione e DAMS A.A Immagini Digitali: Bitmap Utilizzi Frequenti: Riflettere immagine

42 - Comunicazione e DAMS A.A Immagini Digitali: Bitmap Utilizzi Frequenti: Ruotare Immagine Per ruotare una immagine: Strumenti Trasformazione Ruota Scegliere l angolo di rotazione e cliccare sul tasto INVIO

43 - Comunicazione e DAMS A.A

44 - Comunicazione e DAMS A.A

45 - Comunicazione e DAMS A.A Immagini Digitali: Bitmap Esercizitazione 1. Creare una cartella sul desktop dal nome immaginigimp 2. Scegliere una immagine JPG a piacere e copiarla nella cartella rinominandola originale.jpg 3. Creare una nuova immagine nuova.jpg ottenuta da originale.jpg ritagliandone una parte 4. Creare nuovaorizz.jpg ottenuta da nuova.jpg riflettendola in orizzontale 5. Creare nuovavert.jpg ottenuta da nuova.jpg riflettendola in verticale 6. Creare nuovaweb.jpg ottenuta da nuova.jpg la cui risoluzione è adatta per una pagina web (96 DPI) e con la dimensione in cm adeguata 7. Creare nuovaorizzgrigio.jpg ottenuta ricolorando nuovaorizz.jpg a gradazioni di grigio

46 - Comunicazione e DAMS A.A Immagini Digitali: Bitmap Estensioni jpeg gif png tga tiff raw bmp

47 Immagini Vettoriali Dr. Annamaria Bria - Comunicazione e DAMS A.A

48 Immagini Digitali: Vettoriali Come si memorizzano? Una immagine vettoriale è descritta come un insieme di primitive geometriche alle quali possono essere attribuiti colori e anche sfumature. PRIMITIVE GEOMETRICHE Punti Linee Segmenti Triangoli

49 Immagini Digitali: Vettoriali Come si memorizzano? Creazione Immagine da memorizzare <svg width="640" height="480" xmlns=" <!-- Created with SVG-edit > <g> <title>livello 1</title> <path id="svg_15" d="m125,169l0,93l156,0" stroke-linecap="null" stroke-linejoin="null" strokedasharray="null" stroke-width="5" stroke="#000000" fill="#382e2e"/> </g> </svg>

50 Vantaggi Dr. Annamaria Bria Immagini Digitali: Vettoriali 1. Immagine espressa in una forma direttamente comprensibile dall uomo e quindi direttamente modificabile (come per i formati SVG) <svg width="640" height="480" xmlns=" <!-- Created with SVG-edit > <g> <title>livello 1</title> <ellipse ry="63" rx="102" id="svg_1" cy="147" cx="176" stroke-width="5" stroke="#000000" fill="#ff0000"/> <ellipse ry="11" rx="15" id="svg_2" cy="123" cx="133" stroke-width="5" stroke="#000000" fill="#332121"/> <ellipse ry="11.5" rx="13.5" id="svg_3" cy="119.5" cx="206.5" stroke-width="5" stroke="#000000" fill="#332121"/> <path d="m117,159c0,0 2,1 2,3c0, , ,3c0.5412, ,2 2,2c1, , ,2c , ,0 3,0c1, , ,1c , , ,3c , , ,4c1.814, , ,3c , ,0 4,0c2, , ,2c , ,0 4,0c2,0 2,1 3,1c1, , ,0c , ,2 8,2c2,0 3,0 5,0c3,0 6,0 7,0c1,0 2,0 3,0c2,0 6,0 9,0c1,0 4,0 5,0c1, , , ,-5c , , ,-3c , , ,-5c , ecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="none"/> </g> </svg>

51 Immagini Digitali: Vettoriali Vantaggi 2. Spazio per memorizzazione immagine molto più piccolo rispetto ad un equivalente raster. RASTER VETTORIALE byte byte

52 Immagini Digitali: Vettoriali Vantaggi 3. Ingrandimento potenzialmente infinito senza perdita di qualità.

53 Immagini Digitali: Vettoriali Svantaggi Utilizzo di strumenti avanzati per creare immagini vettoriali complesse. Risorse adeguate alla complessità dell immagine: una immagine vettoriale molto complessa può essere molto corposa e richiedere l'impiego di un computer molto potente per essere elaborata Riempimenti sfumati o complessi generati in vettoriale comportano un alto impiego di risorse per essere rielaborate

54 Immagini Digitali: Vettoriali Utilizzi Tutti i giorni utilizziamo grafica vettoriale quando utilizziamo del testo: possiamo ingrandire il testo in qualsiasi editor (Word, blocco note, excel, ) senza perdere di qualità. utilizzo nell'editoria, nell'architettura, nell'ingegneria e nella grafica realizzata al computer Anna Anna Anna Anna Anna Anna Anna Anna

55 Immagini Digitali: Vettoriali Estensioni ai (Adobe Illustrator) cdr (Corel Draw) svg (adatta per il WEB) drv (Micrografx Designer/Draw file) dgn (Microstation) dxf (Drawing Interchange (exchange)) edrw (edrawing) flt (OpenFlight format - Creator ) fla (Macromedia Flash) igs (file di scambio CAD) lfp (Laser file plus) par (file parametrico) prt (Vari) sat (Acis 2D/3D Grafica vettoriale) pln ( Archicad ) pdf (formato Adobe riconosce bitmap e vettoriale) eps (riconosce sia bitmap che vettoriale

56 Immagini Digitali: Vettoriali Software SVG-edit SVG-edit è un'applicazione Web di grafica vettoriale per l'editing on-line di immagini in formato SVG (formato immagini vettoriali per il WEB) SVG-edit è un programma online, basta collegarsi al sito svg-edit.googlecode.com/svn/branches/2.5.1/editor/svg-editor.html per creare una immagine vettoriale BROWSER CONSIGLIATO: CROME

57 Immagini Digitali: Vettoriali Software SVG-edit

58 Immagini Digitali: Vettoriali Bitmap vs Vettoriale VectorMagic è un software che permette di convertire una immagine tipo Bitmap (o raster) in una immagine vettoriale direttamente online. È necessaria la registrazione per poter scaricare il corrispondente file vettoriale ma consente solo due conversioni gratuite. vectormagic.com/home Clicca su Upload image to trace

59 Immagini Digitali: Vettoriali Bitmap vs Vettoriale Bitmap Vettoriale

60 Immagini Digitali: Vettoriali Bitmap vs Vettoriale AutoTracer è un software gratuito che permette di convertire una immagine tipo Bitmap (o raster) in una immagine vettoriale direttamente online Selezionare il file desiderato e cliccare su Send file

61 Immagini Digitali: Vettoriali Bitmap vs Vettoriale

62 Immagini Digitali: Vettoriali Bitmap vs Vettoriale Per scaricare il file vettoriale cliccare al link sotto la voce Result