Una delle caratteristiche del linguaggio HTML è, come insito nel suo nome, l’essere ipertestuale. Con l’HTML, quindi, si supera il testo ed i documenti si arricchiscono di altri elementi come immagini ed elementi multimediali. In questa lezione vedremo come inserire un’immagine in un documento HTML attraverso l’utilizzo del tag <img>. Prima di vedere qual’è il markup HTML necessario per inserire un’immagine in una pagina web, tuttavia, è bene fare qualche premessa circa i file d’immagine e le caratteristiche che devono avere.
I formati delle immagini per il Web
I principali e più diffusi formati immagine utilizzati sul Web sono:
- GIF (adatto a loghi, bottoni e banner, e possono essere immagini animate, quindi in movimento)
- JPG (adatto alle foto, dato che si tratta di un formato ad alta risoluzione)
- PNG (molto portabile su tutte le piattaforme e meglio trattabile attraverso software di grafica).
Recentemente, al fine di ottimizzare i tempi di caricamento delle pagine web, sono stati introdotti nuovi formati d’immagine come WEBP e JPEG 2000, che garantiscono migliori livelli di compressione quindi un miglior rapporto tra peso e qualità dell’immagine. E’ bene precisare, tuttavia, che ad oggi il supporti per questi nuovi formati non è ancora universale, quindi non tutti i browser sono in grado di interpretarli correttamente.
Inutile, invece, utilizzare formati d’immagine diversi da quelli indicati in quanto il risultato potrebbe non essere quello aspettato: i browser, infatti, sono in grado di gestire solo i formati grafici per il Web. Non possono essere utilizzati, quindi, file nei formati PSD, BMP, TIFF, ecc.
Immagini e tempi di caricamento della pagina web
Negli ultimi anni la velocità di caricamento delle pagine web ha assunto un’importanza centrale, pertanto si rendono opportune alcune indicazioni qualora si desideri incorporare immagini all’interno delle proprie pagine web:
- E’ consigliabile utilizzare immagini non troppo pesanti in quanto potrebbero rallentare notevolmente il caricamento della pagina. Prima di pubblicare un’immagine all’interno di una pagina web, quindi, è consigliabile gestire con attenzione risoluzione e dimensione del file al fine di trovare un compromesso tra la qualità dell’immagine ed il suo peso.
- Un’altra raccomandazione importante riguarda il numero di immagini presenti all’interno di una pagina web: se è possibile inserire infinite immagini (non ci sono limiti in tal senso) è altrettanto vero che, di prassi, si cerca di non esagerare col numero di immagini presenti in un documento HTML. Anche in questo caso valgono le osservazioni già fatte circa i tempi di caricamento: un numero elevato di immagini, infatti, rischierebbe di rallentare la navigazione infastidendo l’utente (ed anche i motori di ricerca).
In conclusione: le immagini all’interno di una pagina web devono essere ben dimensionate (devono avere una grandezza coerente alle dimensioni con le quali verranno mostrate), devono essere ottimizzate (avere cioè un buon rapporto qualità/peso dell’immagine) e non essere in numero eccessivo.
Detto questo vediamo come inserire le immagini all’interno di un documento HTML utilizzando l’opportuno markup.
Il tag <img>
Al fine di inserire immagini all’interno delle pagine Web è necessario utilizzare il tag IMG.
Il tag <img> si dice vuoto, quindi non prevede l’omonimo tag di chiusura (non esiste quindi il corrispondente </img>).
L’attributo principale del tag IMG è src che è utilizzato per definire la URL dell’immagine che si vuole incorporare nella pagina: le immagini, infatti, sono dei file esterni alla pagina web che vengono visualizzate attraverso il collegamento al realtivo file. Altro attributo fondamentale è alt il quale è utilizzato per impostare un testo alternativo, ovvero una breve descrizione dell’immagine.
La sintassi di base del tag <img>, quindi, è la seguente:
<img src="nome-del-file.gif" alt="breve descrizione dell'immagine">L’attributo src
Per richiamare un immagine è necessario specificarne il percorso, cioè l’indirizzo univoco presso il quale si trova il file.
Il percorso dell’immagine può essere:
1) assoluto: l’immagine viene richiamata indicando il percorso web completo di protocollo e hostname, vediamo un esempio:
https://www.miosito.com/immagini/foto/tramonto.jpg
In questo caso abbiamo il protocollo (https://), l’hostname (www.miosito.com), il percorso locale (/immagini/foto/), il nome del file con tanto di estensione (tramonto.jpg).
Così facendo è possibile mostrare, all’interno di una qualsiasi pagina web, anche immagini fiscicamente disponibili all’interno di altri siti web.
2) relativo: l’immagine viene richiamata indicando il percorso locale riferito all’hostname corrente, vediamo un esempio:
/immagini/foto/tramonto.jpg
In questo modo abbiamo omosso protocollo e hostname, quindi l’immagine verrà cercata nello spazio web corrente.
Il primo carattere della nostra stringa è una slash (/) quindi il percorso sarà relativo alla directory radice del sito. Viceversa se avessimo omesso il percorso ed inserito solo il nome dell’immagine, questa sarebbe stata cercata nella posizione corrente.
N.B. Come detto nulla vieta di inserire all’interno delle nostre pagine delle immagini reperibili su altri siti web semplicemente indicandone la URL all’interno dell’attributo src. Il rischio di una simile prassi, tuttavia, è che l’immagine remota venga sostituita o cancellata con conseguenze spiacevoli (non solo da un punto di vista estetico) per la nostra pagina web. E’ anche possibile che il sito remoto adotti pratiche per impedire l’hotlinking delle immagini impoedendo, di fatto, che l’immagine possa essere incorporata su siti diversi da quello di origine.
L’attributo alt
Per quanto riguarda l’attributo alt è bene sottolinearne l’importanza: mediante questo attributo, infatti, viene definito un testo alternativo che sarà utile ogni qualvolta l’immagine – per una qualsiasi ragione – non possa essere visualizzata (ad esempio perchè rimossa o momentanemante non disponibile per un problema di connessione). L’attributo alt, inoltre, riveste una grande importanza dal punto di vista dell’accessibilità della pagina web da parte di utenti non vedenti nonché, cosa non secondaria, per una corretta ottimizzazione SEO dei contenuti (il valore dell’attributo alt è considerato, a tutti gli effetti, contenuto della pagina e come tale spiderizzabile dai motori di ricerca). Per maggiori informazioni sull’attributo alt si invita alla lettura di questo approfondimento.
Altri attributi del tag <img>
Altri attributi del tag img (oltre a src e alt già visti in precedenza) sono:
- border – imposta la dimensione (in pixel) dell’eventuale bordo all’immagine (0 = nessun bordo);
- width – imposta in modo esplicito la larghezza in pixel dell’immagine (facoltativo ma fortemente consigliato);
- height – imposta in modo esplicito l’altezza in pixel dell’immagine (facoltativo ma fortemente consigliato);
- hspace – imposta la distanza in orizzontale tra l’immagine ed altri elementi;
- vspace – imposta la distanza in verticale tra l’immagine ed altri elementi;
- align – imposta un allineamento dell’immagine;
- longdesc – consente di specificare una URL di un file HTML o TXT contenente la descrizione esaustiva dell’immagine (questo attributo completa la funzione di alt che, come detto, consente di inserire una sintetica descrizione dell’immagine ma è scarsamente supportato e poco utilizzato);
Considerazioni sugli attributi width e height
Questi attributi, come detto, sono facoltativi in quanto il browser è in grado di rilevare automaticamente le dimensioni delle immagini inserite nel codice HTML. Tuttavia, affinchè il browser possa conoscere le dimensioni dell’immagine è necessario che questa sia stata caricata completamente: sino a quel momento, quindi, l’immagine "non ha una dimensione".
Da un punto di vista visivo, quindi, potremmo vedere spostarsi gli elementi della pagina man mano che vengono caricate le immagini. Al fine di evitare questo fastidioso effetto è possibile dichiarare (mediante gli attributi width e height) le dimensioni delle immagini in modo tale che queste occupino, fin da subito, il loro giusto ingombro.
<img src="immagine.jpg" width="400" height="200">Produrrà questo risultato:
Questi attributi, infine, consentono anche di ridimensionare al volo un’immagine senza modificare il file originale. Si supponga ad esempio di avere una foto di 400 x 200 pixel ma di volerne pubblicare una miniatura. In questo caso le strade sono due: o creiamo una versione ridotta della foto oppure, tramite width e height, impostiamo dimensioni ridotte al file (le dimensioni esplicitate tramite i due attributi prevalgono sulle dimensioni reali dell’immagine).
<img src="immagine.jpg" width="200" height="100">Produrrà questo risultato:
E’ più frequente che il riproporzionamento dell’immagine avvenga mediante CSS mentre gli attributi width e height siano utilizzati per dichiarare le dimensioni originali del file.
Immagini con link
Un’immagine, ovviamente, può essere usata come link, ad esempio per creare dei bottoni grafici all’interno di un menu oppure per creare dei banner pubblicitari. La sintassi per collegare un link HTML ad un’immagine è la seguente:
<a href="pippo.html">
<img src="pippo.gif" alt="Pippo" border="0">
</a>In questo caso si consiglia di impostare il bordo dell’immagine a zero per evitare che il link faccia comparire un antiestetico e poco professionale bordo blu intorno all’immagine. Anche in questo caso è possibile agire con CSS, ovviamente.
Allineare un immagine
Il posizionamento delle immagini è strettamente dipendente dai contenuti che la circondano. Se l’immagine viene inserita dopo la chiusura di un paragrafo (<p>) o di un DIV (<div>) questa andrà a capo, posizionandosi sotto al contenuto inserito nel paragrafo o nel div.
Viceversa se l’immagine viene inserita all’interno di un flusso di testo, la sua disposizione nello spazio può essere governata mediante gli attributi align, hspace e vspace.
Mediante l’apposizione dell’attributo align l’immagine può essere allineata secondo criteri differenti a seconda del valore associato a tale attributo:
- left – l’immagine viene allineata alla sinistra del testo
- right – l’immagine viene allineata alla destra del testo
- top – il testo circostante viene allineato con il margine superiore destro dell’immagine
- middle – il testo circostante viene allineato con il centro dell’immagine
- bottom – il testo circostante viene allineato con il margine inferiore destro dell’immagine
Vediamo alcuni esempi:
<h1>Immagine allineata a sinistra</h1>
<p>
<img src="immagine.jpg" align="left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Accumsan sit amet nulla facilisi morbi tempus. Interdum consectetur libero id faucibus nisl tincidunt eget. Nisl suscipit adipiscing bibendum est ultricies integer quis auctor. Tortor at auctor urna nunc.
</p>Questo il risultato:
<h1>Immagine allineata a destra</h1>
<p>
<img src="immagine.jpg" align="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Accumsan sit amet nulla facilisi morbi tempus. Interdum consectetur libero id faucibus nisl tincidunt eget. Nisl suscipit adipiscing bibendum est ultricies integer quis auctor. Tortor at auctor urna nunc.
</p>Questo il risultato:
<h1>Immagine allineata in basso</h1>
<p>
<img src="immagine.jpg" align="bottom">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Accumsan sit amet nulla facilisi morbi tempus. Interdum consectetur libero id faucibus nisl tincidunt eget. Nisl suscipit adipiscing bibendum est ultricies integer quis auctor. Tortor at auctor urna nunc.
</p>Questo il risultato:
Utilizzando gli allineamenti visiti sopra può diventare utile l’aggiunta degli attributi vspace e hspace per gestire, rispettivamente, la distanza in verticale ed orizzontale rispetto al testo. Questi due attributi possono avere un valore numerico il quale corrisponde alla distanza in pixel che si desidera applicare. Con hspace la distanza viene applicata sia a destra che sinistra, con vspace la distanza viene applicata sia sopra che sotto. Vediamo gli esempi:
<h1>Immagine allineata a sinistra con distanza orizzontale</h1>
<p>
<img src="immagine.jpg" align="left" hspace="100">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Accumsan sit amet nulla facilisi morbi tempus. Interdum consectetur libero id faucibus nisl tincidunt eget. Nisl suscipit adipiscing bibendum est ultricies integer quis auctor. Tortor at auctor urna nunc.
</p>Questo il risultato:
<h1>Immagine allineata a sinistra con distanza verticale</h1>
<p>
<img src="immagine.jpg" align="left" vspace="100">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Accumsan sit amet nulla facilisi morbi tempus. Interdum consectetur libero id faucibus nisl tincidunt eget. Nisl suscipit adipiscing bibendum est ultricies integer quis auctor. Tortor at auctor urna nunc.
</p>Questo il risultato:
