Corsi on-line

HTML 5.1: definire immagini alternative in base alla risoluzione

L’attributo srcset di HTML 5.1 consente allo sviluppatore di definire più alternative caratterizzate da risoluzioni differenti di una medesima immagine; in sua presenza il browser Web non dovrà fare altro che selezionare e rendere visibile l’alternativa più adatta per il display del dispositivo in uso al momento corrente, tale selezione verrà operata sulla base di criteri come la densità di pixel, la velocità di navigazione o il livello di zoom adottato.

html5-1

Si tratta in sostanza di un attributo pensato per garantire il maggior livello possibile di responsività delle immagini e, nel contempo, per fornire il rendering più appropriato con cui ottimizzare la user experience; ad un utente che utilizza uno schermo ad alta risoluzione, e dispone di una connessione veloce, potremmo offrire un’alternativa di altissima qualità, ad un altro utilizzatore che opera con device dall’area di visualizzazione limitata, e dispone di una connessione lenta, potremo invece presentare un’immagine a bassa risoluzione.

Un semplice esempio di utilizzo dell’attributo srcset potrebbe essere il seguente:

<img src="img/immagine-a-bassa-risoluzione.png" srcset="
  img/immagine-a-bassa-risoluzione.png 1x, 
  img/immagine-ad-alta-risoluzione.png 2x, 
  img/immagine-ad-altissima-risoluzione.png 3x">

Come è possibile notare, l’attributo richiede una lista di URL, ognuno di essi corrispondente al percorso di un’immagine, separati tra loro da una virgola; per ogni alternativa elencata si dovrà utilizzare il modificatore, o “descrittore”, x con il quale indicare il rapporto di densità in pixel (CSS Pixel Ratio) desiderato o, più semplicemente, la quantità di pixel fisici per singolo pixel CSS.

La CSS Pixel Ratio non è però l’unica unità di misura che disponiamo per specificare il livello di risoluzione delle alternative introdotte con srcset, al suo posto possiamo usare il descrittore w:

<img src="img/immagine-a-bassa-risoluzione.png" srcset="
  img/immagine-a-bassa-risoluzione.png 600w, 
  img/immagine-ad-alta-risoluzione.png 1000w, 
  img/immagine-ad-altissima-risoluzione.png 1400w">

w è in sostanza un modificatore di dimensione che sta per “pixel”, 600w corrispondono quindi a 600px, 1000w a 1000px e 1400w a 1400px.

Insieme a srcset è possibile utilizzare l’attributo sizes che prevede il passaggio di due valori: una media condition e la larghezza dell’immagine data dalla condizione. Il secondo argomento non può essere espresso in percentuale ma tramite il modificatore vm:

<img src="img/immagine-a-bassa-risoluzione.png"  sizes="(max-width: 40em) 100vw, 50vw" 
  srcset="img/immagine-a-bassa-risoluzione.png 600w, 
  img/immagine-ad-alta-risoluzione.png 1000w, 
  img/immagine-ad-altissima-risoluzione.png 1400w">

Dato il nostro esempio, avremo che la larghezza dell’immagine sarà pari alla metà dell’area di visualizzazione disponibile quando quest’ultima è più grande di 40em, pari al 100% quando inferiore o identica a 40em.

Post correlati
I più letti del mese
Tematiche