Gestione delle immagini in HTML

Ultimo aggiornamento lunedì 30 ottobre 2017 à 21:00 da Claudia Scarciolla.

Le immagini possono rendere un sito web più attraente e conviviale, tuttavia è importante non esagerare dato che le immagini possono implicare un tempo di caricamento piuttosto lungo e possono in alcuni casi nuocere alla leggibilità.

Come visualizzare delle immagini su una pagina web
Come visualizzare delle immagini su una pagina web
Testo che include un'immagine
Le immagini reattive ("immagini MAP")

Come visualizzare delle immagini su una pagina web

Il tag IMG del linguaggio HTML permette di inserire delle immagini in una pagina HTML. L'immagine può essere posta sullo stesso server della pagina nella quale è inserita ma anche su un altro server specificando il suo URL completo. Soltanto i seguenti formati di immagini sono accettati come standard dal Worldwide Web Consortium (W3C):

Le immagini JPEG (.jpg), le immagini con molti colori saranno ben compresse, così da prendere meno spazio, e quindi necessitare di un tempo di caricamento minore);

Le immagini PNG, la loro dimensione è piccola nel caso di immagini con pochi colori e toni uniformi, questo formato permette inoltre di avere delle immagini visualizzate progressivamente con una profondità di colori a 24 bits e delle immagini di cui si definisce un colore come trasparente;

Le immagini GIF, esse hanno le stesse caratteristiche delle immagini PNG, tranne per il fatto di essere limitate a massimo 256 colori e che questo formato non è totalmente libero.

Come visualizzare delle immagini su una pagina web

Gli attributi principali del tag IMG sono i seguenti:

SRC, indica la posizione dell'immagine (è obbligatorio);

ALIGN, specifica l'allineamento dell'immagine rispetto al testo adiacente. Può avere i valori: TOP, MIDDLE, e BOTTOM (sopra, in mezzo e sotto);

ALT, permetti di visualizzare un testo alternativo quando l'immagine non viene visualizzata;

TITLE, permette di visualizzare un pop-up (finestra di informazioni, dialogo) al momento del passaggio del cursore sull'immagine;

WIDTH, permette di specificare la larghezza dell'immagine;

HEIGHT, permette di specificare l'altezza dell'immagine.

Quindi per inserire un'immagine bisognerà digitare un tag di questo tipo:

<IMG SRC="url_dell_image"
 ALT="Testo sostitutivo all'immagine"
 TITLE="Testo da visualizzare">

Attributo	Valore	Risultato	Effetto visivo
ALIGN	bottom center left middle top right	Allineamento dell'immagine
ALT		Testo alternativo all'immagine nel caso in cui l'immagine non si visualizza
BORDER	Numero intero	Numero di pixel del bordo. Il colore del bordo può essere definito dall'attributo LINK o TEXT del tag <BODY>. Per default l'attributo BORDER vale 1, il che crea una piccola cornice intorno all'immagine. Per non avere questo problema pensate di definirlo come uguale a 0.
HEIGHT	Numero intero	Altezza della linea (in pixel o in %). Quando questo attributo precisa una dimensione diversa dall'originale del grafico, il navigatore la ridimensiona in modo dinamico, cosa che può provocare una visualizzazione di minore qualità.
HSPACE	Numero intero	Numero di pixel di adattamento tra l'immagine e il testo adiacente (orizzontalmente).	Testo
LONGDESC		URL della descrizione dell'immagine.
LOWSRC	URL	Immagine alternativa (generalmente più piccola) visualizzata mentre la vera sia caricata dal navigatore.
NAME		Permette di definire un nome per l'immagine. Questo attributo è utile soprattutto per la gestione delle immagini in JavaScript.
SRC	URL	URL dell'immagine
TITLE		Testo alternativo nel caso in cui l'immagine non si visualizza
USEMAP		URL o nome dell'ancoraggio che definisce l'immagine reattiva.
VSPACE		Numero di pixel di adattamento tra l'immagine e il testo (verticalmente).	Prova di testo
WIDTH	Numero intero	Larghezza dell'immagine (in pixel o in %). Quando questo attributo precisa una dimensione diversa dall'originale del grafico, il navigatore la ridimensiona in modo dinamico, cosa che può provocare una visualizzazione di minore qualità.

Testo che include un'immagine

Le immagini si inseriscono nel testo come un carattere, così sembra possibile far scorrere del testo lungo un'immagine. Esistono in effetti più possibilità, vediamone due:

La prima consiste nel creare una tabella con una linea e due colonne, nelle quali mettiamo l'immagine e il testo;

La seconda (meno precisa) consiste nell'allineare l'immagine a sinistra o a destra con l'attributo ALIGN e poi inserire il suo testo. Per bloccare questa inclusione basta usare l'attributo CLEAR.

Le immagini reattive ("immagini MAP")

È possibile creare delle zone cliccabili anche all'interno di un'immagine con l'attributo USEMAP usato congiuntamente al tag MAP. L'attributo USEMAP del tag <IMG> punta verso un tag <MAP> che contiene la descrizione della divisione dell'immagine in zone cliccabili.

Il tag <MAP> ha un attributo NAME che definisce il suo nome (NAME="nome") e contiene le zone cliccabili dichiarate grazie ai tag AREA:

Tag	Attributo	Valore	Effetto visivo
MAP	NAME
AREA	SHAPE	RECT CIRCLE POLY	Rettangolo (le sue coordinate sono: "ascissa sup sinistra, ordinata sup sinistra, ascissa inf destra, ordinata inf destra") Cerchio (le sue coordinate sono: "ascissa centro, ordinata centro, raggio") Poligono (le sue coordinate sono: "il resto delle coordinate separate da virgole")
	HREF	URL	Link verso l'URL
	COORDS	"XX,XX,XX,XX"	Contiene le coordinate della zona cliccabile, separate da virgole.

Qui sotto un esempio di immagine reattiva :

<IMG SRC="immagini/immagine.gif"
 WIDTH=150
 HEIGHT=70
 USEMAP="#Map">
<MAP NAME="Map">
 <AREA SHAPE="rect"
     HREF="inizio.html"
     COORDS="0,0,48,28">
<AREA SHAPE="circle"
     HREF="precedente.html"
     COORDS="50,30,10">
<AREA SHAPE="poly"
     HREF="seguente.html"
     COORDS="60,50,80,30,100,40,50,100">
</MAP>