Gestione delle immagini in HTML

Maggio 2015

Come visualizzare delle immagini su una pagina web?

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à.

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.

Seuls les formats d'images suivants sont acceptés en standard dans les spécifications du 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 caricameno 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 popup (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")

E' 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>
Per poter consultare questo documento offline, ne potete scaricare gratuitamente una versione in formato PDF:
Gestione-delle-immagini-in-html .pdf

Vedi anche


Managing images in HTML
Managing images in HTML
Administración de imágenes en HTML
Administración de imágenes en HTML
Verwaltung der Bilder unter HTML
Verwaltung der Bilder unter HTML
Images en HTML
Images en HTML
Gestão das imagens em HTML
Gestão das imagens em HTML
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.