Что за тег ? Чем он отличается от тега ?

Question

Тег <picture> позволяет задавать несколько источников изображений для разных условий, таких как ширина экрана или формат изображения, чтобы браузер выбрал наиболее подходящее. Тег <img> используется для простого вставления одного изображения. Разница в том, что <picture> дает больше гибкости для адаптивных изображений.

YeaHub · Accepted Answer

Тег <picture> в HTML используется для предоставления нескольких версий одного и того же изображения, чтобы браузер мог выбрать наиболее подходящее в зависимости от условий, таких как размер экрана или поддержка форматов изображений. Это особенно полезно для адаптивных сайтов, когда на разных устройствах нужны изображения разного размера или качества. Внутри тега <picture> могут быть несколько <source> с атрибутами media и type, которые задают условия для выбора изображения. Если ни одно из условий не выполняется, отображается изображение, указанное в теге <img>, который является обязательным внутри <picture>.Пример:<picture>  
	<source media="(min-width: 800px)" srcset="large.jpg">  
	<source media="(min-width: 400px)" srcset="medium.jpg">  
	<img src="small.jpg" alt="Пример изображения"> 
</picture>Здесь, если ширина экрана больше 800 пикселей, загружается изображение large.jpg. Если ширина экрана больше 400 пикселей, но меньше 800, загружается medium.jpg. Для всех остальных случаев используется small.jpg. Тег <img>, в отличие от <picture>, просто отображает одно изображение и не может адаптироваться под различные условия.Использование <picture> позволяет улучшить производительность сайта, загружая меньшие изображения на мобильные устройства и избегая лишней нагрузки на сеть.

Что за тег <picture>? Чем он отличается от тега <img>?

Что за тег <picture>? Чем он отличается от тега <img>?