Nei precedenti script, ci siamo trovati spesso a parlare delle immagini e di come siano belle, ma a volte complesse da integrare nel nostro layout a causa delle dimensioni, del punto di taglio o addirittura del peso delle stesse.

Oggi andremo proprio a risolvere questo ultimo punto, utilizzando un parametro fornito dal tag , il quale ci consentirà di caricare la giusta immagine alla giusta risoluzione. Poiché un sito internet può essere fruito sia da mobile che da fisso con differenti risoluzioni, e non è raro osservare che le risoluzioni mobile - retina display - riescano a visualizzare un'immagine molto più grande rispetto ai normali monitor.

Sarà, dunque, nostro compito riuscire a fornire la giusta immagine alla giusta risoluzione e, per fare questo, utilizzeremo l'attributo srcset del tag img.

<img src="default.jpg"
     srcset="default.jpg 500w, defaultX2.jpg 1000w, defaultX3.jpg 1500w">

In questo modo, sarà il browser stesso a occuparsi dell'immagine più adeguata da scaricare, basandosi sulla grandezza della viewport corrente.