LEZIONE 8 LE IMMAGINI. Ci sono almeno 6 cose da tenere presente quando si inseriscono immagini nelle pagine web.

Transcript

1 LEZIONE 8 LE IMMAGINI Ci sono almeno 6 cose da tenere presente quando si inseriscono immagini nelle pagine web. 1. IL FORMATO 2. IL COLORE 3. LA DIMENSIONE E RISOLUZIONE 4. LA VELOCITA 5. LA TRASPARENZA 6. L ANIMAZIONE 1) IL FORMATO Al web accedono milioni di Mac, PC windows, telefonini, tablet e altri dispositivi e quindi la grafica utilizzata nelle pagine che costruiamo deve essere in un formato riconoscibile da tutti i sistemi operativi (windows, mac OS, android, Unix, Linux ecc.). Al momento i tre formati più usati nel web sono GIF, PNG E JPG (O JPEG). Bisogna trovare il formato che offre una qualità buona ma con un peso minimo. Il formato JPG gestisce bene un numero elevato di colori e ha una buona compressione, quindi si adatta per le foto a colori. E un formato con perdita (lossy) delle informazioni dell immagine originale, ma ne vale la pena perché le pagine sono caricate rapidamente. I formati PNG e GIF sono utilizzati per salvare immagini quali loghi, illustrazioni, o con grandi superfici di tinte unite e pattern, oppure quando è necessaria la trasparenza (il formato JPG non supporta la trasparenza). Comprimono meglio di JPG le zone di colore continuo e i pattern ripetitivi. Il PNG è spesso la scelta migliore perché genera file più leggeri e un supporto più evoluto alla trasparenza (trasparenza alfa). Considerazioni sul pattern. Il pattern è definito come uno schema grafico dalla struttura ripetitiva, caratterizzato per la regolarità del rapporto che si crea tra i singoli oggetti rappresentati nel loro insieme. In grafica come in architettura il pattern diventa uno strumento per comunicare, creare equilibri, generare piacere estetico, questo si colloca generalmente in una posizione intermedia tra gli estremi costituiti da caos e ridondanza. La ridondanza viene definita dalla teoria dell'informazione come la ripetizione costante di una serie di messaggi sempre uguali o comunque perfettamente prevedibili, il caos come una successione di messaggi imprevedibili. Tantissimi tra artisti (Kandinskii, Klee), studiosi, architetti si sono occupati di pattern o ne hanno sfruttato le qualità all'interno delle loro opere, partendo dalla ripetizione dello stesso elemento senza variazioni, inserendo all'interno del pattern diversi elementi, aumentando la quantità dell'informazione, senza superare la soglia oltre la quale si genera il caos.

2 2) IL COLORE La maggior parte dei monitor può visualizzare milioni di colori, anche se in passato non era così. Alcuni formati hanno una palette di colori limitata come GIF e PNG-8; hanno infatti a disposizione solo 256 colori, che comunque sono sufficienti per loghi o icone. Fotografie e illustrazioni complesse dovrebbero essere salvate in formato JPG o PNG-24 in grado di gestire più colori nella stessa immagine. 3) DIMENSIONE E RISOLUZIONE La dimensione del file di un immagine è la dimensione digitale del file immagine, espressa in kilobyte (KB), megabyte (MB) o gigabyte (GB). La dimensione del file è proporzionale alle dimensioni in pixel dell immagine. Le immagini con un numero maggiore di pixel possono produrre risultati di stampa migliori a una particolare dimensione di stampa, ma richiedono più spazio su disco e risultano più lente da elaborare e stampare. La risoluzione dell immagine è quindi un compromesso tra la qualità (quantità di dati desiderati) e la dimensione del file. Un altro fattore che influenza la dimensione di un file è il formato. I formati GIF, JPEG, PNG e TIFF usano infatti metodi di compressione diversi; a parità di dimensioni in pixel, le dimensioni del file possono variare molto. La dimensione del file è influenzata inoltre dalla profondità del colore in bit e dal numero di livelli e canali presenti in un immagine. Photoshop supporta immagini con un numero massimo di per pixel. Sono questi i limiti massimi per la risoluzione e le dimensioni di stampa di un immagine. Ma per il web interessa sapere cosa è la risoluzione dello schermo, la risoluzione dell immagine e quale dimensioni delle immagini è più consona nel contesto della pagina. Prendiamo questo esempio reale. La foto sotto è stata scattata con una macchina digitale con risoluzione dell immagine impostata a 4272 per 2848 (pixel totali ), quindi, grosso modo, si può dire ad una risoluzione di 12 megapixel.

