INFORMATICA E GRAFICA PER IL WEB Psicologia e comunicazione A.A. 2014/2015 Università degli studi Milano-Bicocca docente: Diana Quarti LEZIONE 04 INFORMATICA E GRAFICA PER IL WEB A.A. 2014/2015 docente: Diana Quarti 01
ESPORTARE LAYOUT E IMMAGINI Una volta definito layout, dimensioni e quali immagini inserire bisogna salvarle e ottimizzarle per il web. Ottimizzare le immagini significa: trovare il giusto equilibrio tra qualità e dimensioni file. Nonostante l aumento della velocità delle linee per la connessione internet (ADSL, fibra ottica ecc.), ridurre le dimensioni dei file mantenendo comunque una buona qualità rimane anche oggi fondamentale, visto che sempre più persone accedono a internet tramite dispositivi mobili (con problematiche di velocità della linea, di costi e di copertura della rete). Per ottimizzare le immagini: diversi formati: usare formati adatti al tipo di immagine e numero di colori regolare i livelli di compressione altre tecniche di ottimizzazione a seconda del formato INFORMATICA E GRAFICA PER IL WEB A.A. 2014/2015 docente: Diana Quarti 02
SALVARE PER IL WEB CON ADOBE PHOTOSHOP Ogni immagine che deve essere pubblicata sul web deve essere salvata attraverso il comando Salva per web e dispositivi... Questa finestra mette a disposizione una serie di funzioni che consentono di ottimizzare le immagini, permettendo un controllo e una verifica in tempo reale della qualità, della trasparenza, dei colori e delle dimensioni del file. Salvare l immagine in un formato compatibile con il web (es. JPEG) tramite la funzione Salva / Salva come, crea dei file che possono essere inseriti nelle pagine, ma di dimensioni superiori di quelli ottenibili tramite la funzione apposita. INFORMATICA E GRAFICA PER IL WEB A.A. 2014/2015 docente: Diana Quarti 03
FINESTRA SALVA PER IL WEB E DISPOSITIVI INFORMATICA E GRAFICA PER IL WEB A.A. 2014/2015 docente: Diana Quarti 04
IMMAGINI: FORMATI PER IL WEB I formati immagine per il web sono: JPEG Joint Photographic Experts Group Esempio di immagine WBMP GIF Graphics Interchange Format PNG (PNG-8 e PNG-24) Portable Network Graphics Esistono inoltre i formati: WBMP Wireless Bitmap: formato monocromatico (pixel bianchi e neri) usato da dispositivi wireless (per esempio dispositivi WAP). Esempio di immagine SVG SVG Scalable Vector Graphics: formato per immagini vettoriali. INFORMATICA E GRAFICA PER IL WEB A.A. 2014/2015 docente: Diana Quarti 05
FORMATI PER IL WEB: JPEG JPEG Joint Photographic Experts Group ideale per fotografie e immagini complesse con tanti colori e cambi tonali compressione con perdità: la riduzione delle dimensioni dei file è ottenuta riducendo la qualità dell immagine; fortunatamente se settata in maniera corretta la perdita non è percepibile dall occhio umano la compressione del jpeg può creare indesiderati artefatti sull immagine; compressioni eccessive possono rivelare un mosaico 8x8 non supporta la trasparenza possono includere meta data come copyright e altre informazioni INFORMATICA E GRAFICA PER IL WEB A.A. 2014/2015 docente: Diana Quarti 06
JPEG / OPZIONI DI SALVATAGGIO E OTTIMIZZAZIONE Le opzioni che possiamo settare per il formato JPEG sono: qualità / settare la qualità significa settare il livello di compressione di un jpeg: maggiore è la qualità minore sarà la compressione e maggiore sarà il peso del file ottenuto. Non ci sono numeri standard per ottenere un buon compromesso tra qualità e peso visto che dipende molto dal tipo di immagine; progressivo / nel caso di connessioni lente visualizza un immagine in una qualità molto bassa e che al procedere del download migliora di qualità fino ad arrivare all immagine finale, aumenta le dimensioni del file, è al giorno d oggi non è così necessario; ottimizzato / aggiunge un ulteriore compressione senza perdita (chiamata Huffman coding); includi profilo colore (embed color profile) / include il profilo colore dell immagine, purtroppo la maggior parte dei browser ignora questa funzione; sfoca (blur) / aumenta la compressione ma l immagine risulterà meno definita»» alone (matte) / definisce il colore che devono avere le parti che nel psd sono trasparenti (il jpeg non supporta la trasparenza) INFORMATICA E GRAFICA PER IL WEB A.A. 2014/2015 docente: Diana Quarti 07
JPEG / FINESTRA SALVA PER IL WEB E DISPOSITIVI INFORMATICA E GRAFICA PER IL WEB A.A. 2014/2015 docente: Diana Quarti 08
FORMATI PER IL WEB: GIF GIF Graphics Interchange Format ideale per loghi, testi e altre immagini grafiche compressione senza perdità: la compressione delle dimensioni del file avviene senza perdita basandosi su un tipo di codifica dei dati (LZW) e quindi la compressione può essere diversa in base al tipo di immagine, ma... supporta fino a 256 colori, quindi se l immagine ha più di 256 colori avrò una perdita di qualità, per questo non è adatto per immagini fotografiche con milioni di colori supporta la trasparenza a 1 bit quindi un pixel potrà essere o completamente trasparente o completamente opaco non possono includere meta data supporta l animazione INFORMATICA E GRAFICA PER IL WEB A.A. 2014/2015 docente: Diana Quarti 09
GIF. OPZIONI DI SALVATAGGIO E OTTIMIZZAZIONE Le opzioni che possiamo settare per il formato GIF sono: algoritmo di riduzione del colore per determinare quali colori mantenere e quali ignorare; tra le opzioni a disposizione segnaliamo: selettivo (colori più usati e in larghe concentrazioni), adattivo (colori più usati nell intero documento), percettivo (priorità alla percezione del colore, ma poco accurato nei valori reali del colore), restrittivo (web safe color, obsoleto), inoltre per ottenere immagini monocromatiche bianco e nero/scala di grigio. Web snap è invece l aderenza dei colori alla paletta web safe color, obsoleto la riduzione del numero di colori fa diminuire il peso dell immagine (e non sempre la qualità) dithering serve per determinare in che modo vengono simulate le sfumature; le opzioni sono nessun dithering, diffusione, pattern, disturbo la trasparenza a 1bit può portare a contorni strani e rigidi, per settare una trasparenza morbida è impostare l alone del colore del background dove verrà posizionata l immagine Interlacciato è simile al progressivo del Jpeg Perdita aumenta la compressione ma diminuisce la qualità dell immagine INFORMATICA E GRAFICA PER IL WEB A.A. 2014/2015 docente: Diana Quarti 10
GIF / FINESTRA SALVA PER IL WEB E DISPOSITIVI INFORMATICA E GRAFICA PER IL WEB A.A. 2014/2015 docente: Diana Quarti 11
FORMATI PER IL WEB: PNG PNG Portable Network Graphics esiste in due varietà PNG-8 e PNG-24. Il PNG-8 è l equivalente del formato GIF ma senza animazione. Il PNG-24: è ideale per qualsiasi tipo di immagine compressione senza perdità la qualità dell immagine è molto alta supporta la trasparenza a 8-bit non possono includere meta data la dimesione (peso) del file è piuttosto alta. usare solo quando è necessario INFORMATICA E GRAFICA PER IL WEB A.A. 2014/2015 docente: Diana Quarti 12
PNG / OPZIONI DI SALVATAGGIO E OTTIMIZZAZIONE Le opzioni che possiamo settare per il formato PNG-8 sono le stesse del formato GIF. Le opzioni che possiamo settare per il formato PNG-24 sono: la trasparenza a 8bit consente di creare trasparenze morbide anche senza l utilizzo dell alone. l alone è il colore di riempimento per i pixel trasparenti (come nei JPG) quando la trasparenza è disattivata. Interlacciato è simile al progressivo del JPG INFORMATICA E GRAFICA PER IL WEB A.A. 2014/2015 docente: Diana Quarti 13
PNG / FINESTRA SALVA PER IL WEB E DISPOSITIVI INFORMATICA E GRAFICA PER IL WEB A.A. 2014/2015 docente: Diana Quarti 14
DOMANDE? INFORMATICA E GRAFICA PER IL WEB A.A. 2014/2015 docente: Diana Quarti 15