Ce etichetă HTML ajută la încărcarea diferitelor imagini pentru diferite rezoluții ale ecranului?

Pentru a încărca imagini diferite în funcție de rezoluția ecranului în HTML, se folosește eticheta <picture>. În interior, se pot specifica mai multe <source> cu atributul media, care stabilește condițiile pentru alegerea imaginii, și eticheta <img> cu o imagine de rezervă.

Exemplu:

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg">
  <source media="(min-width: 400px)" srcset="medium.jpg">
  <img src="small.jpg" alt="Exemplu de imagine">
</picture>

În acest exemplu, browserul va alege large.jpg dacă lățimea ecranului este de 800px sau mai mult, medium.jpg pentru lățimi între 400px și 799px, și small.jpg pentru ecrane mai mici.

De asemenea, pentru cazuri simple, se poate folosi atributul srcset în eticheta <img>, specificând imagini diferite cu dimensiunile lor.