Кой HTML таг помага да се зареждат различни изображения за различни резолюции на екрана?

В HTML се използва тагът <picture> за зареждане на различни изображения в зависимост от резолюцията на екрана. Вътре в него могат да се посочат няколко <source> с атрибута media, който задава условията за избор на изображението, и таг <img> с резервно изображение.

Пример:

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg">
  <source media="(min-width: 400px)" srcset="medium.jpg">
  <img src="small.jpg" alt="Пример за изображение">
</picture>

В този пример браузърът ще избере large.jpg, ако ширината на екрана е 800px или повече, medium.jpg за ширина между 400px и 799px, и small.jpg за по-малки екрани.

Също така, за прости случаи, може да се използва атрибутът srcset в таг <img>, като се посочат различни изображения с техните размери.