Блог

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

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

 <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> 

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

Браузер будет:

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