MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

All'inizio, il Web era fatto di solo testo ed era piuttosto noioso. Fortunatamente, non è passato molto prima che venisse aggiunta la possibilità di integrare immagini (e altri tipi di contenuto più interessanti) nelle pagine web. Ci sono altri tipi di contenuti multimediali da considerare, ma è logico cominciare con l'elemento <img>, usato per introdurre una singola immagine. In questo articolo vedremo in profondità come usarlo, le nozioni fondamentali, come commentarlo con il titolo usando l'elemento <figure> e come si collega alle immagini di background coi CSS.

Prerequisiti: Alfabetizzazione di base sui computer, software basilare installato, conoscenze di base su gestione dei file, familiarità con i fondamenti di HTML (come trattati in Cominciare con l'HTML.)
Obbiettivi: Imparare ad introdurre semplici immagini in HTML, commentarle con i titoli e come collegarle alle immagini di background coi CSS.

Come facciamo a mettere un'immagine in una pagina web?

Per mettere una semplice immagine in una pagina web, usiamo l'elemento <img>. Si tratta di un elemento vuoto (significa che non ha un contenuto testuale ne un tag di chiusura) che richiede un attributo per poter funzionare — src (pronounciato sarc, a volte chiamato col suo nome intero source). L'attributo src contiene un percorso (path) che punta all'immagine che si vuole mettere nella pagina, che può essere un URL relativo o assoluto; nello stesso modo in cui il valore dell'attributo href dell'elemento <a> punta alla risorsa da linkare (si dovrebbe leggere A quick primer on URLs and paths per rinfrescarsi la memoria prima di continuare).

Quindi, per esempio, se l'immagine è chiamata dinosaur.jpg ed è collocata nella stessa directory della pagina HTML, la si può inserire così:

<img src="dinosaur.jpg">

Se l'immagine si trova in una sottodirectory images della directory in cui si trova la pagina HTML (che è la soluzione raccomandata da Google per scopi di indicizzazione e SEO), allora si può fare così:

<img src="images/dinosaur.jpg">

E così via.

Nota: I motori di ricerca leggono anche il nome del file dell'immagine e ne tengono conto per la SEO — si dovrebbe perciò dare al file un nome descrittivo ("dinosaur.jpg" è meglio di "img835.png").

Si dovrebbe inserire l'immagine usando l'URL assoluto, for example:

<img src="https://www.example.com/images/dinosaur.jpg">

Ma ciò è inutile, poiché fa fare al browser più lavoro, ricavando nuovamente l'indirizzo IP daccapo dal server DNS quando, quasi sempre, le immagini saranno salvate sullo stesso server web dell'HTML.

Attenzione: la maggior parte delle immagini è coperta da copyright. Non si deve mostrare un'immagine nel proprio sito, a meno che 1) si sia proprietari dell'immagine 2) si sia ricevuto esplicito permesso scritto dal proprietario dell'immagine, o 3) si abbia prova che l'immagine è di pubblico dominio. Le violazioni al copyright sono illegali ed immorali.

Inoltre, non si deve mai far puntare l'attributo src ad una immagine ospitata sul sito di qualcun altro senza avere il permesso: questo comportamento è chiamato "hotlinking" — nuovamente, rubare la larghezza di banda di qualcun altro è illegale e sbagliato (in più rallenta la tua pagina e non si ha il controllo sull'immagine, che potrebbe venir rimossa o sostituita con qualcosa di inappropriato).

Il codice riportato sopra dovrebbe dare il seguente risultato:

A basic image of a dinosaur, embedded in a browser, with Images in HTML written above it

Nota: elementi come <img> e <video> sono a volte indicati come replaced elements (elementi sostituiti), perché il contenuto dell'elemento e la dimensione sono determinati da una risorsa esterna (file immagine o video) e non dal contenuto dell'elemento stesso.

Nota: si possono trovare gli esempi di questa sezione in running on Github (guarda anche il codice sorgente.)

