Za veću fleksibilnost prema HTML5 standardu pri ugradnji slike moguće je koristiti se elementom <picture> i tako ponuditi mrežnom pregledniku više različitih datoteka što je dobro za responzivnost i pregled na različitim uređajima. Umjesto da imamo jednu sliku koja se uvećava ili smanjuje na temelju širine zaslona, može se postaviti više slika da ljepše popune okvir za prikaz u pregledniku s obzirom na veličinu zaslona. Unutar njega uključujemo i element <img> zbog kompatibilnosti sa starijim mrežnim preglednicima te jedan ili više <source> elemenata. Podržani formati slika su .jpeg, .gif, .png, .svg.

Unutar elementa <picture> koristimo se svojstvima:

• srcset – njegova je vrijednost putanja do slike koju ugrađujemo
• media – njegova su vrijednost obilježja zaslona odabranog uređaja
• width – širina elementa
• height – visina elementa.

Svojstvom source media="(min-width:1200px)" definiramo rezoluciju slike koja je pogodna za velika računala, odnosno zaslone s rezolucijom 1200 px i više, dok svojstvom media="(min-width:768px)" definiramo da je druga slika pogodna za prikaz na srednjim uređajima (tabletima) s veličinom zaslona 768 px i više. Vrijednosti 1200 px i 768 px predstavljaju područja vidljivosti.

Preglednik pronalazi prvi <source> element te provjerava podudara li se s odgovarajućim zaslonom za prikaz. Ako odgovara, prikazuje odgovarajuću sliku navedenu unutar svojstva srcset.

Element <picture> radi na istom načelu kao <video> i <audio>, postavlja različite izvore, a učitava se prvi odgovarajući.