Адаптивный элемент изображения загружает изображение правильного размера из srcset

Question

На основе тега изображения ниже, как браузер определяет, какой из трех файлов в атрибуте srcset загрузить? Насколько я понимаю, браузер определит, какой из трех (300 пикселей, 600 пикселей или 800 пикселей), в зависимости от ширины области просмотра. Атрибут sizes определяет, в зависимости от условий мультимедиа, насколько велико отображаемое изображение, а не то, какое изображение отправлять в браузер.

Есть ли способ указать браузеру, какой размер использовать?

         <picture>
  <source srcset="~/images/300px.png 300w,
          ~/images/600px.png 600w,
          ~/images/800px.png 800w" 
          sizes="(min-width: 60rem) 80vw,
           (min-width: 40rem) 90vw,
           100vw">
  <img src="~/images/300px.png" alt="Image description">
</picture>

Answer 1

Из документации:

Браузер:

1. Посмотрите на его ширину устройства.
2. Определите, какое состояние носителя в sizes list - это первое, что верно.
3. Посмотрите на размер слота для этого медиа-запроса.
4. Загрузите изображение, указанное в srcset список, который имеет тот же размер, что и слот, или, если его нет, первое изображение, которое больше, чем выбранный размер слота.