Progettazione di siti web
a.a. 2021/22

Grafica per il web

Maria Simi
Aprile, 2022

[Siegel, Zeldman, manuale Photoshop, Web design in a nutshell, Learning web design (cap 20, 21)]

Sommario

• Immagini vettoriali e immagini raster
• Formati di immagini per il web
  
• Codifica del colore
• Algoritmi di compressione e strategie di compressione
• Anti-aliasing e aloni
• Immagini a caricamento graduale
• Immagini GIF animate
• SVG e Canvas
• Mappe immagine

Tipi di immagini

• Immagini vettoriali
  
  • Insiemi di oggetti geometrici (quadrati, cerchi, linee, curve)
  • Gli oggetti sono rappresentati mediante formule geometriche
  • Gli oggetti possono essere cambiati ridefinendone gli attributi (colore, dimensione …)
• Immagini raster (o bitmap)
  
  • Rappresentazione mediante una matrice rettangolare di punti, detti pixel (picture element)
  • ogni punto ha associato un colore

Immagini vettoriali

• Proprietà
  
  • compatte: occupano poca memoria
  • scalabili: qualità indipendente dalla definizione
  • senza sfondo
  • adatte per disegni e figure geometriche, disegni, loghi; non per fotografie
• I formati vettoriali sono ancora poco usati nel Web
  
  • Shockwave FLASH (swf): richiede un plug-in, è un formato proprietario
  • Scalable Vector Graphics (SVG): un formato XML raccomandato dal W3C
  • HTML5 supporta SVG (tag svg); FLASH è praticamente scomparso
• Programmi per la grafica vettoriale
  
  • Adobe Illustrator (Creative cloud), Corel DRAW, Adobe FreeHand, SVG-edit ...

Immagini raster (o bitmap)

• Proprietà
  • qualità dipendente dalla quantità di pixel
  • il ridimensionamento influenza la qualità
    - ridurre le dimensioni elimina pixel
    - ingrandire aggiunge pixel (interpolazione)
• Formati
  • formati specifici degli strumenti: BMP, PICT, TIFF, PSD (Adobe Photoshop), XCF (GIMP)
  • formati per il web: GIF, JPEG, PNG
• Programmi
  • Adobe Photoshop, Corel Photo-Paint, GIMP ...

Dimensioni in pixel

• Le dimensioni di un’immagine sullo schermo dipendono dalla definizione dello schermo
  
  • la definizione dello schermo determina la grandezza del pixel
  • si misura in quanti pixel ci stanno in una unità di superficie (ppi, pixels per inch/pixel per pollice)
    - 72 o 96 ppi (pixel per pollice) sullo schermo
    - 150-600 dpi (dots per inch) per la stampa
  • In monitor ad alta definizione si vede tutto più piccolo
• Sulle immagini bitmap si lavora in pixel/punti, indipendentemente da quanto grande sarà l’immagine visualizzata sullo schermo

Conversioni di formato

• I programmi di grafica vettoriale possono salvare in un formato bitmap e in particolare in un formato per il Web. Il processo si chiama rasterizzazione.
• La rasterizzazione è irreversibile: si perdono le buone proprietà delle immagini vettoriali. Impossibile la conversione opposta.
• Conservare sempre l’immagine vettoriale nel suo formato nativo … non si sa mai!
• Se lavorate con immagini raster, conservare sempre l’immagine nel formato più grande e più "definito".

Bitmap: occupazione di memoria

x × y × z dove z è la profondità del colore
Es. 60 × 30 × 8 = 14400 (circa 14 Kbit)
In byte (1 byte = 8 bit): 1800 byte

Video RAM

• Al monitor è associata una bitmap che risiede nella memoria RAM del video (VRAM)
• L’occupazione di memoria dell'immagine visualizzata sullo schermo è influenzata da:
  
  • numero di pixel
    - le dimensioni dello schermo
    - la densità dei pixel (definizione in pixel per pollice)
  • il numero di colori diversi
• Se la capacità della VRAM è limitata si deve rinunciare alla definizione (tipicamente 72-160 ppi) o al numero di colori (a volte solo 256)

Codifica del colore

I formati delle immagini raster per il web

• GIF (Graphics Interchange Format)
  • migliore per immagini piccole, loghi …
