I Formati delle immagini (raster) per il web

i tre formati di immagini (raster) utilizzabili per la visualizzazione nativa nel browser sono

formato jpeg (estensione) JPG
formato Graphics Interchange Format GIF
Portable network graphics PNG


NB: non usare TIF (http://it.wikipedia.org/wiki/Tagged_Image_File_Format) ,BMP, mai le JPG in quadricromia !

cosa significa compressione delle immagini
il "peso" in KB /MB diminuisce

due tipi di compressione delle immagini (e di tutti i tipi di dati)

con perdita (lossy) --- perde informazioni
il file "peggiora"
esempi di formati con comopressione con perdita
JPG
MPEG (video)
MPEG2- layer3 (MP3) (audio) http://it.wikipedia.org/wiki/Mp3



senza perdita (lossless) --- non si perde informazione l'immagine è identica
esempio compressione zip - rar
esempio per le immagini tif (specificando la compressione LZW)
esempio web PNG


Quando ussare i vari formati:
Usare il formato Formato JPG

compressione con perdita (JPG) e simili (MPG / MP3)

1) comprimo "poco" ( esempio 5 volte / 10 volte)

l'immagine (l'audio, il video) sono completamente indistinguibili dall'originale

2) comprimo "molto" esempio per le immagini 60/100/200 volte
emergono degli errori caratteristici esempio rettangoli 8x8 pixel (jpeg artifacts http://en.wikipedia.org/wiki/Compression_artifact )

JPG (RGB) media qualità : universale per il web

il JPG non supporta la trasparenza


1) se c'è il bisogno di un colore (o di un canale) di trasparenza

due soluzioni con le immagini, due con i CSS

a) soluzione universale: gif con un solo colore di trasparenza: non supporta semitrasparenze o ombre
b) immagine in formato PNG : buona compatibilità (da IE7 in poi per IE6 e IE5.5 sono disponibili alcuni script in grado di consentire la trasparenza es: http://24ways.org/2007/supersleight-transparent-png-in-ie6)
c) colore RGBa in css 3- ok per Firefox (>3.6) Chrome, Opera, IE solo dalla 9 http://css-tricks.com/rgba-browser-support/ http://msdn.microsoft.com/en-us/ie/ff468705#_CSS3_Colors
d) Proprietà CSS Opacity ( http://www.css3.info/preview/opacity/ )


usare le immagini PNG

PNG elementi grafici fondamentali (e piccoli) del sito, icone, loghi con trasparenza e testo, sfumature sottili e complicate

usare le GIF

GIF compressione senza perdita ma hanno al massimo solo 256 colori (e quindi in caso di un'immagine true color c'è la perdita delle informazioni relative ai colori)
un solo colore completamente trasparente (diverso dal canale di trasparenza!)

piccole icone a pochi colori, immagini B/N con tanti dettagli, fumetti e disegni, iconcine su sfondo trasparente



GIF animate, nel file poche ripetizioni delle immagini variate con il tempo di visualizzazione


Photoshop:

il comando salva per il web

nell'esempio qui sotto ho compresso volutamente troppo l'immagine per fare emergere (al 600%) gli errori/orrori jpg

salvaperweb.jpg

salvaperweb2.jpg



lo strumento sezioni

http://help.adobe.com/it_IT/Photoshop/11.0/WSfd1234e1c4b69f30ea53e41001031ab64-7570a.html

esercizio: analizzare e sezionare questo template


http://www.bevelandemboss.net/show-template.php?id=8#at
template-3.jpg




Appendice


nuovi formati di immagini

bottoni e tab css con il sistema "sliding doors!
http://azadcreative.com/2009/03/bulletproof-css-sliding-doors/