Drupal → Отличия "Select a single image style" от "Select multiple image styles and use the sizes attribute" в Responsive image

В модуле Responsive image есть два типа адаптивных стилей — "Select a single image style" и "Select multiple image styles and use the sizes attribute". Они оба выводят тег <picture>, но по разному формируют <source>.

Select a single image style

Для каждого брикпоинта указывается один image style и на выходе имеем html вида:

<picture>
  <source srcset="style1.jpg 1x" media="(max-width: 640px)" type="image/jpeg" width="640" height="416">
  <source srcset="style2.jpg 1x" media="(max-width: 1024px)" type="image/jpeg" width="1024" height="633">
  <img src="original.jpg" width="1920" height="780">
</picture>

Браузер выберет первую картинку, удовлетворяющую медиа-выражению из атрибута media, т.е. на экране меньше 640px это будет style1.jpg, на экране от 640px до 1024px это будет style2.jpg, а на всех, что больше — original.jpg. При этом браузер не обращает внимание, каких реальных размеров картинка будет на странице и основывает свой выбор только на медиа-выражении. Например если на экране 1024px картинка занимает только пол экрана, то это всё равно будет style2.jpg с шириной 1024px. Это классическое поведение тега <picture>, описанное во всех гайдах.

Select multiple image styles and use the sizes attribute

Для каждого брикпоинта указывается несколько image style, плюс прописывается опция Sizes. На выходе имеем html вида:

<picture>
  <source srcset="style1.jpg 640w, style2.jpg 1280w" media="(max-width: 640px)" type="image/jpeg" sizes="(max-width: 1024px) 100vw, 1024px">
  <source srcset="style3.jpg 1024w, style4.jpg 2048w" media="(max-width: 1024px)" type="image/jpeg" sizes="(max-width: 1024px) 100vw, 1024px">
  <img src="original.jpg" width="1920" height="780">
</picture>

Первым делом браузер выберет первый подходящий тег <source> удовлетворяющий медиа-выражению из атрибута media. Дальше браузер посмотрит в атрибут sizes и узнает размер картинки на странице. Третьим шагом выберет наиболее подходящую картинку из списка в srcset. Например при разрешении меньше 640px и стандартном dpi браузер выберет style1.jpg, а при этом же разрешении, но большем dpi уже style2.jpg. Подробнее о том, как работает атрибут sizes и зачем он был придуман.

Этот способ в варианте с несколькими брикпоинтами мне показался бесполезным, пока удалось придумать только такой кейс — имеем сайт максимальной шириной 980px, создаём брикпоинт с медиа-выражением all, создаём несколько image style уменьшающих картинку до 1960/980/490 пикселей, настраиваем адаптивный стиль так, чтобы он вывел:

<picture>
  <source srcset="style1.jpg 1960w, style2.jpg 980w, style3.jpg 490w" media="all" type="image/jpeg" sizes="(max-width: 980px) 100vw, 980px">
  <img src="original.jpg" width="1920" height="780">
</picture>

Т.е. будет только один брикпоинт, пару/тройку image style и по адаптивному стилю на определённое поведение картинки. При этом все муки выбора подходящего изображения ложатся на браузер. Если у кого-то есть более актуальные кейсы, то прошу в комменты.