Полезные элементы HTML: picture
работаем с адаптивными картинками в HTML

HTML-элемент picture
- контейнер для вложенных элементов source
. Он необходим для загрузки адаптивных изображений, оптимизированных в соответствии с выбранными размерами и разрешениями экрана.
picture
позволяет определить несколько источников изображения source
и выбрать лучший, исходя из возможностей устройства.
Например:
<picture>
<source media="(min-width: 800px)" srcset="large.jpg">
<source media="(min-width: 400px)" srcset="medium.jpg">
<img src="small.jpg" alt="Responsive Image">
</picture>
Таким образом, picture
сокращает время загрузки картинки, повышает удобство работы пользователя, предоставляя наиболее подходящее изображение.
Спасибо за внимание.