Picture tag

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 određuje koja slika će se učitati u zavisnosti od 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/slika1.jpg">
  <source media="(min-width: 480px)" srcset="slike/slika2.jpg">
  <img src="slike/slika3.jpg" alt="more" style="width:auto;display: block;margin: auto;">
</picture>

Ovo su slike koje su korišćene u kodu: