Inserire le immagini

17 marzo 2006

Finora abbiamo visto come inserire e formattare il testo all’interno delle nostre pagine Web. Naturalmente possiamo inserire anche delle immagini: diagrammi e grafici, fotografie, e in genere immagini create con un programma di elaborazione grafica (come GIMP o Photoshop).

Il codice

La sintassi per inserire una immagine è:

<img src="http://miosito.it/miaImmagine.gif" alt="testo" />

Esaminiamo il significato delle keyword principali:

KeywordDescrizione
imgAbbreviazione di “image” (immagine), è il nome del tag per inserire le immagini
srcSta per “source” (origine), è il percorso (URL) in cui il browser troverà il file da mostrare
altÈ il “testo alternativo”, ovvero il testo che appare se, per qualche motivo, il browser non riesce a mostrare l’immagine. Possiamo anche omettere questo attributo, ma risulta utile per l’accessibilità e per i motori di ricerca

Il tag <img /> è un tag senza un contenuto, per questo non ha un elemento </img> di chiusura: lo chiudiamo utilizzando lo slash (“/”) prima della parentesi angolare.

I formati di immagine per il Web

I formati ammessi nel Web sono sostanzialmente tre:

FormatoDescrizione
GIF(Graphic Interchange Format): le immagini GIF hanno una tavolozza che non supera i 256 colori, per questo vengono utilizzate spesso per grafici o icone.
È possibile ottimizzare il peso questo tipo di file riducendo ancora il numero di colori. Oltre a questo GIF ci consente di impostare trasparenze nelle immagini e di creare piccoli banner, questo formato consente infatti di rappresentare anche semplici animazioni (GIF animate)
JPG (o JPEG) È l’acronimo del gruppo di ricerca che ha ideato questo formato (il Joint Photographic Experts Group), idoneo per le immagini di qualità fotografica
PNG (Portable Network Graphic). Il PNG è un tipo di immagine introdotto più recentemente, elaborato dal W3C per risolvere i problemi di copyright del formato GIF (che è invece proprietario); tuttavia oggi il PNG è letto oramai da tutti i browser e offre alcune caratteristiche che gli altri formati non hanno (come il supporto al canale alfa, caratteristica questa non ancora perfettamente supportata da ogni browser). PNG permette sia di rappresentare immagini di qualità fotografica (PNG24), sia di ottimizzare colori in modo simile a GIF (PNG8 – 256 colori)

Inutile provare dunque a inserire un file “.psd” (formato nativo di Photoshop) all’interno della vostra pagina HTML: con grande probabilità il browser non caricherà il file (dovete infatti prima convertire il file in uno dei formati sopra-indicati).

È importante ricordare che il codice HTML fornisce delle indicazioni al browser su come visualizzare il testo e le immagini – ed eventualmente i video e i suoni – all’interno della pagina: il testo (come abbiamo visto) è scritto direttamente nel file HTML, le immagini invece sono caricate insieme alla pagina.

Attenzione dunque a non inserire immagini troppo pesanti (ricordatevi di ottimizzare sempre i file); bisogna evitare inoltre di sovraccaricare la pagina con troppe immagini. Un peso eccessivo rende le pagine lente da caricare e questo può diventare un problema sia per gli utenti, sia per i motori di ricerca.

Per ottenere un sito web dalla grafica accattivante, spesso è sufficiente giocare con i colori dello sfondo e delle scritte.

>> Leggi come ottimizzare le immagini con Photoshop, i formati più usati nell’era del mobile

Esempi, percorsi relativi e assoluti

Ecco ad esempio come inserire il logo di HTML.it in una pagina dallo sfondo blu (si presuppone che il logo si trovi nella stessa cartella del file HTML):

CodiceRisultato
<img src="logo.gif" />

Resta valido il discorso sui percorsi relativi ed assoluti visto in precedenza. Avremo ad esempio:

<img src="../img/logo.gif" />
<img src="http://www.html.it/img/logo.gif " />

Dal momento che il browser normalmente non sa quali siano le dimensioni dell’immagine, finché questa non sia caricata completamente, è un’ottima abitudine quella di indicare già nel codice la larghezza (width) e l’altezza (height) dell’immagine: in questo modo si evita di vedere la pagina costruirsi man mano che viene caricata, poiché stiamo dando al browser un’idea dell’ingombro. Ad esempio:

<img src="logo.gif" width="224" height="69" />

L’attributo alt è utile per specificare il testo alternativo (alternative text), fintanto che l’immagine non viene caricata o nel caso in cui non lo sia affatto:

CodiceRisultato
<img src="logo.gif" alt="HTML.it" width="224" height="69" /> HTML.it

L’attributo alt è di estrema utilità per rendere il sito accessibile a tutti gli utenti: i disabili che non sono in grado di vedere nitidamente le immagini sullo schermo potrebbero avere delle difficoltà, nel caso in cui l’attributo alt non sia specificato.

Gli ipo-vedenti e i non-vedenti sono infatti in grado di comprendere il contenuto delle immagini grazie a dei software appositi (gli screen reader) che “leggono” lo schermo tramite un programma di sintesi vocale. Non specificare il testo alternativo significa rendere impossibile la navigazione.

Nel caso in cui la spiegazione dell’immagine sia particolarmente lunga, è possibile espandere la descrizione sintetica – fornita tramite l’attributo “alt” – grazie ad un altro attributo: si tratta di longdesc (long description), che permette di specificare un file con una spiegazione estesa dell’immagine. Ecco la sintassi:

<img src="logo.gif" alt="HTML.it" longdesc="descrizione.html" width="224" height="69" />

Nell’esempio allegato è possibile visualizzare il codice di una pagina con la descrizione estesa dell’immagine. Nel caso in cui si utilizzi questo attributo è anche buona norma utilizzare un link esplicito alla pagina della descrizione.

longdesc dovrebbe essere utilizzato soprattutto nel caso in cui si usino delle immagini mappate (argomento che analizzeremo in seguito), in modo da fornirne una spiegazione esauriente in ogni contesto.

In realtà l’attributo alt non serve, come molti credono, a visualizzare un etichetta esplicativa dell’immagine nel caso in cui il cursore del mouse si soffermi sopra essa: questo semmai è un effetto collaterale che si verifica con Internet Explorer. L’attributo corretto per far visualizzare un testo che commenti l’immagine è infatti title:

CodiceRisultato
<img src="logo.gif" title="HTML.it" alt="HTML.it" width="224" height="69" /> HTML.it

È inoltre possibile specificare la grandezza (in pixel) del bordo attorno all’immagine:

CodiceRisultato
<img src="logo.gif" border="3" width="224" height="69" /> figura

Immagini con i link

Si noti che i link per default lasciano sempre un bordo di un pixel attorno all’immagine (il colore sarà quello espresso nel body dall’attributo link, oppure quello default – quindi blu – se non specificato altrimenti):

CodiceRisultato
<a href="http://www.html.it" target="_blank"><img src="logo.gif" width="224" height="69" /></a> figura

Dunque, nel caso dei link se non si desidera avere i bordi, sarà necessario impostarli a “0″:

CodiceRisultato
<a href="http://www.html.it" target="_blank"><img src="logo.gif" border="0" width="224" height="69" /></a> figura
Tutte le lezioni

1 ... 25 26 27 ... 63

Se vuoi aggiornamenti su Inserire le immagini inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Inserire le immagini

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy