zromano 3 January 2001 16:14 Immagini HTML :
GIF E JPG

I computer immagazzinano le immagini in diverse maniere.

A lcuni metodi si basano sulla massima compressione possibile dell'immagine.

U no dei maggiori problemi circa l'uso delle immagini nei siti web consiste nel fatto che scaricare le immagini richiede molto più tempo rispetto al testo.

P er ridurre il più possibile il tempo necessario a scaricare, vengono usati dei formati di compressione di immagini. I due migliori usati sul web sono:

GIF	JPG
256 colori	Colori illimitati
Può gestire aree trasparenti	Non può gestire aree trasparenti
Questo formato non va bene per comprimere fotografie	Eccellente nella compressione di fotografie e immagini complesse
In generale, è eccellente per titoli, bottoni e clipart	In generale, non è adatto per titoli, bottoni e clipart.

Q uesto significa che:
·         Titoli, bottoni, divisori, clipart e altre semplici immagini funzionano meglio in GIF .
·         Fotografie e immagini complesse normalmente funzionano meglio in JPG .
S e vuoi usare un'immagine che è in formato diverso da JPG o GIF, devi scaricare l'immagine in un programma di grafica e salvarla sia come JPG che come GIF.

INSERIMENTO IN HTML
I l tag usato per inserire un'immagine si chiama img .

Q ui sotto puoi vedere un'immagine chiamata "cale.gif".


E cco il codice HTML usato per inserire l'immagine in questa pagina web:

<img src="cale.gif">

S e l'immagine viene immagazzinata nello stesso folder della pagina HTML, si può tralasciare il riferimento al dominio (in questo caso, www.echoecho.com/) e passare direttamente a inserire l'immagine con questo codice:

<img src=" cale.gif ">

N elle pagine seguenti tratteremo i diversi modi di controllare come l'immagine viene inserita.

RIDIMENSIONAMENTO

P uoi cambiare le dimensioni di un'immagine usando gli attributi width e height (larghezza e altezza).

I n generale, non è consigliabile ridurre le dimensioni delle immagini usando questi comandi, in quanto l'immagine viene trasferita in internet nella sua misura originale, indipendentemente dalla riduzione che si è operata su di essa. Questo rallenterebbe lo scaricamento della tua pagina web.

Q uesto significa che se hai un'immagine più grande di quanto la vorresti, per inserirla in dimensioni ridotte sulla tua pagina, dovrai ridurla in un programma di grafica, invece di ridurne semplicemente le dimensioni sulla pagina usando gli attributi width e height.

A l contrario, a volte, può essere vantaggioso ingrandire le immagini usando questa tecnica.

E cco due presentazioni della stessa identica immagine - con differenti opzioni per larghezza (width) e altezza (height).

<img src="cale.gif" width="60" height="60" >

<img src="cale.gif" width="120" height="120" >

S e non vengono specificate le opzioni di larghezza e altezza, il browser automaticamente userà le dimensioni reali dell'immagine.

C omunque, dovresti sempre specificare le opzioni di larghezza e altezza, anche quando usi un'immagine nelle sue dimensioni reali!

I l motivo è che se queste opzioni vengono tralasciate, il browser non può costruire la pagina finché l'immagine non è completamente scaricata.

Q uesto vuol dire che il visitatore non può leggere il testo intorno all'immagine mentre l'immagine stessa viene scaricata - e questo dà come risultato l'impressione di una pagina "lenta".

Q uesto è ancora più evidente se l'immagine è all'interno di una tavola.
In tal caso, l'intera tavola appare solo quando l'immagine è completamente scaricata.

BORDO INTORNO
P uoi aggiungere un bordo all'immagine usando l'opzione border come puoi vedere nell'esempio qui sotto:

Nota:
I browser Netscape mostreranno il bordo soltanto se l'immagine è un link.

<img src="cale.gif" border="5" >

L 'aggiunta di un bordo all'immagine serve anche per aiutare il visitatore a capire immediatamente che l'immagine in questione è un link. Comunque, la rete è piena di immagini - link che non hanno bordi, così normalmente i visitatori fanno scorrere il mouse sulle immagini per vedere se queste sono anche link.

C omunque - se hai un'immagine che crea spesso dubbi, dovresti considerare l'ipotesi di aggiungerle un bordo - o forse faresti addirittura meglio a cambiare del tutto l'immagine - perché se questa non mostra chiaramente di essere un link, vuol dire che non è efficace.

TESTO ALTERNATIVO
P uoi aggiungere un testo alternativo a un'immagine usando l'opzione
alt , come puoi vedere qui sotto:

<img src="cale.gif" alt="Questo è un testo che va con l'immagine" >

B isognerebbe sempre aggiungere testi alternativi alle immagini, in modo che gli utenti possano farsi un'idea dell'immagine prima che questa venga scaricata.

Q uesto è particolarmente importante se l'immagine è un link.

C i sono poche cose che irritano di più di voler lasciare la pagina corrente - e allo stesso tempo essere obbligati ad aspettare che un'immagine venga completamente scaricata prima di poterlo fare.

V iene allora quasi spontaneo adoperare i semplici comandi del browser e abbandonare l'intero sito.

ALLINEAMENTO
S i possono allineare le immagini in conformità con il testo che le circonda, usando i seguenti allineamenti:
·         default allinea l'immagine usando gli attributi di default del Web browser. E' come baseline.
·         left allinea l'immagine al margine sinistro e avvolge il testo che segue l'immagine.
·         right allinea l'immagine al margine destro e avvolge il testo che precede l'immagine.
·         top allinea la parte superiore dell'immagine con il testo intorno.
·         texttop allinea la parte superiore dell'immagine con la parte superiore del testo situato più in alto sulla linea.
·         middle allinea la parte mediana dell'immagine con il testo intorno.
·         absmiddle alinea l'immagine con il centro della linea corrente.
·         baseline allinea l'immagine con il baseline della linea corrente.
·         bottom allinea la parte inferiore dell'immagine con il testo intorno.
·         absbottom allinea l'immagine con la parte inferiore della linea corrente.
·         center allinea il centro dell'immagine con il testo intorno.