Corsi on-line

Utilizzare l’attributo srcset di HTML5 per le immagini

Come ricorda il sempre bravo Gabriele Romanato:

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.

html5 logoSostanzialmente tale attributo consente agli sviluppatori di proporre una o più varianti di una stessa immagine a risoluzioni differenti o per diverse dimensioni dell’area di visualizzazione (viewport); tali varianti potranno essere selezionate dall’User Agent precedentemente al rendering via browser, in questo modo si potranno evitare rallentamenti dovuti al caricamento delle risorse non necessarie.

In HTML5 srcset non è un attributo obbligatorio per le immagini, ma quando esso è presente svolgerà il compito di “presentare” una o più immagini potenzialmente destinate alla visualizzazione (per questo denominate anche “candidate“); nel caso in cui ad esso vengano associate le stringhe relative a più immagini, queste dovranno essere separate con una virgola.

Le stringhe passate come argomento a srcset fungeranno da alternative selezionabili a seconda dell’ambiente di riferimento, per cui potremmo avere una “candidata” per schermi di piccole dimensioni così come per ampie diagonali com alta densità di pixel:

<img alt="Blah!" src="i.jpeg" srcset="i-HD.jpeg 2x, i-phone.jpeg 100w, i-phone-HD.jpeg 100w 2x">

Il breve snippet proposto ci mostra innanzitutto come srcset non sia sostitutivo (semmai complementare) rispetto a src; in secondo luogo, si notino le stringhe contenenti i caratteri “w” e “x“, il primo è chiamato width descriptor, il secondo pixel density descriptor, entrambi sono opzionali e vengono presi in considerazione dal browser sulla base delle caratteristiche del display corrente. In caso di mancata corrispondenza con i descriptors verrà utilizzata la risorsa introdotta con src.

Via W3C

Post correlati
I più letti del mese
Tematiche