• JPEG (Joint Photographic Experts Group)
  • migliore per immagini più grandi e per fotografie
• GIF e JPEG si differenziano principalmente per la diversa rappresentazione dei colori e il metodo di compressione
• PNG: nuovo formato non proprietario che migliora il formato GIF
• WebP: un nuovo formato che li racchiude tutti, particolarmente efficiente, non ancora ben supportato.

GIF - rappresentazione del colore

• Le immagini hanno associata una tavolozza di colori (palette) e i colori sono rappresentati mediante un indice nella palette
• La palette ha un numero di colori variabile (max 256 colori, sono sufficienti 8 bit).
• I colori possono essere diversi da immagine a immagine.
• Uno solo dei colori può essere reso trasparente.
• Un'immagine e la sua palette

JPEG - rappresentazione del colore

• Nelle immagini JPEG si utilizza la codifica RGB (Red, Green, Blue):
  
  • 8 bit per l'intensità del rosso (R)
  • 8 bit per l'intensità del verde (G)
  • 8 bit per l'intensità del blue (B)
• Si ottiene una gamma vastissima di colori (tutti quelli rappresentabili con 24 bit, oltre 16 milioni)
• Si può parlare di "colore vero" (true color), in quanto sono ben di più dei colori distinguibili dall'occhio umano.

PNG

• Il PNG (Portable Network Graphics) è un miglioramento del GIF supportato dal W3C
  
  • GIF è un formato proprietario
  • PNG è un formato aperto
• Sostenuto dal W3C come standard per il Web
• Diverse profondità di colore
  
  • PNG-8 formato con palette a 8-bit come GIF
  • PNG-24 formato RGB a 24-bit come JPEG
  • ... e anche a 48 bit (16 bit per canale!!!)
• Altre caratteristiche avanzate ...

Tipi di monitor

• True color: 8 Red, 8 Green, 8 Blu
  
  • Milioni di colori
• High-color: 5 Red, 6 Green, 5 Blu
  • Migliaia di colori, ma non un sottoinsieme dei precedenti
• 8-bit color
  
  • solo 256 colori
    - di cui una parte riservati alla tavolozza di sistema (non proprio la stessa su Mac e su Windows)
    

Limitazioni dei monitor

• Con monitor "limitati" il colore viene tipicamente approssimato dai browser
• In presenza di colori che non stanno nel loro repertorio, fanno il meglio che possono:
  
  • approssimano al colore più vicino (bending)
  • utilizzano una tecnica detta dithering, che consiste nel mescolare pixel di colori diversi per ottenere un colore intermedio. Dithering
  • questo uno dei motivi per cui i colori possono essere diversi da monitor a monitor
• Il cubo di Netscape o colori Web safe o tavolozza web sono un tentativo di standardizzare il repertorio di colori visualizzabili con 8 bit: ne parliamo per motivi "storici".

Il cubo di colori di Netscape

• Il cubo definisce 216 colori (dei 256 rappresentabili con 8 bit).
• Questi colori dovevano essere scelti come standard dai browser, anche quelli con 256 colori.
• Per questo sono detti safe (sicuri).
  Colori web e cubo
• I colori del cubo sono quelli per cui il rosso, verde e blu hanno valori nell'insieme {00, 33, 66, 99, CC, FF}
  Es. #003366, anche abbreviato come #036

Il mito dei colori "web safe"

• Test della palette web-safe su diversi browser con diverse profondità di colore hanno dimostrato che non esistono colori standard (o almeno sono pochi)
  
  • Una gif colorata su un backround dello stesso esatto colore: si vede la differenza?
• Morale:
  
  • Usiamo liberamente tutti i colori
  • Accettare che i colori non saranno esattamente quelli scelti
• Accortezza: le immagini GIF da accomodare su sfondi a tinta unita dovrebbero avere lo sfondo reso trasparente

La compressione di immagini

• Per capire come ridurre l'occupazione di memoria delle immagini bisogna capire come funzionano gli algoritmi di compressione.
• Si distingue tra:
  
  • Compressione senza perdita (lossless): nella compressione l'immagine non perde qualità e, una volta decompressa, torna uguale a prima.
  • Compressione con perdita (lossy): più si comprime più si perde in qualità

Compressione nel GIF

