Отзывчивые изображения с использованием srcset и размеров

Question

Я пытаюсь понять, почему в моем коде ниже браузер загружает большие и маленькие изображения, когда мое разрешение составляет около 400 пикселей. Если у меня небольшое разрешение, мне просто нужно загрузить небольшое изображение, верно? Даже на экране сетчатки, который должен загружать средний образ.

В последние несколько часов я пытался изучить это.

<img  
    srcset="https://s18.postimg.org/t9xyf7mix/small.jpg 320w, 
      https://s18.postimg.org/w5b1m2qix/medium.jpg 640w, 
      https://s18.postimg.org/ues0kl8zt/large.jpg 1024w" 

    sizes= "(min-width: 1024px) 50vw, 
      (min-width: 640px) 50vw, 
      (min-width: 320px) 50vw" 

    src="https://s18.postimg.org/t9xyf7mix/small.jpg" 
    alt="Test image behavior" 
/> 

Ссылка на JSFiddle: https://jsfiddle.net/italoborges/v8yftgj2/2/

Что я делаю неправильно?

Спасибо.

Answer 1

Вот хорошее объяснение и демонстрация математики за этим принятие решений:
https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/

Кроме того, здесь вы можете найти хороший автоматический реагирующие точки останова генератора, который использует передовые аналитические средства для извлечения лучшего оптимизированного набора контрольных точек для конкретного изображения:
http://www.responsivebreakpoints.com/