HTML5: l'attributo srcset per le immagini

Short link

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 the img 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.

L'autore

Gabriele Romanato, sviluppatore web full stack specializzato in siti, applicativi web ed e-commerce con Node.js e PHP.