• LZW (Lempel, Zev, Welch)
• È un algoritmo senza perdita di informazione (lossless)
• Si riducono le immagini fino a 4 volte (il rapporto di compressione è di 4 a 1).
• Riconosce file orizzontali di pixel dello stesso colore indicandole come n pixel di tale colore
  
  • Anziché codificare "1 pixel verde, 1 pixel verde, 1 pixel verde ..." per n volte, codifica "n pixel verdi"
• Righe uguali vengono memorizzate una sola volta in una tabella e riferite tramite un indice

Comprimibilità di immagini GIF

Compressione JPEG

• Le immagini JPEG utilizzano un algoritmo di compressione con perdita (lossy)
• Su immagini di tipo fotografico il rapporto di compressione è da 10:1 a 20:1, senza una perdita di qualità apprezzabile
• Vengono approssimati pixel adiacenti
  
  • Le zone dell'immagine con poco dettaglio (es i cieli o le zone più sfumate) vengono compresse di più
  • Quelle con confini più netti (es. fili d'erba) sono approssimate di meno per rispettare il dettaglio

Immagini JPEG comprimibili

• Sono quelle con i gradienti e colori sfumati
• Poche linee nette

Compressione JPEG in pratica

• Migliore la qualità più grosso il file
• Livelli di compressione variabili:
  
  • si procede per tentativi fino a trovare il miglior compromesso tra dimensione dell’immagine e qualità
  • livello Q (qualità): da 0 (qualità infima) a 100 (qualità top)
• Perdita di qualità cumulativa
  
  • Compressioni successive danno un risultato peggiore: mantenere una copia non compressa anziché decomprimere, modificare e comprimere di nuovo.
• La decompressione è più lenta che nel GIF

Compressione PNG

• Algoritmo di compressione GIF coperto da copyright Unisys: i produttori di programmi di grafica pagano per l'utilizzo
• Compressione lossless come in GIF e più efficiente, se implementata bene da 5% a 25% migliore.
  
  • Usa dei filtri che consentono anche di riconoscere delle regolarità in verticale
• Anche a 24 bit di colore non è un sostituto per JPEG

Strategie per ridurre le immagini

• Dimensione pagina < 70K, immagini comprese. È importante ridurre le dimensioni delle immagini.
  Non basta farlo con i fogli di stile!
• Nel GIF e nel PNG, ridurre i colori nella palette, rende le immagini più comprimibili (aumentano le sequenze di colori uguali).
  
  • Usare palette adattiva e provare con palette di diverse dimensioni in “save for Web” di Photoshop.
• Nel JPEG rendere l’immagine più sfumata (funzione blur) e provare con livelli diversi di compressione.

Aliasing

• Un problema delle immagini bitmap è dovuto alla approssimazione dell'immagine in pixel: le linee orizzontali e verticali non hanno problemi, quelle diagonali appaiono "dentellate".
• Il problema della 'dentellatura' delle immagini è detto aliasing.

Anti-aliasing

• Anti-aliasing: una tecnica che "ammorbisce" la dentellatura introducendo dei colori intermedi tra i colori dell'immagine e il colore dello sfondo
• L'anti-aliasing è importante per la qualità delle immagini bitmap.
  Esempio

Il problema degli aloni

• Nelle immagini GIF un solo colore può essere reso trasparente. La trasparenza è binaria (on/off).
  
  • Non si possono ammorbidire le dentellature usando le trasparenze
• Se si prepara un’immagine con anti-aliasing su sfondo bianco e si trasporta su uno sfondo scuro si creano degli aloni chiari intorno all'immagine
  Esempio
• Per evitare aloni, fare anti-aliasing su un colore di sfondo uguale a quello finale, poi eliminare lo sfondo rendendolo trasparente
• L'immagine non è rilocabile su un altro sfondo

Le trasparenze variabili del PNG

• Trasparenze binarie: un colore è trasparente o opaco
• Trasparenze variabili
  
  • Canale alfa: un canale separato per le trasparenze (RGBA)
    - 256 livelli di trasparenza per ogni colore
    - occupazione di memoria maggiore del 20%
  • Trasparenza a 8 bit
    - Le trasparenze sono associate ai singoli colori nella palette
    - Più efficiente
• Le trasparenze variabili, usate per l'antialiasing, rendono le immagini rilocabili
• Trasparenze di PNG supportate solo dalle versioni più recenti di Explorer

Immagini a caricamento graduale

• Normalmente le immagini sono caricate per riga dall'alto al basso: può essere un problema su connessioni lente
• Le immagini GIF interlacciate (interlaced) sono immagini GIF il cui caricamento da parte dei brower avviene in maniera graduale, per passate successive (4 passate).
  Esempio
• Per produrre immagini di questo tipo si salva con l'opzione "interlace" (quando si esporta un'immagine da Photoshop nel formato GIF)
• Il file è più grosso. Conviene solo per immagini di grandi dimensioni

