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