Html: le immagini
- Maggio 28, 2011
- by
- Donatantonio
Fino ad ora si è concentrata l’attenzione alla formattazione del testo, quindi paragrafi, titoli e contenitori di testo, consapevoli che il moderno web non mette a disposizione solo questo tipo di informazioni.
Siamo lontani dai siti web dei primissimi anni ’90, quando le pagine erano composte totalmente da testo, oggi è impensabile non visualizzare in una pagina web un’immagine, un video o qualche altro elemento grafico.
Per inserire un’immagine in una pagina html si utilizza il tag <img>. La sintassi per inserire un’ipotetica immagine è:
<img src=‘immagini/foto.jpg’ />
Il tag <img> si compone essenzialmente di un attributo obbligatorio src, che indica l’url dell’immagine da visualizzare.
In fase di visualizzazione quando il browser incontra il tag img, analizza l’url associato e carica l’immagine, ponendola all’interno della pagina dove questa è stata definita dallo sviluppatore.
Il seguente codice HTML descrive in maniera completa l’inserimento di un immagine in una pagina html:
<html>
<head>
<title>IMMAGINI</title>
</head>
<body>
<div>La nostra prima immagine : </div>
<!-- INSERISCO L’IMMAGINE logo.jpg -->
<img src=‘img/logo.jpg’ />
</body>
</html>
Il risultato nel browser è il seguente:
Non avendo specificato allineamento e altri attributi, l’immagine viene stampata a sinistra e dopo l’elemento che lo precede nel codice (nel nostro caso il div che contiene il testo).
I formati per le immagini web.
Nonostante non siano definiti in maniera precisa i formati ammissibili per le immagini è bene sottolineare che nella scelta del formato va tenuta in grande considerazione la pesantezza dell’immagine (espressa in byte).
I formati più indicati per il web sono sostanzialmente tre:
Indipendentemente dal formato utilizzato è importante ricordare che abusare delle immagini incide negativamente sulle prestazioni del browser. Difatti caricare una pagina html con molte immagini richiede un tempo maggiore rispetto ad una pagina con testo e poche immagini.
Una volta scelte le immagini da inserire queste vanno ottimizzate, regolando la dimensione e il formato. La regola alla quale attenersi per scegliere il formato corretto è riassunta di seguito:
- se bisogna inserire una foto allora scegliamo il formato jpg;
- se bisogna inserire un logo o un disegno scegliamo il formato gif o png.
L’attributo ALT e le regole di accessibilità.
Un aspetto importante di cui tener conto è che non tutti i browser visualizzano le immagini presenti in una pagina html, o ad esempio per scelta un utente potrebbe non visualizzare le immagini.
Alcuni utenti, quali gli ipovedenti, non sono in grado di mettere a fuoco del tutto le immagini inserite nelle pagine web, i non vedenti sono del tutto esclusi anche da questa pur limitata possibilità; altri ancora utilizzano browser che non supportano immagini e interpretano solamente i testi contenuti nelle pagine stesse.
Pensare di creare pagine web alternative a quelle che utilizzano le immagini significherebbe di fatto discriminare tali utenti da una completa fruizione di tutto ciò che di positivo spesso riserva la rete.
Fornire invece un testo equivalente per le immagini garantisce in tutti i casi sopraelencati l’accessibilità, oltre a essere utile indistintamente a tutti gli utenti: si tratta in ogni caso di un elemento irrinunciabile per assicurare sempre e comunque accessibilità alle immagini inserite in una pagina web.
L’attributo ALT permette appunto di definire un testo da visualizzare in assenza dell’immagine.
<img src=‘img/logo.jpg’ alt=‘Il logo del corso HTML’ />
Seppur non obbligatorio come attributo, l’uso dell’attributo alt è opportuno sulle principali immagini incluse in una pagina, in modo particolare nel caso in cui l’immagine rappresenta un prodotto, un servizio, o comunque un elemento relativo alla pagina.
Utilizzando l’attributo alt si potrà notare come in Internet Explorer il testo venga visualizzato anche in presenza dell’immagine qualora l’utente trascini su di essa il puntatore del mouse; negli altri browser invece il testo viene visualizzato solo in assenza dell’immagine.
Altezza e larghezza delle immagini.
Gli attributi width e height possono essere usati per impostare l’altezza e la larghezza di una immagine. Per impostare l’altezza e la larghezza viene usato, solitamente, un valore in pixel.
A differenza dei centimetri, i pixel sono unità di misura relative che dipendono dalla risoluzione dello schermo. Ad un utente con uno schermo ad alta risoluzione, 25 pixel possono corrispondere ad 1 centimetro, mentre gli stessi 25 pixel su uno schermo a bassa risoluzione possono corrispondere sullo schermo a 1.5 centimetri.
Se non vengono impostate l’altezza e la larghezza, l’immagine verrà inserita con le sue dimensioni originali. Bisogna comunque tenere in considerazione che il browser conosce le dimensioni di un’immagine solo nel momento in cui questa viene caricata completamente, in ogni caso è consigliabile indicare le dimensioni dell’immagine favorendo la realizzazione del layout al browser.
Gli attributi width e height possono inoltre essere utilizzati per scalare le immagini troppo grandi.
Il codice html sottostante descrive l’utilizzo degli attributi width e height:
<html>
<head>
<title>ALTEZZA E LARGHEZZA IMMAGINI</title>
</head>
<body>
<div>Dimensione delle immagini : </div>
<img src='img/logo.jpg' width='82px' height='200px' alt='Il logo del corso HTML!'/>
<img src='img/logo.jpg' width='70px' height='170px' alt='Il logo del corso HTML!'/>
<img src='img/logo.jpg' width='50px' height='150px' alt='Il logo del corso HTML!'/>
</body>
</html>
Nel codice sono presenti tre immagini in sequenza con dimensioni diminuite di volta in volta.
Di seguito è mostrato il risultato:
In definitiva la sintassi per impostare altezza e larghezza di un immagine è:
<img src=”‘immagine.jpg’” alt=”” width=”‘100px’” height=”‘100px’” />
