Inserire delle immagini in un documento HTML

Questo approfondimento è estremamente importante, per quanto possa sembrare banale, le immagini sono in realtà uno dei principali problemi quando si cercano di ottimizzare le performance di un sito web.

Per questo motivo è bene conoscere tutte le potenzialità di HTML in termini di gestione delle immagini.

Come si inserisce un'immagine in HTML?

Il modo più semplice per inserire un’immagine in un documento HTML è attraverso il tag <img />.

1<img src=”images/pixel.jpg” alt=”Pixel il gatto” />

Il tag è di tipo sostitutivo e ha bisogno di due attributi, uno obbligatorio, l’altro quasi sempre necessario, ma in rari casi omissibile.

I due attributi in questione sono:

• src: indirizzo o percorso dell’immagine (come visto per i link può essere assoluto o relativo)
• alt: testo alternativo che verrà visualizzato qualora l’immagine non caricasse

Parliamo più nel dettaglio dell’alternative text

L’alternative text è quel classico attributo che si scrive solo quando si hanno necessità di posizionamento, ma è estremamente importante compilarlo, quando necessario, per vari motivi:

• Lo screen reader che usa l’utente per navigare il documento legge l’attributo alt fornendo la descrizione dell’immagine.
• Se il nome del file fosse sbagliato (l’immagine quindi non è disponibile) il testo alternativo verrà mostrato al posto dell’immagine dando un’idea di cosa ci fosse rappresentato.
• Aiuta il posizionamento sui motori di ricerca
• Se l’utente ha ridotto i dati della sua connessione, le immagini non verranno caricate (questa situazione è frequente soprattutto in zone con scarsa connettività)

Quindi l’alternative text è importante, ma cosa bisogna scrivere? Dipende, nello specifico:

• Immagine decorativa: anche se si dovrebbe usare CSS in questi casi, ma se proprio non possiamo fare a meno di usare il tag <img /> il testo alternativo deve essere impostato a vuoto alt=””.
• Contenuto: se l’immagine è particolarmente ricca di significato bisognerebbe fornire un breve testo alternativo riepilogativo, questo però se nel contenuto circostante non si sia riusciti a spiegare in modo esaustivo il contenuto dell’immagine. Se il contenuto circostante risultasse esaustivo l’alternative text risulterà ridondante, per cui superfluo e quindi anche in questo caso impostabile a vuoto (alt=””)
• Link: se usi un’immagine come link puoi scrivere il testo di ancoraggio nel testo alternativo.
• Testo: in generale nelle immagini è sempre meglio evitare contenuti troppo testuali.

Altri attributi del tag

src e alt non sono gli unici tag a disposizione, abbiamo anche:

• width: permette di impostare la larghezza dell’immagine
• height: permette di impostare l’altezza dell’immagine
• title: da non intendere come sostituto di alt mostra una tooltip se il mouse si ferma sull’immagine fornendo all’utente informazioni addizionali.
• loading: permette di caricare in un secondo le immagini non immediatamente visibili, i valori possibili sono: eager (default) e lazy
• sizes: condizioni che indicano quale immagine è meglio selezionare (specificate in srcset) in base alla larghezza dello schermo.
• srcset: insieme d’immagini che il browser può scegliere
• referrerpolicy: l’ormai arcinoto referrerpolicy che ci permette di scegliere come deve essere compilato l’header HTTP Refer.
• fetchpriority: attributo sperimantale che permette di suggerire al browser con quale priorità scaricare l’immagine, i valori permessi sono: high, low e auto (default)

Come scrivere la didascalia di un’immagine in modo accessibile

Prova ad immagine un codice come questo:

1<div class="figure">
2  <img
3    src="images/pixel.jpg"
4    alt="Il gatto Pixel osserva attonito la tapparella che si alza"
5    width="400"
6    height="341" />
7  <p>Il gatto Pixel mostra un’espressione buffissima.</p>
8</div>

Non c’è nulla di male, ma se le immagini dovessero essere decine, la correlazione tra immagine e didascalia verrebbe meno e andremmo a perdere in accessibilità.

La scelta migliore dal punto di vista semantico è avvalersi di <figure> e <figcaption> due tag che vanno in coppia e che ci permettono di dare una didascalia alla nostra immagine rispettando l’accessibilità.

