Зачем нам нужен элемент изображения, когда у нас есть атрибут srcset?

Атрибут srcset элемента img помогает авторам адаптировать свои сайты для дисплеев с высоким разрешением, чтобы иметь возможность использовать разные активы, представляющие одно и то же изображение.

Элемент изображения помогает авторам контролировать, какой ресурс изображения пользовательский агент представляет пользователю, на основе медиа-запроса и/или поддержки для определенного формата изображения.

Оба они дают автору контроль над отображением изображений на основе разрешения устройства, что делает изображения чувствительными. Так в чем же основное отличие между ними?

Я нашел несколько примеров в элементе picture проект, но все же не понял разницы. Вот примеры:

Использование атрибута srcset:

<img src="pic1x.jpg" srcset="pic2x.jpg 2x, pic4x.jpg 4x"
 alt="A rad wolf" width="500" height="500">

Использование элемента picture:

<picture>
  <source media="(min-width: 45em)" srcset="large.jpg">
  <source media="(min-width: 18em)" srcset="med.jpg">
  <img src="small.jpg" alt="The president giving an award.">
</picture>

Ответы

Ответ 1

Оба srcset и picture делают примерно одно и то же, но есть тонкая разница:

  • picture определяет, какое изображение должен использовать браузер, а
  • srcset дает браузеру выбор. Для выбора этого выбора можно использовать много вещей, таких как размер видового экрана, предпочтения пользователей, состояние сети и т.д. Надеюсь, в будущем браузеры станут умнее и умнее, выбрав подходящий образ.

Поддержка srcset довольно хороша и почти все текущие браузеры более или менее поддерживают ее. Ситуация с элементом picture - это немного хуже.

Ответ 2

Обновление 2017

От http://usecases.responsiveimages.org/:

Атрибут srcset

Позволяет авторам определять различные ресурсы изображения и "подсказки", которые помогают пользовательскому агенту определять наиболее подходящий источник изображения для отображения. Учитывая набор ресурсов изображения, пользовательский агент имеет опцию как следующего, так и переопределяющего объявления авторов для оптимизации пользовательского опыта на основе таких критериев, как плотность отображения, тип подключения, пользовательские настройки и т.д..

Элемент picture

На основе srcset эта спецификация определяет декларативное решение для группировки нескольких версий изображения на основе разных характеристик (например, формат, разрешение, ориентация и т.д.). Это позволяет пользовательскому агенту выбирать оптимальное изображение для представления конечному пользователю на основе "условий окружающей среды" пользовательского агента, а также обеспечивает возможность "художественных прямых" изображений.

Условия окружающей среды - это мультимедийные функции CSS (например, плотность пикселей, ориентация, максимальная ширина) и типы носителей CSS (например, печать, экран).

Художественное направление означает преобразование изображения, чтобы наилучшим образом соответствовать доступному ему пространству. Например, изображение ландшафта, изображающее собаку перед домом, может быть оставлено как на обычном рабочем столе, но на узком мобильном экране с портретом мы можем обрезать стороны дома и сосредоточиться на собаке.

picture использует запросы мультимедиа CSS, а srcset использует строки кандидата изображения: дескрипторы ширины, например 1024w или дескрипторы плотности пикселей, например. 2x.

Обе спецификации широко поддерживаются среди текущих браузеров, за исключением IE, старых браузеров Android и Opera mini. srcset лучше поддерживается устаревшими браузерами, а именно Safari с 7 по 9.2. Смотрите http://caniuse.com/#feat=srcset.

Ответ 3

Связь описана в разделе 1.3 Относительно srcset рисунка Элемент. Описание несколько расплывчато, поскольку оно не дает понять, с чем его сравнивают, но для практических целей проект редакторов W3C Атрибут srcset описывает конструкцию srcset как отдельный атрибут (как противоположный своей роли в предлагаемом элементе picture).

Два проекта предназначены для решения одинаковых проблем по-разному. Атрибут srcset позволит вам указать список URL-адресов изображений со специальными обозначениями, используемыми для указания, для какой ширины или плотности пикселей они предназначены. Элемент picture использует запросы мультимедиа CSS для той же цели.