3 In photoshop per avere le informazioni necessarie è sufficiente aprire il menu immagine/dimensione immagine: e analizzare la finestra di dialogo che si aprirà: La dimensione pixel a 34,8 MB è la dimensione non compressa, infatti se salviamo in formato TIFF che è un formato non compresso vedremo che il peso del file equivale esattamente a 34,8 megapixel. La dimensione documento si riferisce alla stampa del documento (nella figura in cm) e vuol dire che misurerà 150,71 centimetri in larghezza e 100,47 in altezza, però con una risoluzione di 72 pixel per pollice. Se togliamo la spunta in ricampiona immagine e modifichiamo la risoluzione da 72 pixel a 300 pixel per pollice l immagine si rimpicciolirà a 36,17 per 24,11.

4 Attenzione ai concetti di ridimensionamento e ricampionamento. Tenendo spuntata l opzione per il ricampionamento su Photoshop praticamente quello che il programma farà sarà ingrandire la foto aggiungendo pixel molto simili a quelli presenti. Si tratta di un ingrandimento fatto andando ad aggiungere quindi pixel che prima non esistevano. Questa modalità richiede del tempo di elaborazione, in quanto il computer deve elaborare l immagine e creare un immagine più grande aggiungendo nuovi pixel simili a quelli già esistenti, con la tecnica dell interpolazione. Con questa modalità, i pixel sono creati da zero e cioè sono nuovi. Per cui l immagine potrebbe risultare sgranata. Con il ridimensionamento, togliendo l opzione per il ricampionamento, quello che il programma fa non è altro che ingrandire l immagine, ma andando a variare il numero di ppi. Tecnicamente non è corretto dire che i pixel vengono ingranditi ma concettualmente per capire la funzione si può immaginare che avvenga questo, come vedete nella grafica d esempio qua sotto. Questo procedimento è pressoché immediato, in quanto è un semplice calcolo matematico.

5 4) LA VELOCITA Un altra differenza tra le immagini per il web e per la stampa e che il visitatore sul web deve aspettare il caricamento dell immagine. Come fare per velocizzare i tempi? La cosa più ovvia è inserire immagini non troppo grandi, ma un altro modo più importante è comprimere le immagini. Il formato JPG si presta molto alla compressione anche se come si diceva prima vi è una perdita nella compressione che non è più recuperabile. Per questo è opportuno fare sempre una copia dell immagine prima della compressione in PSD o TIFF. I formati PNG e GIF sono formati lossless (senza perdita) perché comprimono senza perdita di qualità e PNG comprime meglio di GIF. 5) TRASPARENZA La trasparenza è importante per due motivi, il primo perché consente di creare layout complessi sovrapponendo le immagini e il secondo perché si può conferire alle immagini contorni non rettangolari che rendono le pagine visivamente più interessanti. Sia PNG che GIF consentono la trasparenza, JPG no. PNG supporta la trasparenza alfa, che consente anche trasparenze parziali e la resa della trasparenza in PNG è meglio rispetto a GIF perché i bordi sono morbidi anziché seghettati. 6) ANIMAZIONE L animazione nelle immagini è sempre più rara, si preferisce crearla con Flash, CSS Animations o Javascript anche se Flash sta perdendo sempre più consensi. Solo il formato GIF supporta la trasparenza.