Izradu responsive web stranica olakšava korišćenje picture taga, uz pomoć kojeg se mogu definisati različite slike za prikaz na različitim uređajima/dimenzijama ekrana.
HTML <picture> tag može da sadrži više <source> tagova i jedan <img> tag. Brauzer će odabrati sliku koja odgovara zadatim uslovima prikaza, a ukoliko ni jedan source tag ne ispunjava uslove koristiće se slika iz img taga.
Kada se odredjuje koja slika će se učitati u zavisnostiod dimenzija ekrana, mogu se kroz source tag definisati slike koje se razlikuju samo u dimenzijama i rezoluciji. Treba uzeti u obzir da je moguće prikazivati i fotografije različitog sadržaja, koje podjednako dobro ilustruju temu, ali bolje izgledaju na ekranima određenih dimenzija. Na primer, na ekranu velikih dimenzija, fotografije širokog prostora, bogate različitim objektima mogu izgledati bolje nego na manjim ekranima. Na manjem ekranu je možda bolje prikazati neki detalj.
<picture>
<source media="(min-width: 768px)" srcset="slike/morexl.jpg">
<source media="(min-width: 480px)" srcset="slike/more.jpg">
<img src="slike/kamenm.jpg" alt="more" style="width:auto;display: block;margin: auto;">
</picture>