Responsive Images srcset - Всегда выбирайте самое большое изображение

Question

Я пытаюсь заставить работать адаптивные изображения, и у меня пока есть этот макет ...

.container {
  display:flex;
  max-width:1000px
}

.col1 {
  flex:1;
  background:teal;
  text-align:center;
}

.col2 {
  flex:1;
  background:wheat;
  text-align:center;
}

.img-responsive {
max-width:100%;
height:auto;
}

<div class="container">

  <div class="col1">
    This is column 1
    <img
	class="img-responsive" 
	src="https://dummyimage.com/1000x1000/000/fff"

	srcset="https://dummyimage.com/1000x1000/000/fff 1000w,
			https://dummyimage.com/750x750/000/fff 750w,
			https://dummyimage.com/400x400/000/fff 400w"

	sizes="(max-width: 1000px) 1000px,
		   (max-width: 7500px) 750px,
		   (max-width: 400px) 400px,
	       1024px"
">
  </div>
  
  <div class="col2">
    This is column 2
  </div>

</div>

Я ожидаю, что изображение 1000px будет отображаться, когда экран имеет разрешение 1000px и выше, версия 750px при 750px и выше и так далее ...

Но это дает мне только большую версию, где я ошибаюсь?

Answer 1

Попробуйте использовать тег изображения вместо тега img.Поместите источники от наименьшего размера к наименьшему размеру, с тегом img по умолчанию в конце.

Как это:

<picture>
  <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

Answer 2

Существует ряд причин, по которым это может произойти:

1. Ваш браузер, вероятно, уже кэшировал более крупную версию изображения, поэтому его более эффективно использовать, чем отправлять в сеть новую копию.
2. Соотношение пикселей устройства> 1,0, в результате чего браузер запрашивает версию с более высоким, чем ожидалось, разрешением
3. Представленная ширина изображения больше, чем следующее наименьшее изображение в srcset.

---

При ближайшем рассмотрении в вашем примере происходит несколько странных вещей.

1. Вы используете sizes, как будто это медиа-запрос для элемента; эти медиазапросы минимальной / максимальной ширины работают так же, как и в других местах, то есть они относятся к размеру окна просмотра, а не к элементу. По умолчанию используется значение 100vw, которое является шириной области просмотра. Вам может понадобиться что-то вроде 50vw.
2. sizes оценивается по порядку; первый матч будет использован. В вашем случае это (max-width: 1000px), что будет верно для области просмотра <= 1000px. Это означает, что вы просите браузер загрузить самое большое из предложенных вами изображений. </li>
3. Использование max-width вместо min-width немного необычно, особенно в сочетании с соотношением 1: 1 между максимальной шириной и требуемым размером изображения. Чаще всего вы видите что-то вроде (min-width: 768px) 600px, 100vw, которое говорит браузеру загружать изображение для представленного размера 600 пикселей, если область просмотра шире, чем 768 пикселей (наш пример, точка останова для мобильного стекирования), и в противном случае загружать его для отображения в полном объеме. ширина области просмотра (это 100vw отступ).
4. Наконец, у вас есть дополнительная двойная кавычка (") прямо перед закрывающей скобкой вашего тега img, хотя я не знаю, влияет ли это на ваш пример или нет.