Все привыкли к тому, что у тега img есть атрибут src, который указывает, какое изображение должно отобразиться на странице. Очевидно, что в нем можно указать только одно изображение, которое будет загружено вне зависимости от того, на каком устройстве отображается сайт. Теперь все меняется. Появился атрибут srcset, в котором можно перечислить несколько изображений, каждое их которых предназначено для своего устройства и размера экрана.
Благодарность такому нововведению мы должны отдать команде Google, разрабатывающей Chrome. Атрибут srcset появляется в 34-й версии Chrome, 21-й версии Opera, в общем, победоносно шествует и покоряет сердца разработчиков. Он представляется удобным инструментом для создания адаптивного дизайна (responsive design), который одинаково хорошо отображается на телефоне, телевизоре, ноутбуке и т.д.
Вот такой пример использования приводится на официальном сайте:
<img alt="A rad wolf." src="pic1x.jpg" srcset="pic1x.jpg 1x, pic2x.jpg 2x, pic4x.jpg 4x">
Более того, разработчики утверждают, что старый атрибут src больше не нужен для тех браузеров, которые поддерживают srcset. Он оставляется для обратной совместимости.
А теперь посмотрим на тег picture:
<picture> <source srcset="pic1x.jpg 1x, pic2x.jpg 2x, pic4x.jpg 4x"> <img alt="A rad wolf" src="pic1x.jpg"> </picture>
Видно, что код практически одинаковый, только длиннее. Дело в том, что два приведенных фрагмента кода делают абсолютно одно и то же. Просто picture — это тег из новой спецификации, у него очень много возможностей и «настроек», а srcset в img — всего лишь частный случай, для простейшего использования. То есть никакой конкуренции стандартов тут нет.