Le immagini che possiamo inserire sono .gif , .jpg e png , formati compressi che permettono l'ottimizzazione delle immagini per utilizzi come quello , appunto , su internet .
Innanzitutto distinguiamo le caratteristiche salienti dei tre formati , che verranno comunque trattate in dettaglio in un prossimo articolo:
-- gif --
Questo formato permette di :
> salvare immagini trasparenti , cioé che siano adattabili a qualsiasi sfondo
> salvare animazioni , per esempio i banner che si vedono sono .gif
(esclusi quelli creati in flash)
Le limitazioni di questo formato sono principalmente il numero massimo di colori , 256
-- jpg --
Normalmente utilizzato per immagini fotografiche e/o con sfumature
complesse .
Questo formato permette di ottenere :
> un'altissima compressione dell'immagine che viene notevolmente
ottimizzata
> ampia possibilità di scelta di ottimizzazione , più dedico di
ottimizzare l'immagine più questa sarà piccola ma allo stesso tempo maggiori saranno i dettagli persi .
La limitazione sta nel fatto che quando viene ottimizzata l'immagine alcuni colori possono essere variati , e se uno di questi è quello di sfondo , nel momento in cui inseriremo l'immagine nella ns pagina il distacco sarà molto visibile .
-- png --
Riconosciuto solo dai browser con versione dalla 4.x in poi (ie, netscape,..) potrebbe essere paragonato al formato jpg
Ora vediamo come si inserisce la ns immagine che sarà questa :
magnify.gif
| Tag | Esempio | Risultato | | <img src="nomefile immagine"> | <img src="magnify.gif"> |
|
Alcuni attributi di questo tag :
| Tag | Note |
Esempio | Risultato |
| alt="descrizione" |
Testo che verrà visualizzato quando l'utente passa sopra la ns immagine | <img src="magnify.gif"
alt="Descrizione esempio"> |
| | border="valore" | determina lo spessore del bordo intorno ad un'immagine (in pixel) |
<img border="2"
src="magnify.gif" alt="Descrizione esempio"> |
|
height="altezza" width="larghezza" |
Specifica la dimensione (larghezz x altezza)
dell'immagine , in questo modo in fase di caricamento il browser riserva questo spazio per l'immagine , facendo anche sembrare il download più veloce. | <img border="2" src="magnify.gif" alt="Descrizione esempio" width="20" height="19"> |
|
Ricordiamo che gli attributi sono facoltativi e che è possibile inserire più attributi contemporanemaente, come nel secondo esempio .
Per l'allineamento dell'immagine vi rimandiamo all'articolo che parla della formattazione delle pagine . |
