Gestione delle immagini in HTML

Novembre 2016
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

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">


AttributoValoreRisultatoEffetto visivo
ALIGNbottom
center
left
middle
top
right
Allineamento dell'immagine 
ALT Testo alternativo all'immagine nel caso in cui l'immagine non si visualizza 
BORDERNumero interoNumero 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.
HEIGHTNumero interoAltezza 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à.
HSPACENumero interoNumero di pixel di adattamento tra l'immagine e il testo adiacente (orizzontalmente).
Testo
LONGDESC URL della descrizione dell'immagine. 
LOWSRCURLimmagine 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. 
SRCURLURL 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
WIDTHNumero interoLarghezza 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:

TagAttributoValoreEffetto visivo
MAPNAME  
AREASHAPERECT



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")

HREFURLLink 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>

Potrebbe anche interessarti :

Managing images in HTML
Managing images in HTML
Administración de imágenes en HTML
Administración de imágenes en HTML
Images en HTML
Images en HTML
Gestão das imagens em HTML
Gestão das imagens em HTML
API
API
Il documento intitolato « Gestione delle immagini in HTML » da CCM (it.ccm.net) è reso disponibile sotto i termini della licenza Creative Commons. È possibile copiare, modificare delle copie di questa pagina, nelle condizioni previste dalla licenza, finché questa nota appaia chiaramente.