CORSO HTML: immagini

6_ IMMAGINI

Tipi di immagini

Le immagini in una pagina ipertestuale sono molto importanti, spesso essenziali.
Certe pagine in rete devono il loro successo solo alla grafica che ospitano.
Comunque le immagini servono per rendere più immediati e più chiari i concetti, anzi l'uso principale dell'immagine è proprio quello di sostituire efficacemente il testo. Per questo motivo la quantità di immagini usate nei file HTML tendono a crescere.

Le immagini che maggiormente si utilizzano nei file HTML, perchè suppotate dalla maggior parte dei browser, possono essere di due formati:

formato GIF GIF

formato JPG JPG

Il formato GIF (Grafic Image Format) venne introdotto da CompuServe per accelerere il tempo di scaricamento dalla sua rete.

Questo tipo di immagini supportano solo 256 colori (8 bit).

Le immagini GIF possono essere:

semplici
interlacciate - 89a interlacced
trasparenti
animate

Per ognuna delle qualità su elencate occorre dare delle specifiche indicazioni al softwere usato per crearle in fase di memorizzazione.

Il formato JPG o il formato JPEG (Joint Photographic Expert Group) permettono una maggiore compressione dell'immagine. Supportano 16,7 milioni di colori (24 bit).
Questo formato risulta migliore nel gestire foto (molte variazioni di colori) piuttosto che immagini con grandi aree di colore uniforme.

Inserimento delle immagini e dimensionamento

Nel linguaggio HTML per poter inserire una immagine si utilizza il tag:

< IMG SRC="nome_immagine.gif" >

(se il file nome_immafine.gif si trova nella stessa directory del file HTML che lo richiama.)

Le immagini possono essere anche dimensionate. Definire la dimensione di una immagine, se questa non e piccola, permette di velocizzarne il caricamento. Gli attributi da utilizzare, all'nterno del tag < IMG > sono:

WIDTH = numero pixel
HEIGHT = numero pixel

Ovviamente se le dimensioni sono maggiori di quelle effettive dell'immagine, questa risulterà sgranata, mentre se le dimensioni saranno minori o uguali l'immagine risulterà nitida.
Nei tre esempi che seguono l'immagina ha dimensioni minori, uguali e maggiori dell'originale.

Allineamento del testo con le immagini

Per poter allineare un'immagine con il testo si possono utilizzare specifici attributi del tag < IMG >:

l'attributo align="top" permatte di allineare alla parte superiore della riga del testo la parte superiore dell'immagine

< IMG SRC="uomo.jpg" align=top > immagine

l'attributo align="middle" permatte di allineare alla parte centrale della riga del testo (in realtà la linea di base) la parte centrale dell'immagine

< IMG SRC="uomo.jpg" align=middle >

l'attributo align="bottom" permatte di allineare alla parte inferiore della riga del testo la parte inferiore dell'immagine

< IMG SRC="uomo.jpg" align="bottom" >

Per riempire con il testo lo spazio su un lato dell'immagine si usano gli attributi:

align="left"
align="right"

< IMG SRC="donna.jpg" align="left" >

anche insieme per porre un testo tra due immagini e si può aggiungere anche l'attributo
vspace=n° pixel spazio sopra e sotto
hspace=n° pixel spazio a destra e a sinistra

< IMG SRC="uomo.jpg" align="left" hspace=12 >
< IMG SRC="donna.jpg" align="right" hspace=8 >
testo tra le immagini

Esispono inoltre altri attributi quali:
alt=descrizione immagine" descrizione dell'immagine;
border = numero pixel elimina (0) o inserisce un bordo (> 0);
align="texttop" allinea il bordo superiore dell'immagine con la parte superiore del testo;
align="absmiddle" allinea il centro dell'immagine con il centro della riga di testo;
align="baseline" corrisponde a align=bottom;
align="absbottom" allinea il bordo inferiore della immagine con il bordo inferiore della riga.

Immagini come collegamento

Un' immagine può essere utilizzata anche come collegamento.
Basta inserire il tag < IMG > all'interno del tag < A >.

Immagini trasparenti e iterallacciate

Due utili funzionalità dei file .GIF (formato GIF89a) sono: quella di poter rendere trasparente lo fondo dell'immagine e quella di rendere iterallacciata l'immagine

immagini trasparenti

formato GIF con sfondo non trasparente

formato GIF con sfondo reso trasparente

Per poter creare immagini con sfondo trasparente si devono utilizzare programmi in grado di creare sfondi trasparenti.

immagini iterallacciate

L'interallacciamento determina la modalità con cui un'immagine viene visualizzata dal browser.
L'interallacciamento provoca una sorta di immagine a bassa risoluzione che si definisce lentamente. Questo permette di avere un'idea dell'immagine che si sta caricando prima di aver terminato il caricamento completo dell'immagine e quindi ci permettere di proseguire se l'immagine non ci interessa in modo particolare.
Ovviamente questa funzionalità risulta molto utile per i file molto "pesanti".

Anche per i file JPEG esiste una funzionalità simile - JPEG progressivo. L'unica differenza è che i file GIF sono leggibili da un maggior numero di browser

Le immagini possono essere create o direttamente al computer con appositi software oppure si può utilizzare uno scanner per trasferire una immagine da supporto cartaceo al computer. In questo ultimo caso, se non sussistono particolari motivi, è sufficiente utilizzare una risoluzione di 300 dpi (punti per pollice) dato che la maggior parte dei monitor ha una risoluzione di 72 dpi.
Si possono anche utilizzare immagini già pronte (Clip Art).