Testo alternativo

Il prossimo atrtibuto che guarderemo è alt — il suo valore si suppone che sia una descrizione dell'immagine in forma di testo, che possa essere usata in situazioni nelle quali l'immagine non può essere vista o mostrata. Per esempio, il nostro codice potrebbe essere modificato così:

<img src="images/dinosaur.jpg"
     alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth">

Il modo più semplice per testare il funzionamento di questo attributo è di scrivere male il nome del file nell'attributo src (ad esempio dinosooor.jpg); in questo caso il browser non mostrerà l'immagine perché non la troverà e al suo posto mostrerà il testo alternativo.

The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place.

Perciò, perché mai dovresti visualizzare o aver bisogno del testo alternativo? Può essere utile in numerose situazioni:

  • L'utente è ipovedente e utilizza uno screen reader per leggere il web — in un caso come questo è davvero essenziale avere a disposizione un testo alternativo.
  • Come ipotizzato prima si potrebbe aver scritto male il nome del file dell'immagine.
  • Il browser non supporta il tipo di file dell'immagine. Alcune persone usano ancora browser solo testo, come Lynx, che mostrano il testo alternativo di ogni immagine.
  • Si vuole che il testo sia utilizzato dai motori di ricerca per indicizzare le immagini — I motori di ricerca possono rispondere alle interrogazioni cercando il testo che combacia con la stringa ricercata anche all'interno del testo alternativo delle immagini.
  • Fornire una alternativa agli utenti che hanno disabilitato le immagini per ridurre il consumo di banda e le distrazioni (comportamento diffuso nei paesi in cui l'ampiezza di banda è limitata e costosa).

Cosa si dovrebbe scrivere, esattamente, come valore dell'attributo alt? DIpende dal motivo per cui l'immagine si trova li; in altre parole: cosa si perde se l'immagine non viene vista?

  • Decorazione. Se l'immagine è solo una decorazione e non è parte del contenuto, si può lasciare vuoto, add a blank alt="", così, per esempio, uno screen reader non perde tempo a leggere contenuto privo di utilità per l'utente. Le immagini decorative non fanno realmente parte del contenuto HTML — CSS background images dovrebbero essere usati per introdurre decorazioni — ma se è inevitabile, la miglior cosa da fare è lasciare l'attributo in bianco (alt="").
  • Contenuto. Se l'immagine fornisce informazioni significative, fornire le stesse informazioni in forma sintetica con alt text, o ancora meglio, nel testo principale che tutti possono vedere. Non scrivere alt text ridondanti (quanto sarebbe noioso per un utente vedente se tutti i paragrafi fossero scritti due volte di seguito?). Se l'immagine è adeguatamente descritta nel testo principale, si può nuovamente lasciare alt="".
  • Link. Se si mette una immagine in un elemento <a> per usarla come link, si dovrebbe comunque fornire un link testuale accessibile (accessible link text) — in questi casi si può sia scriverlo all'interno dell'elemento <a> o all'interno dell'attributo alt dell'immagine, se si pensa che funzioni meglio.
  • Text. Non si dovrebbe scrivere del testo nelle immagini (se ad esempio il titolo principale ha bisogno di un effetto ombra, si possono usare i CSS piuttosto che far diventare il testo una immagine). Se davvero non si può evitare di farlo, si dovrebbe comunque fornire il testo tramite l'attributo alt.

La chiave è consentire una esperienza proficua anche quando non si può fruire delle immagini, così che gli utenti non perdano alcun contenuto. Provate a disattivare le immagini nel browser e a vedere qual è il risultato; ci si renderà subito conto di quanto inutili siano degli alt text come "logo" o "il mio posto preferito" quando le immagini non sono visibili:

Nota: La WebAIM's Alternative text guide fornisce più dettagli e se si vogliono più informazioni è sicuramente una buona lettura.

Larghezza e altezza

Si possono usare gli attributi width e height per specificare la larghezza e l'altezza dell'immagine (si possono ricavare le misure in diversi modi: per esempio su un Mac si può usare la combinazione di tasti Cmd + I per ottenere le informazioni sull'immagine). Tornando all'esempio, si può fare così:

<img src="images/dinosaur.jpg"
     alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth"
     width="400"
     height="341">

In circostanze normali ciò non produce differenze nella visualizzazione, ma se l'immagine non dovesse essere visualizzata (per esempio si è appena aperta la pagina e l'immagine non è ancora stata visualizzata) si noterà che il browser riserva dello spazio per farvi apparire l'immagine:

The Images in HTML title, with dinosaur alt text, displayed inside a large box that results from width and height settings

È una buona cosa da fare — produce un più rapido e fluido caricamento della pagina.

Non si dovrebbe alterare la dimensione dell'immagine per mezzo degli attributi HTML — se si imposta una dimensione troppo grande si otterrà un'immagine sgranata, sfocata; se la si imposta più piccola vuol dire che si spreca banda per far scaricare un'immagine più grande di ciò di cui abbiamo bisogno. Se non si mantiene il corretto rapporto tra le dimensioni (aspect ratio) l'immagine risulterà distorta. Si dovrebbe usare un editor di immagini per ridimensionare l'immagine secondo le proprie necessità, prima di metterla su internet.

Nota: se si ha la necessità di alterare le dimensioni dell'immagine, lo si dovrebbe fare coi CSS piuttosto che con l'HTML.

Titoli delle immagini

Come per i link, si può aggiungere un attributo title per fornire ulteriori informazioni di supporto. Nell'esempio, possiamo fare così:

<img src="images/dinosaur.jpg"
     alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth"
     width="400"
     height="341"
     title="A T-Rex on display in the Manchester University Museum">

Ciò produce un tooltip, proprio come accade per i "title" dei link.

The dinosaur image, with a tooltip title on top of it that reads A T-Rex on display at the Manchester University Museum

I title delle immagini non sono essenziali per aggiungere qualcosa di significativo e spesso è meglio aggiungere queste informazioni di supporto nel testo principale dell'articolo, piuttosto che attaccarle all'immagine. Sono tuttavia utili in alcune circostanze; per esempio in una galleria di immagini, dove non si ha lo spazio per le didascalie.

Apprendimento attivo: inserire un'immagine

Ok, adesso è il tuo turno! In questa sezione active learning ci piacerebbe fare un semplice esercizio. Sei stato istruito su un fondamentale elemento <img>; ci piacerebbe che inserissi l'immagine reperibile al seguente URL:

https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg

Si, prima abbiamo detto di non fare mai degli "hotlink" a immagini su altri server, ma questo è solo a scopo dimostrativo — ti assolveremo, per questa volta.

Ci piacerebbe anche che:

  • aggiungessi alt text e verificassi che funziona sbagliando l'URL dell'immagine;
  • impostassi le corrette width e height (suggerimento: è larga 200px e alta 171px) e poi sperimentassi altri valori per vedere l'effetto;
  • impostassi un title per l'immagine.

Se fai un errore, puoi sempre resettare con l'apposito bottone. Se sei proprio bloccato, premi il bottone Show solution .

Aggiungere note alle immagini (con figures e figure captions)

Parlando di didascalie, ci sono molti modi per aggiungerle ad una immagine: per esempio non c'è niente ad impedirti di fare così:

<div class="figure">
  <img src="images/dinosaur.jpg"
       alt="The head and torso of a dinosaur skeleton;
            it has a large head with long sharp teeth"
       width="400"
       height="341">

  <p>A T-Rex on display in the Manchester University Museum.</p>
</div>

Questo è ok — produce l'effetto voluto ed è facilmente modificabile con i CSS; ma c'è un problema — non c'è niente che colleghi semanticamente l'immagine alla sua didascalia e ciò può creare problemi agli screen readers; per esempio, quando hai 50 immagini e 50 didascalie, cosa collega una all'altra?

Una soluzione migliore è usare gli elementi dell'HTML5 <figure> e <figcaption> che sono appositamente stati creati per questa ragione: fornire un contenitore semantico per le immagini, che colleghi chiaramente ogni immagine con la sua didascalia; il nostro esempio può essere riscritto così:

<figure>
  <img src="images/dinosaur.jpg"
       alt="The head and torso of a dinosaur skeleton;
            it has a large head with long sharp teeth"
       width="400"
       height="341">

  <figcaption>A T-Rex on display in the Manchester University Museum.</figcaption>
</figure>

L'elemento <figcaption> dice al browser e alle tecnologie per l'accessibilità (assistive technology) che la didascalia descrive il restante contenuto dell'elemento <figure>.

Nota: dal punto di vista dell'accessibilità, le didascalie e l'alt text hanno ruoli distinti. Le didascalie beneficiano anche coloro che possono vedere l'immagine, mentre il testo alternativo (alt text) fornisce le stesse funzionalità di una immagine che però, manca. Perciò captions e alt text non dovrebbero dire la stessa cosa, perché quando l'immagine manca, appaiono entrambe. Provate a disattivare le immagini nel browser e a vedere l'effetto che fa.

Notate che una "figure" non deve necessariamente essere un'immagine — una figure è una unità indipendente di contenuto che:

  • esprime il concetto in maniera sintetica e facile da afferrare
  • può comparire in vari punti del flusso lineare della pagina
  • fornisce informazioni essenziali di supporto al testo principale.

Una figure potrebbe essere costituita da diverse immagini, un frammento di codice, audio o video, equazioni, una tabella o altro.

Active learning: creare una figure

In questa sezione di apprendimento attivo, ci piacerebbe che prendessi il codice della precedente sezione active learning e lo trasformassi in una figure:

  • annidalo in un elemento <figure>
  • copia il testo dell'attributo title, rimuovi l'attributo title, quindi metti il testo copiato in un elemento <figcaption> sotto all'immagine.

Se fai un errore puoi resettare con l'apposito bottone; se sei proprio bloccato premi il pulsante Show solution.

CSS e immagini di background

Puoi anche usare i CSS per inserire immagini nelle pagine web (e anche i JavaScript, ma questa è tutta un'altra storia). Le proprietà dei CSS background-image — e le altre proprietà background-* — sono usate per controllare il posizionamento delle immagini di sfondo (background). Per esempio, per mettere un'immagine di sfondo ad ogni paragrafo di una pagina, si può fare così:

p {
  background-image: url("images/dinosaur.jpg");
}

Le immagini risultanti sono presumibilmente più facili da posizionare e controllare delle immagini HTML, quindi perché complicarsi la vita con le immagini HTML? Come suggerito precedentemente, le immagini introdotte con i CSS hanno solo scopo decorativo — se vuoi aggiungere qualcosa di carino alla tua pagina per migliorare l'effetto visivo, va bene; ma queste immagini non hanno alcun significato semantico — non possonoavere alcun testo equivalente, sono invisibili per gli screen readers, etc. Per questo, servono le immagini HTML.

Quindi, se una immagine ha un contenuto significativo, si dovrebbe inserirla tramite l'HTML; se è puramente decorativa, lo si dovrebbe fare tramite i CSS.

Nota: imparerai molto di più riguardo a CSS background images nel nostro CSS topic.

Conclusioni

Per ora è tutto — abbiamo trattato le immagini e le didascalie nei dettagli. Nel prossimo articolo cambieremo marcia e vevremo come usare l'HTML per includere video e audio nelle pagine web.

Tag del documento e collaboratori

 Hanno collaborato alla realizzazione di questa pagina: howilearn
 Ultima modifica di: howilearn,