Kura HTML zīme palīdz ielādēt dažādus attēlus dažādām ekrāna izšķirtspējām?

HTML izmanto <picture> tagu, lai ielādētu dažādus attēlus atkarībā no ekrāna izšķirtspējas. Tajā var norādīt vairākus <source> ar media atribūtu, kas nosaka nosacījumus attēla izvēlei, un <img> ar rezerves attēlu.

Piemērs:

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg">
  <source media="(min-width: 400px)" srcset="medium.jpg">
  <img src="small.jpg" alt="Piemērs attēlam">
</picture>

Šajā piemērā pārlūkprogramma izvēlēsies large.jpg, ja ekrāna platums ir 800px vai vairāk, medium.jpg – no 400px līdz 799px, un small.jpg – mazākiem ekrāniem.

Arī vienkāršos gadījumos var izmantot srcset atribūtu <img> tagā, norādot dažādus attēlus ar to izmēriem.