Le immagini in una pagina HTML hanno un ruolo fondamentale. Esistono diversi formati grafici e molti software di elaborazione grafica da sfruttare a seconda dei casi: diagrammi e grafici, fotografie, icone ed elementi del layout.
HTML Tag <img>
Il tag <img> rappresenta il principale elemento per inserire un'immagine in una pagina HTML. La sintassi minima è la seguente:
<img src="https://miosito.it/miaImmagine.png" alt="Mia Immagine">Anzitutto notiamo che il tag <img> è un tag senza un contenuto, per questo non ha un elemento </img> di chiusura. Esaminiamo il significato delle keyword e degli attributi principali:
| Keyword | Descrizione |
|---|---|
| img | È il nome del tag, abbreviazione di image |
| src | Sta per source |
| alt | È il testo alternativo |
Grazie al tag img possiamo inserire nella pagina una foto o un grafico. Questo è un elemento di tipo "inline", ovvoero, quando inseriamo un'immagine in un testo, il browser in genere la mostra a piena risoluzione e la considera in linea con il testo, ovvero come parte del testo stesso.
Per esempio un markup come il seguente:
<p>Ciao questo <img src="logo_htmlit.png"> è il logo di HTML.it</p>Viene interpretato in questo modo:
Per separare l'immagine dal testo possiamo distinguere le righe iscrivendo il nostro testo in paragrafi diversi, come vediamo nell'esempio seguente.
<p>Ciao questo</p>
<img src="logo_htmlit.png">
<p>è il logo di HTML.it</p>
Ci sono molti altri modi di personalizzare la visualizzazione delle immagini agendo con i CSS, come vedremo in seguito.
Img e l'attributo Src
Come abbiamo detto, nell'attributo src specifichiamo qual è l'origine dell'immagine. Tipicamente inseriamo una URL, o un percorso che punti ad un file.
File, percorsi relativi e assoluti
Abbiamo già visto come inserire il logo di HTML.it quando il file dell'immagine si trova nella stessa cartella del file HTML:
<img src="logo.gif" alt="HTML.it">Resta valido il discorso sui percorsi relativi e assoluti visto per i link. Sarà quindi possibile riferirsi a file che si trovano su cartelle o siti diversi in questo modo:
<img src="../https://www.html.it/wp-content/uploads/2006/03/logo.gif">
<img src="https://www.html.it/https://www.html.it/wp-content/uploads/2006/03/logo.gif ">I formati di immagine
Attraverso l'attributo src possiamo caricare diversi tipi di immagine, sia bitmap (o raster), sia vettoriale. Ecco quali sono i formati più importanti:
| Formato | Descrizione | ||
|---|---|---|---|
| JPG | (o JPEG) È il formato più utilizzato per le foto, ideato dal Joint Photographic Experts Group lossy | ||
| GIF | (Graphic Interchange Format impostare trasparenze GIF animate | ||
| PNG | (Portable Network Graphic W3C canale alfa PNG24 PNG8 | SVG | (Scalable Vector Graphics |
>> Leggi come ottimizzare le immagini con Photoshop, i formati più usati nell’era del mobile
HTML <img> e l'attributo Alt
L'attributo alt è utile per specificare un testo alternativo (alternative text), questo testo non viene mostrato se non in alcune occasioni:
- Quando l'immagine non può essere caricata;
- A volte durante il caricamento dell'immagine;
- Nei browser testuali (come lynx
- Nei dispositivi per ipovedenti (screen-reader).
È facile comprendere come l'attributo alt sito accessibile
Gli ipo-vedenti e i non-vedenti sono infatti in grado di comprendere il contenuto delle immagini grazie a software appositi (gli screen reader
Detto questo risulta logico che l'attributo alt
inutile inserire l'attributo alt
Infine il testo contenuto nell'attributo alt può essere utile per la SEO, in quanto gli "spider" dei motori di ricerca preferiscono avere testi da leggere che immagini da elaborare.
Title in img
Alcuni browser (desktop, non mobile) mostrano un tooltip con il testo contenuto nell'attributo title, se lo trovano su un link o su una immagine e se l'utente vi si sofferma sopra con il mouse (mouseover). Aggiungere attributi title è comunque un'opzione per aggiungere maggior informazione all'immagine.
<img src="logo.gif" title="HTML.it" alt="Logo di HTML.it" />Link Longdesc
Se l'immagine richiede una descrizione particolarmente dettagliata o lunga, possiamo utilizzare l'attributo longdesc (long description) per rimandare a un link o a una porzione della pagina che contenga un approfondimento.
In longdesc infatti indichiamo un indirizzo locale, un'ancora o una URL. Ecco un esempio:
<img src="logo.png" alt="HTML.it" longdesc="http://miosito.it/descrizione.html" />Tipicamente questa informazione non viene resa nella grafica dai browser e sarà quindi compito nostro esplicitarla quando necessario con JavaScript.
Immagini e link
Possiamo inserire un'immagine direttamente in un link per renderne più chiaro il significato. Farlo a questo punto risulta veramente banale:
<a href="https://www.html.it">
<img src="logo.png">
</a>