Дескриптор 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 - браузер выберет это*
* - браузер отдает предпочтение не тому, что немного меньше, а тому, что немного больше