Что именно делает дескриптор w в атрибуте srcset?

Question

[Ivanushka255]

Например, у меня есть вот такой код:

<img
  src="opera-fallback.jpg" alt="The Oslo Opera House"
  sizes="(min-width: 640px) 60vw, 100vw"
  srcset="opera-200.jpg 200w,
      opera-400.jpg 400w,
      opera-800.jpg 800w,
      opera-1200.jpg 1200w">

Не совсем понятно что именно делают дескрипторы w, которые пишутся обычно на основании ширины картинки. Являются ли они полной заменой дескриптору z? Если нет, то в чем отличие? Как браузер определяет что выбрать из всего этого списка?

Answer 1

[Ivanushka255]

Дескриптор w также как и дескриптор х можно использовать для адаптации картинок под различные ретина-устройства.

Как это работает? В соответствии с размером экрана и плотностью пикселей устройства, а также шириной, которую будет занимать картинка (атрибут sizes), браузером будет принято решение какую из перечня картинок стоит использовать. Например, у нас есть устройство с шириной - 1366рх и разрешением - 1х. Также у нас есть некий перечень картинок:

<img
  src="opera-fallback.jpg" alt="The Oslo Opera House"
  srcset="opera-200.jpg 200w,
      opera-400.jpg 400w,
      opera-800.jpg 800w,
      opera-1200.jpg 1200w">

Какое изображение будет использоваться?
1) 200/1366=0.14 - не подходит;
2) 400/1366=0.29 - не подходит;
3) 800/1366=0.58 - не подходит;
4) 1200/1366=0.87 - максимально подходящее (наиболее близкое к 1х).

Как все это работает вместе атрибутом sizes?

<img
  src="opera-fallback.jpg" alt="The Oslo Opera House"
  sizes="(min-width: 640px) 60vw, 100vw"
  srcset="opera-200.jpg 200w,
      opera-400.jpg 400w,
      opera-800.jpg 800w,
      opera-1200.jpg 1200w">

Теперь ширина отображения уже не 1366(устройство то же), а меньше - 820рх(60% от 1366рх). Считаем снова.
1) 200/820=0.24 - не подходит
2) 400/820=0.48 - не подходит
3) 800/820=0.97 - нет
4) 1200/820=1.46 - браузер выберет это*
* - браузер отдает предпочтение не тому, что немного меньше, а тому, что немного больше