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 (immagine) |
| src | Sta per source (origine), è l'indirizzo (URL) del file che vogliamo mostrare |
| alt | È il testo alternativo, ovvero il testo che appare se, per qualche motivo, il client non riesce a mostrare l'immagine. Possiamo anche omettere questo attributo, ma risulta utile per l'accessibilità e per i motori di ricerca |
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 (da cui l'acronimo) per ridurre lo spazio occupato da bitmap complesse e di grandi dimensioni. L'algoritmo è di tipo lossy, cioè a "perdita di informazione": per ottenere file leggeri in termini di KB si effettuano dei campionamenti e si rinuncia alla qualità dell'immagine. Utilizzando JPG si cerca sempre un buon compromesso tra peso e qualità dell'immagine. | ||
| GIF | (Graphic Interchange Format): le immagini GIF hanno una tavolozza che non supera i 256 colori. È possibile ottimizzare il peso questo tipo di file riducendo ancora il numero di colori. GIF inoltre consente di impostare trasparenze il ché in passato rendeva questo formato idoneo alla creazione di piccoli elementi di layout. Oggi una delle applicazioni più frequenti di questo formato è la rappresentazione di piccoli video (GIF animate) da utilizzare come sfondi animati delle pagine o da condividere sui social network. | ||
| 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). | SVG | (Scalable Vector Graphics): è un formato vettoriale e per questo può scalare senza perdita di definizione. Molto utilizzato soprattutto per icone, elementi del layout e grafici dinamici. |
>> 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) che non mostrano proprio le immagini;
- Nei dispositivi per ipovedenti (screen-reader).
È facile comprendere come l'attributo alt sia di estrema utilità per rendere il sito accessibile a tutti gli utenti anche quando le loro condizioni fisiologiche o le loro possibilità di connessione non permettano di fruire delle immagini.
Gli ipo-vedenti e i non-vedenti sono infatti in grado di comprendere il contenuto delle immagini grazie a software appositi (gli screen reader) che "leggono" lo schermo tramite un programma di sintesi vocale. Non specificare il testo alternativo significa rendere parziale la fruizione del contenuto.
Detto questo risulta logico che l'attributo alt non dovrebbe contenere mai il titolo dell'immagine o la legenda. Esso deve contenere un testo che effettivamente possa supplire all'assenza dell'immagine per rendere il testo altrettanto fruibile. Per questo è inutile inserire l'attributo alt se abbiamo già una descrizione simile nel testo intorno all'immagine.
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>