JPEG e PNG graduali

• Le immagini JPEG progressive sono l'equivalente delle immagini GIF interlacciate
  
  • Il file non è più grosso
  • Più lavoro per la visualizzazione da parte del processore
• Esistono anche PNG interlacciate o progressive
  
  • 7 passate con il metodo Adam7 (da Adam Costello)
  • si vede qualcosa anche con 1/64 dell'immagine (8 volte più veloce del GIF)
  • I file sono più grandi come nel GIF

Immagini GIF animate

• Le immagini GIF animate sono una serie di immagini GIF, che condividono tipicamente la stessa palette
• Vengono mostrate in successione, ciclicamente o una sola volta, con un intervallo regolabile tra una e l'altra.
  Esempi
• Si usano come le altre GIF, non sono necessari plug-in per visualizzarle e non è necessario programmare le animazioni
• Anche se un browser non è in grado di mostrare l'animazione si vede comunque un immagine (la prima o l'ultima)
• Per il PNG e JPG non esistono immagini animate.

Come crearle

• Esistono strumenti appositi: es. GIF construction builder, Animation Shop di PaintShop Pro, Fireworks, Image Ready di Photoshop, Gimp
• Opzioni
  
  • Ritardo, anche variabile, tra un frame e l'altro (in 1/100 sec)
  • Trasparenze
  • Metodi di cancellazione (dei frame precedenti):
    - ogni frame copre i precedenti
    - il frame precedente rimane
    - rimane lo sfondo
  • Numero di iterazioni
  • Varie opzioni per l'ottimizzazione

Cinegrafie (cinegraph, cinemagraph)

• Una cinegrafia è una fotografia digitale in cui è presente un piccolo movimento, a volte quasi impercettibile.
• Una nuova forma d'arte che è una via di mezzo tra immagini e video
• Inventata da Jamie Beck & Kevin Burg
  http://cinemagraphs.com/
• La cinemagrafia è un’ immagine GIF animata.

SVG - Scalable Vector Graphics

• SVG è un formato vettoriale: i file contengono istruzioni per disegnare forme piuttosto che griglie di pixel
  
  • Vanno bene per loghi, figure geometriche, grafici, diagrammi ...
  • Le immagini sono scalabili ... e programmabili!

Produrre grafica SVG e usarla

• Disegnare con un programma di grafica vettoriale:
  
  • Adobe Illustrator, salvare come SVG
  • Open source: Inkscape
• Inserimento in una pagina HTML
  
  • Metodi cross-browser: object, embed, iframe
  • HTML5: svg
  • img, fornire un'alternativa!

    <img src="your.svg" onerror="this.src='your.png'">

SVG tag

• Si posso realizzare grafici interattivi con CSS e Javascript!

Caching e riutilizzo

• Ogni browser ha una memoria locale, detta cache, in cui si mantiene i file scaricati dalla rete più di recente
• La cache è selezionabile tra le opzioni del browser ed è normalmente attiva.
• Se si usa più volte la stessa immagine (stesso file) questa non viene scaricata ogni volta dalla rete, ma solo la prima volta.
• Riutilizzare le stesse immagini in pagine dello stesso sito non appesantisce il caricamento.

Rigonfiamento delle immagini

• Un'immagine supercompressa può "esplodere" al momento della decompressione sulla macchina cliente
  
  • Una GIF 500 x 500 con 2 colori potrebbe occupare 10K una volta compressa, ma una volta decompressa sul lato cliente 500 x 500 x 8 = 244K
  • Un'immagine JPEG delle stesse dimensioni 500 x 500 x 24 = 750K
  • Un'immagine JPEG 1600 x 1600 x 24 = 2 MB (2 mega byte)
