Как браузер выбирает правильное изображение, используя атрибуты <img>"sizes" и "srcset"? - PullRequest
Новая
       43

Как браузер выбирает правильное изображение, используя атрибуты <img>"sizes" и "srcset"?

0 голосов
/ 10 октября 2018

Как атрибут srcset определяет правильное изображение в сочетании с атрибутом sizes?Возьмем, к примеру, это изображение: 

<img alt="Demo image"
     sizes="(min-width: 1024px) 512px,
             100vw"
     srcset="img/banner-large.jpg 2048w,
             img/banner-medium.jpg 1400w,
             img/banner-small.jpg 800w">

(я очистил кэш в Chrome)

Я думал, что всегда будет выбрано последнее изображение (800 Вт) из-за 512 пикселей (размеров)и ширина изображения 800 Вт (srcset), но это изображение не всегда выбирается?Почему?

1 Ответ

0 голосов
/ 10 октября 2018

Атрибут sizes определяет условие носителя, которое применяется к текущей ширине устройства (выбрано первое применяемое условие носителя).Затем браузер проверяет атрибут srcset, чтобы найти изображение, наиболее точно соответствующее размеру слота, определенному атрибутом sizes.Обратите внимание, что браузер выбирает большее изображение для дисплеев с высоким разрешением, таких как Retina (обычно выбирает изображение, близкое к удвоенной ширине, которое оно выберет на экране с «нормальным» разрешением).См. Адаптивные изображения и Адаптивные изображения: если вы просто меняете разрешение, используйте srcset для более подробной информации о том, как это работает.

Так что в вашем случае,вы ожидаете получить изображение banner-small.jpg на устройстве с «нормальным» разрешением, где ширина устройства составляет не менее 1024 пикселей (и вы также ожидаете получить то же изображение на устройствах с «нормальным» разрешением меньшей ширины из-за большей ширины вашегодругие srcset параметры изображения).

Некоторые причины, по которым вы можете не получить ожидаемых результатов:

  • Старые версии браузера не поддерживают srcset
  • Не указывалось <meta name="viewport" content="width=device-width">, чтобы заставить устройства принимать их реальную ширину при загрузке страницы.
  • Браузеры могут отображать кэшированные изображения вместо выбора наиболее близкого соответствия размера из srcset (как вы отметили в своем вопросе).
  • При попытке отобразить несколько размеров одного и того же изображения на странице, браузеры могут загружать только самое большое необходимое изображение и использовать его в каждом случаехан, загружая несколько изображений).
  • Если вы пытаетесь протестировать поведение выбора изображения в какой-либо изолированной среде iframe, такой как jsfiddle, трудно быть уверенным, что браузер интерпретирует размер панели отображения как "«ширина устройства» (у меня были смешанные результаты с srcset в этих типах сред).Кажется, он ведет себя разумно в SO-фрагменте для браузеров, таких как Chrome и Firefox (до тех пор, пока вы очищаете кеш).Ниже приведен пример фрагмента (лучше используемого в вашей среде), который наглядно показывает, какое изображение было выбрано при тестировании. 

<img srcset="https://via.placeholder.com/300x150 300w,
             https://via.placeholder.com/600x300 600w"
     sizes="(min-width: 1024px) 600px,
            100vw"
     src="https://via.placeholder.com/300x150"
     alt="placeholder image">
...