Laboratorio di Tecnologie Web
HTML: Immagini
Dott. Stefano Burigat
www.dimi.uniud.it/burigat
Aggiungere immagini
E' possibile inserire immagini all'interno delle pagine web
in due modi: come contenuto inline o come immagini di
background. La seconda modalità dovrebbe essere utilizzata
in tutti i casi in cui dobbiamo inserire immagini a scopo
decorativo piuttosto che come contenuto vero e proprio
delle pagine e dovrebbe essere implementata tramite
l'utilizzo di CSS (ciò consente di rendere il codice html più
pulito e facilitare la modifica dello stile delle pagine; ne
parleremo più avanti).
Per poter essere riconosciute dai browser e visualizzate in
una pagina web, le immagini dovrebbero essere salvate nei
formati raster GIF, JPEG, PNG oppure nel formato
vettoriale SVG (jpeg è preferibile per immagini complesse
come le foto, svg o png sono preferibili per immagini come
loghi o simili, svg non è supportato da IE8 e precedenti). E'
quindi necessario convertire eventuali immagini salvate in
altri formati. Se si vuole invece mantenere tali immagini nel
loro formato originario e fornirle all'utente, si può rendere
l'immagine accessibile tramite link, come nell'esempio
seguente. In tal caso, l'immagine viene scaricata come file
sul computer dell'utente o aperta all'interno del browser se
questo è dotato di apposito plugin per la sua
visualizzazione.
<!DOCTYPE html>
<html>
<head>
<title>
Tecnologie web
</title>
</head>
<body>
<article>
<h1>HTML5</h1>
<p>L'HTML5 è un <a
href="http://it.wikipedia.org/wiki/Linguaggio_di_markup">lingu
aggio di markup</a> per la strutturazione delle pagine
web...</p>
<aside>
<p><a href="tree.xcf">Scarica mappa del
sito</a></p>
</aside>
</article>
</body>
</html>
L'elemento <img>
L'elemento che viene utilizzato per inserire immagini inline
è l'elemento vuoto <img>. Tale elemento è un cosiddetto
elemento rimpiazzato (replaced) in quanto le immagini non
vengono specificate direttamente nel codice sorgente come
contenuto (come succede per il testo) ma ne viene inserito
un riferimento tramite l'utilizzo dell'attributo “src” (la
sintassi per la specifica del riferimento è la stessa utilizzata
per i link). Sarà poi il browser ad occuparsi di sostituire il
riferimento con l'immagine vera e propria quando dovrà
visualizzare la pagina. Normalmente, i riferimenti sono
relativi ad immagini presenti sullo stesso server del sito ma
è possibile anche creare riferimenti ad immagini presenti su
altri siti utilizzando un URL assoluto (anche se in questo
caso è necessario avere il permesso per poterlo fare).
Poichè <img> è un elemento inline, esso non causa
un'interruzione di riga e quindi le immagini, di default,
vengono inserite all'interno del flusso del testo, con il loro
margine inferiore allineato con la baseline del testo (la linea
di base, o baseline, è la linea sulla quale la maggior parte
delle lettere si allineano verticalmente ed oltre la quale si
estendono i tratti discendenti). Se si vuole posizionare
un'immagine in modo diverso o modificarne aspetti come i
bordi è necessario utilizzare CSS.
L'esempio seguente inserisce due immagini all'interno di un
paragrafo di testo.
<!DOCTYPE html>
<html>
<head>
<title>
Tecnologie web
</title>
</head>
<body>
<article>
<h1>HTML5</h1>
<p>L'HTML5 <img src="imgs/html5.png" alt="" /> è un
linguaggio di markup per la strutturazione delle pagine web
mentre CSS <img src="imgs/css3.png" alt="" /> è un linguaggio
usato per definire la formattazione delle pagine web.</p>
<aside>
<p><a href="glossario.html">Vai al
glossario</a></p>
</aside>
</article>
</body>
</html>
Quando il browser incontra un elemento <img>, effettua
una richiesta al server per poter scaricare il file. Ciò implica
che in particolari situazioni (di solito, quando si sta
accedendo al sito tramite una connessione lenta) l'utente si
accorga del caricamento progressivo delle risorse. Per
ovviare a tale problema è consigliabile evitare di riempire i
siti di troppe immagini o di immagini troppo grandi. Inoltre,
se si vuole visualizzare la stessa immagine più volte, anche
in pagine differenti, si dovrebbe utilizzare sempre link allo
stesso file sul server (e non link a diverse copie della stessa
immagine) in modo che il browser possa sfruttare il caching
delle immagini senza doverne scaricare copie multiple.
Oltre all'attributo <src>, è obbligatorio inserire all'interno
dell'elemento <img> anche l'attributo “alt” che serve a
fornire una breve descrizione dell'immagine nei casi in cui
l'immagine non possa essere vista (ad esempio, per accessi
tramite screen reader, quando la visualizzazione delle
immagini è disabilitata, nel caso in cui l'immagine non sia
disponibile, quando il sito viene analizzato da un motore di
ricerca). Se l'immagine non aggiunge nulla di significativo
al contenuto testuale, è preferibile lasciare vuoto il valore
dell'attributo “alt” come è stato fatto nell'esempio
precedente (notate che non ci deve essere alcuno spazio
all'interno delle virgolette). Tenete presente che il modo in
cui viene gestito l'attributo “alt” quando l'immagine non è
disponibile non è coerente tra i diversi browser. Ad
esempio, Chrome e Safari visualizza un'icona di immagine
assente, Internet Explorer un'icona accompagnata dal valore
dell'attributo, Firefox solo il valore dell'attributo. Questo
diverso comportamento può creare effetti non voluti
(soprattutto nel caso di Firefox in cui il testo dell'attributo si
mescola con il testo del contenuto).
In certi casi, ad esempio per quanto riguarda diagrammi o
grafici, ci potrebbe essere la necessità di associare una
descrizione più lunga di quanto fornito normalmente
tramite l'attributo “alt”. Nelle versioni di HTML precedenti
alla 5, esisteva l'attributo “longdesc” che poteva essere
utilizzato a tale scopo. In HTML5, si può usare l'elemento
<figcaption> (insieme a <figure>) per fornire tali
informazioni ma la soluzione migliore è quella di inserire
tutte le informazioni che servono direttamente nel
contenuto testuale della pagina (o, al limite, creare un link
ad un documento descrittivo).
Al link http://webaim.org/techniques/alttext/ potete trovare
una discussione approfondita su come è meglio utilizzare
l'attributo “alt” in funzione del contenuto e della funzione
della relativa immagine.
L'elemento <img> supporta anche l'attributo “title” che
permette di inserire del testo che verrà visualizzato in un
tooltip quando l'utente passerà con il puntatore del mouse
sopra l'immagine.
<!DOCTYPE html>
<html>
<head>
<title>
Tecnologie web
</title>
</head>
<body>
<article>
<h1>HTML5</h1>
<p>L'HTML5 <img src="imgs/html5.png" alt=""
title="Logo ufficiale di HTML5" /> è un linguaggio di markup
per la strutturazione delle pagine web ...</p>
</article>
</body>
</html>
Dimensioni di un'immagine
Di default, un browser visualizza un'immagine con le sue
dimensioni originali. Se un'immagine è di 128 per 128
pixel, quello sarà lo spazio che l'immagine occuperà nella
finestra del browser. E' però possibile utilizzare due attributi
dell'elemento <img>, “width” ed “height”, per specificare
quanto dovrà occupare l'immagine a schermo
rispettivamente in larghezza ed altezza. Utilizzare
correttamente tali attributi può portare ad un caricamento
ottimale di una pagina. Questo a causa del modo in cui i
browser creano le pagine: come detto in precedenza,
quando un browser incontra un elemento <img> fa una
richiesta al server per la relativa immagine e intanto va
avanti a visualizzare il resto del contenuto; quando poi
l'immagine arriva, il browser può calcolare la dimensione
dell'immagine ma deve ridisegnare la pagina per inserire
tale contenuto e spostare tutto ciò che appariva in seguito
(creando problemi all'utente che nel frattempo aveva
iniziato a leggere il contenuto). Se invece vengono
specificati “width” ed “height”, un browser sa già quanto
spazio deve riservare all'immagine e non ha quindi bisogno
di ridisegnare la pagina quando l'immagine arriva dal
server.
Il modo corretto di specificare “width” ed “height” è quello
di inserire i valori esatti dell'immagine originale. Sebbene
tali attributi possano essere utilizzati per ridimensionare
un'immagine, ad esempio per realizzare delle miniature
delle immagini, ciò non è consigliabile. Se l'immagine
originale è più piccola dei valori inseriti, il risultato può
essere un'immagine sfocata o pixellosa. Se l'immagine
originale è più grande delle dimensioni inserite, si spreca
tempo e banda per scaricare dati che non verranno utilizzati.
In entrambi i casi, inoltre, il browser deve effettuare delle
operazioni costose dal punto di vista computazionale di
scalatura delle immagini. Se poi non si mantengono le
proporzioni dell'immagine originale, quella visualizzata
risulta deformata. Se necessario, è quindi preferibile
ridimensionare un'immagine esternamente con appositi
strumenti di elaborazione delle immagini e poi specificare
nel codice html le dimensioni corrette.
<!DOCTYPE html>
<html>
<head>
<title>
Tecnologie web
</title>
</head>
<body>
<article>
<h1>HTML5</h1>
<p>Immagine originale: <img src="imgs/html5.png"
alt="logo HTML5" width="128" height="128"/></p>
<p>Immagine rimpicciolita: <img src="imgs/html5.png"
alt="logo HTML5" width="64" height="64"/></p>
<p>Immagine ingrandita: <img src="imgs/html5.png"
alt="logo HTML5" width="256" height="256"/></p>
<p>Immagine deformata: <img src="imgs/html5.png"
alt="logo HTML5" width="256" height="128"/></p>
</article>
</body>
</html>
NOTA: le indicazioni del paragrafo precedente sull'effetto
negativo di specificare dimensioni diverse da quelle
dell'immagine originale non si applicano (ad eccezione
della deformazione) al caso delle immagini svg in quanto il
contenuto di tali immagini è specificato in modo
matematico e ciò porta a poterne variare le dimensioni
senza compromissione della qualità.
NOTA: l'utilizzo di width ed height è appropriato se si sta
creando un'unica versione di una pagina con immagini di
dimensione fissa ma non lo è nel caso in cui si voglia creare
più versioni di una pagina (ad esempio, per dispositivi
diversi) in cui la dimensione delle immagini può essere
diversa.
Immagini come link
Un'immagine può essere trasformata in link semplicemente
includendo l'elemento <img> all'interno di un elemento <a>
che specifica la risorsa a cui il browser dovrà accedere
quando l'utente cliccherà sull'immagine.
<!DOCTYPE html>
<html>
<head>
<title>
Tecnologie web
</title>
</head>
<body>
<article>
<h1>HTML5</h1>
<p>L'HTML5 <a
href="http://it.wikipedia.org/wiki/HTML5"><img
src="imgs/html5.png" alt="Link alla pagina Wikipedia su HTML5"
title="Logo ufficiale di HTML5" /></a> è un linguaggio di
markup per la strutturazione delle pagine web ...</p>
</article>
</body>
</html>
E' anche possibile associare dei link a specifiche parti di
un'immagine, creando le cosiddette “image maps”. Per far
ciò sono necessari diversi diversi passaggi ed elementi.
Per prima cosa bisogna creare l'image map utilizzando
l'elemento <map>. L'unica cosa che è necessario specificare
per tale elemento è un nome che identifichi univocamente
l'image map. Ciò si effettua utilizzando gli attributi “id” e
“name”, entrambi i quali devono avere come valore il nome
univoco scelto (sebbene solo l'attributo “name” sia
obbligatorio in HTML5, tale duplicazione è necessaria per
mantenere la compatibilità con tutti i browser).
<map id="mappa01" name="mappa01"></map>
All'interno dell'elemento <map> vanno inseriti tanti
elementi vuoti <area> quante sono le aree cliccabili
dell'immagine. Tali aree non dovrebbero sovrapporsi (se si
sovrappongono, ha la precedenza l'area definita per prima).
Attraverso l'elemento <area>, vengono specificati tre
attributi fondamentali: “href” determina la risorsa a cui si
accede quando si clicca su quell'area dell'immagine,
“shape” determina il tipo di forma dell'area, “coords”
specifica le esatte dimensioni dell'area. Inoltre, così come
<img> anche <area> richiede la presenza dell'attributo “alt”
per specificare del testo alternativo all'area dell'immagine.
L'esempio seguente mostra la definizione di un'area
rettangolare.
<area shape="rect" coords="135,304,220,370" alt="Area
rettangolare" href="http://it.wikipedia.org/wiki/Rettangolo"
/>
L'attributo “shape” supporta tre tipi di forme, aree
rettangolari (valore rect, come nell'esempio), aree circolari
(valore circle) e poligoni generici (valore poly). Per capire
come vanno inserite le coordinate di tali aree bisogna
considerare che l'angolo in alto a sinistra di un'immagine ha
coordinate (0,0) mentre l'angolo in basso a destra ha
coordinate (larghezza immagine, altezza immagine). La
coordinata x quindi cresce da sinistra verso destra e quella y
dall'alto verso il basso. Come mostrato nell'esempio
precedente le coordinate vengono inserite come una lista di
numeri separati da virgole. Per le aree circolari devono
essere specificati la coordinata x del centro, la coordinata y
del centro ed il raggio del cerchio. Per i rettangoli, è
sufficiente inserire le coordinate x ed y dell'angolo in alto a
sinistra seguite dalle coordinate x ed y del punto in basso a
destra. Per i poligoni generici, bisogna inserire la sequenza
di coordinate x ed y di ogni punto del poligono.
Una volta specificate le aree cliccabili dell'immagine,
bisogna aggiungere l'attributo “usemap” all'elemento
<img> che specifica l'immagine a cui associare l'image
map. Il valore di tale attributo deve essere uguale al valore
dell'attributo “name” dell'image map preceduto dal simbolo
#.
<!DOCTYPE html>
<html>
<head>
<title>
Tecnologie web
</title>
</head>
<body>
<article>
<h1>Mappa cliccabile dell'Italia</h1>
<p>
<img src="imgs/italia.jpg" width="400"
height="497" usemap="#mappa01" />
<map id="mappa01" name="mappa01">
<area shape="poly"
coords="105,129,102,132,116,148,108,155,87,220,153,225,157,214
,164,209,169,200,171,187,177,183,171,175,179,167,160,154,162,1
47,154,142,144,150,130,147" alt="Toscana"
href="http://it.wikipedia.org/wiki/Toscana" />
<area shape="rect" coords="135,304,220,370"
alt="Rettangolo"
href="http://it.wikipedia.org/wiki/Rettangolo" />
<area shape="circle" coords="315,99,34"
alt="Cerchio" href="http://it.wikipedia.org/wiki/Cerchio" />
</map>
</p>
</article>
</body>
</html>