1<figure>
2  <img
3    src="images/pixel.jpg"
4    alt="Il gatto Pixel osserva attonito la tapparella che si alza"
5    width="400"
6    height="341" />
7  <figcaption>Il gatto Pixel mostra un’espressione buffissima.</figcaption>
8</figure>

La peculiarità di figure è che non deve per forza di cose contenere un’immagine. L’uso principale è quello, ma nulla vieta di inserire un qualsiasi elemento che necessiti di una didascalia (una citazione, uno snippet di codice, ecc.)

1<figure>
2  <p>
3     È così che muore la libertà: sotto scroscianti applausi.
4  </p>
5  <figcaption><cite>Star Wars Episodio III: La Vendetta dei Sith</cite>, di Padmé Amidala </figcaption>
6</figure>

Le immagini responsive

Oggi il web è cross-device e i dispositivi dalla quale lo visualizziamo sono in orizzontale o verticale, più grandi e più piccoli e può capitare che un immagine perfettamente visibile da desktop non si veda più molto bene da mobile. Senza contare dimensione e peso eccessivi per schermi più piccoli.

Tra gli attributi menzionati in precedenza srcset e sizes sono quelli che ci permettono di cambiare dimensione dell’immagine in base alla dimensione dello schermo.

• srcset: definisce un insieme d’immagini che il browser può scegliere e quali sono le rispettive dimensioni intrinseche (la dimensione reale)
• sizes: condizioni che indicano quale immagine è meglio selezionare quando una determinata condizione è vera (es. larghezza dello schermo)

1<img
2  srcset="pixel-480w.jpg 480w, pixel-800w.jpg 800w"
3  sizes="(max-width: 600px) 480px,
4         800px"
5  src="pixel-800w.jpg"
6  alt="Il gatto Pixel" />

Per quanto sembrino complicati una volta compreso cosa c’è scritto è tutto più facile.

Il tag

Come se già non bastasse abbiamo un terzo elemento che ci permette di inserire un’immagine in un documento HTML e si avvale come gli altri sempre dell’elemento <img />. Il tag è <picture> e a differenza di srcset, grazie all’ausilio di un altro tag, <source>, abbiamo la possibilità di cambiare completamente dimensione dell’immagine.

Di picture e di source avevo già parlato in uno short su YouTube.

Con picture risolviamo il problema delle immagini che si visualizzano bene da desktop, ma non da mobile. Per usarlo basta scrivere:

1<picture>
2   <source media="(max-width: 424px)" srcset="images/pixel-vicinissimo.jpg" />
3   <source media="(max-width: 799px)" srcset="images/pixel-vicino.jpg" />
4   <img src="images/pixel-normale.jpg" alt="Pixel mentre guarda la tapparella alzarsi" width="300" />
5</picture>

In base alla condizione passata all’attributo media verrà mostrata l’immagine passata in srcset. In quest’ultimo attributo è possibile passare anche più immagini accompagnate da dimensione intrinseca o densità dei pixel del dispositivo (1.5x, 2x, ecc.).

Quando usare e quando usare srcset

L’attributo srcset si basa sull’attributo src, mentre <picture> si basa sull’elemento <img />. srcset viene usato per sostituire la stessa immagini con versioni più piccole o più grandi, mentre con <picture> possiamo modificare completamente l’immagine.

Quindi se la tua necessità è quella di cambiare completamente immagine vai di <picture>, altrimenti se si tratta di mostrarne semplicemente una più piccola vai di srcset.

Sul tema picture e source ho pubblicato uno short dove in meno di un minuto spiego al volo come funzionano

Ottimizzare il peso delle immagini

Quando si parla di dimensioni in termini di peso dell'immagine cerco sempre di rimanere al di sotto dei 100Kb, con una tolleranza che mi può portare fino a 120Kb e in alcuni casi estremi a 150Kb, ma so anche che ci sono casi e casi in cui bisogna fare delle eccezioni.

In ogni caso, l'importante è che le immagine venga ottimizzata per poter ridurre quanto più possibile il peso senza rinunciare alla qualità.

In uno short su YouTube ho mostrato in meno di un minuto come ottimizzare le immagini con un tool online, consiglio di dargli un'occhiata.

Il lazy loading delle immagini direttamente in HTML

L'attributo loading visto precedentemente è stato oggetto di un altro short dove mostro come implementare il lazy loading, una tecnica che permette di diminuire il numero di richieste iniziali tra client e server.