srcset загружает только самое большое изображение

Question

У меня есть этот тег изображения с несколькими различными srcs, и он загружает только один.Я чувствую, что следовал инструкциям, но загружается только изображение шириной 600 пикселей (изображение w_600).

<img 
  srcset="https://res.cloudinary.com/tjblackman08/image/upload/w_600%2Cf_auto%2Cq_auto/Brads-House/4.jpg 600w,
    https://res.cloudinary.com/tjblackman08/image/upload/w_520%2Cf_auto%2Cq_auto/Brads-House/4.jpg 520w,
    https://res.cloudinary.com/tjblackman08/image/upload/w_440%2Cf_auto%2Cq_auto/Brads-House/4.jpg 440w,
    https://res.cloudinary.com/tjblackman08/image/upload/w_360%2Cf_auto%2Cq_auto/Brads-House/4.jpg 360w,
    https://res.cloudinary.com/tjblackman08/image/upload/w_280%2Cf_auto%2Cq_auto/Brads-House/4.jpg 280w" 
  sizes="(min-width: 1500px) 600px,
    (max-width: 1200px) 520px,
    (max-width: 992px) 440px,
    (max-width: 768px) 360px,
    (max-width: 480px) 280px" 
  src="https://res.cloudinary.com/tjblackman08/image/upload/w_600%2Cf_auto%2Cq_auto/Brads-House/4.jpg 600w" 
  alt="picture" 
  class="picture"
/>

Вот Live Demo

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

Answer 1

Попробуйте и посмотрите,

<picture>
    <source srcset="https://res.cloudinary.com/tjblackman08/image/upload/w_600%2Cf_auto%2Cq_auto/Brads-House/4.jpg" media="(min-width: 1500px)">
    <source srcset="https://res.cloudinary.com/tjblackman08/image/upload/w_520%2Cf_auto%2Cq_auto/Brads-House/4.jpg" media="(min-width: 1200px)">
    <source srcset="https://res.cloudinary.com/tjblackman08/image/upload/w_440%2Cf_auto%2Cq_auto/Brads-House/4.jpg" media="(min-width: 992px)">
    <source srcset="https://res.cloudinary.com/tjblackman08/image/upload/w_360%2Cf_auto%2Cq_auto/Brads-House/4.jpg" media=" (min-width: 768px)">
    <source srcset="https://res.cloudinary.com/tjblackman08/image/upload/w_280%2Cf_auto%2Cq_auto/Brads-House/4.jpg" media="(min-width: 480px)">
    <img srcset="https://res.cloudinary.com/tjblackman08/image/upload/w_280%2Cf_auto%2Cq_auto/Brads-House/4.jpg" alt="Placehold" class="image">
</picture>

Надеюсь, это поможет.