против <picture><source>?

Question

Кажется, я не вижу различия в функции или значении между использованием элемента picture или использованием элемента img с атрибутом srcset.Я понимаю, как они работают;Я просто не до конца понимаю, почему или когда выбирать один из них.

Похоже, что элемент img легче и чище, но значит ли это и делает то же самое?Я использую это в своем коде для показа разных масштабированных версий одного и того же изображения:

<img src="default.jpg" 
srcset="image-800.jpg 800w, image-400.jpg 400w, image-200.jpg 200w" 
sizes="(max-width: 800px) 100vw, 12em" 
alt="something" />

Это именно то, что я хочу, до получения правильного масштабированного изображения и, похоже, работает в Chrome, Firefox, Edge и Opera.

Я знаю, что почти то же самое можно сделать с помощью этого кода:

<picture>
<source srcset="image-800.jpg 800w, image-400.jpg 400w, image-200.jpg 200w" 
media="(max-width: 800px)" 
sizes="100vw" />
<source srcset="image-800.jpg 800w, image-400.jpg 400w, image-200.jpg 200w" 
media="(min-width: 800px)" 
sizes="12em" />
<img src="default.jpg" alt="something" />
</picture>

Итак, в чем разница функционально?Зачем мне использовать больше кода, чтобы сделать то же самое?

Есть ли смысловая разница?Что бы это было?

С w3.org img:

Элемент img представляет изображение и его запасной контент.

Также из w3.org picture:

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

Если атрибут srcset уже делает это для элемента img, зачем нам элемент picture в качестве контейнера?Чего мне не хватает?Есть ли разница в семантическом значении?

Я прочитал еще один пост здесь с комментарием, который предположил, что srcset в элементе img был просто новым и не совсем надежным перекрестным браузером.,Это все еще правда?Это была единственная разница?

Answer 1

Наряду с художественным направлением, вариант использования <picture> - это случай, когда вы хотите использовать другой тип файла.Например, Chrome поддерживает webp, который имеет лучшее сжатие, чем JPG.Единственный способ заставить Chrome выбрать файл webp - предоставить его через <picture>.

<picture>
    <source srcset="image-800.webp 800w, image-400.webp 400w, image-200.webp 200w" 
type='image/webp' media="(max-width: 800px)" 
sizes="100vw" />
    <img src="default.webp" alt="something" />
</picture>

.

Answer 2

В вашем примере, <picture> бесполезен, потому что вы хотите, чтобы везде отображалось одинаковое содержимое изображения.

<picture> является обязательным, если вы хотите выполнить Art Direction, например, изменить ширину изображения /соотношение высоты при достижении точки останова или обрезка изображения для увеличения при использовании небольшого устройства.