• Se la macchina del cliente ha poca memoria RAM può essere un problema.
• Evitare comunque di utilizzare immagini di grosse dimensioni (intorno a 600 x 800 pixel in totale)

Mappe immagine o "cliccabili"

• Su una immagine possono essere create aree "sensibili al mouse" (hot spots) a cui si associa un URL: se si fa clic con il mouse posizionato all'interno dell'area viene seguito il collegamento associato
• Esistono due tipi di mappe:
  
  • Mappe sul lato server
  • Mappe sul lato client

Mappe lato server e lato client

• Mappe sul lato server
  
  • le coordinate del punto selezionato vengono inviate al server che utilizza un file di definizione della mappa con gli URL associati ed è in grado di trovare l'URL giusto
  • ormai poco utilizzate
• Mappe sul lato cliente
  
  • il file HTML contiene la definizione della mappa ed è il browser stesso ad interpretare il clic, richiedendo al server il documento appropriato
  • le più utilizzate, perché più semplici e ormai ben supportate

Creare una mappa “a mano”

• Con un programma di grafica si crea l'immagine e si individuano le coordinate delle regioni che si vogliono rendere selezionabili.
• Queste possono essere
  
  • rettangoli (servono le coordinate di due vertici opposti)
  • poligoni (servono le coordinate dei vertici)
  • cerchi (servono la coordinate del punto centrale e il raggio)
• Si realizza un file HTML che codifica la mappa

Mappe immagine lato client

• Hanno tre ingredienti:
  
  • Un'immagine normale (gif, jpg o png)
  • Una mappa che associa una URL ad ogni area definita da un numero opportuno di coordinate
  • Un collegamento tra l'immagine e la mappa attraverso l'attributo usemap
    Esempio
    Esempio (con un po' di Javascript)

Strumenti per creare mappe

• Strumenti di mapping: funzionamento
  
  • si seleziona una regione dell'immagine
  • si dice qual'è l'URL associato
  • automaticamente viene generato il codice HTML della mappa
• Alcuni programmi di grafica vettoriale (vedi ad esempio Illustrator) consentono di associare URL ad oggetti grafici
  
  • salvando l'immagine come HTML con opzione MAP viene creato il codice HTML per la mappa cliccabile
• Photoshop (ImageReady) e GIMP
  
  • Uso di strumenti mappa immagine (cerchio, rettangolo …) selezionare l’area da rendere cliccabile, associare URL, salvare come HTML

Quando usare le mappe

• Le mappe sono la soluzione più naturale da utilizzare quando gli oggetti da selezionare hanno una relazione spaziale tra loro
  
  • Piantine di città o edifici
  • Particolari di opere d'arte
• Non sono l'ideale per menù di navigazione
  
  • Non sono possibili effetti hover
• Bisogna fornire testo alternativo per l'accessibilità

Grafica vettoriale: canvas e SVG

• I canvas sono ambienti per immagini dinamiche
  

  <canvas id="my-canvas" width="320" height="240">
  ... contenuto alternativo ...
  </canvas>
  

• Uso del canvas
  
  • Si disegna usando delle librerie grafiche standard con Javascript
  • Si può programmare l'interazione grafica, cambiare l'immagine a seconda di cosa fa l'utente
  • Si possono visualizzare grafici che cambiano con i dati caricati
  • Esempio
• Alternativa: SVG (Scalable Vector Graphics)
  
  • Formato XML per immagini vettoriali

Canvas vs SVG

• SVG è per immagini vettoriali (ma si possono caricare bitmap), Canvas è per immagini bitmap (ma si possono disegnare linee).
• Le immagini SVG sono definite in XML e sono parte del DOM, quindi manipolabili da Javascript. Le immagini nel canvas sono disegnate attraverso una libreria grafica Javascript (API), non si possono modificare in base ad eventi solo ridisegnare.
• SVG più accessibile del Canvas. Includono il testo. Rendering più lento.
• Canvas migliore per giochi di azione con molta grafica. Esempi Canvas

Favicon

• Piccola icona che compare a sinistra nella barra del titolo. Es. W3C, UNIPI
• Si crea una piccola immagine 16×16 pixel (32×32 pixel per Retina display)
• Si salva con il nome favicon.ico
• Si mette nella directory radice del sito