L'attributo srcset è la risposta del gruppo di lavoro su HTML5 alla necessità degli autori
di avere immagini adaptive anche su risoluzioni di schermo molto grandi. Questo attributo, che si applica agli elementi img
,
serve appunto a questo scopo.
Come ricordano le specifiche W3C:
When authors adapt their sites for high-resolution displays, they often need to be able to use different assets representing the same image. We address this need for adaptive, bitmapped content images by adding a
srcset
attribute to theimg
element.
Il nuovo attributo si usa nel seguente modo:
<img src="normal-image.jpg" srcset="better-image.jpg 2x" />
Notate la stringa 2x
: essa serve ad istruire il browser ad usare la seconda immagine specificata se lo schermo dell'utente
ha una risoluzione con 2 pixel per ogni pixel CSS.
Se la condizione non viene soddisfatta, viene usata la prima immagine.