[SOLVED] Srcset displaying full size image at every screen size

Srcset displaying full size image at every screen size

I am trying to get the hang of using srcset for repsonsive images and have this so far..

    <img
        src="https://dummyimage.com/1500x300/2a9c2a/ffffff"
        srcset="https://dummyimage.com/1200x300/2a9c2a/ffffff 1200w,
                https://dummyimage.com/992x300/2a9c2a/ffffff 992w,
                https://dummyimage.com/768x300/2a9c2a/ffffff 768w,
                https://dummyimage.com/576x300/2a9c2a/ffffff 576w"
        sizes="(max-width: 1200px) 1200px,
               (max-width: 992px) 992px,
               (max-width: 768px) 768px,
               (max-width: 576px) 576px,
               1500px
    ">

I am expecting it to display the 576px wide image when my screen is below 576px, the 768px one when it is below 768px and so on

It is just displaying the full size 1500px version at every screen size, where am I going wrong?

Solution

I recommend you to use the picture element if you want to deliver the pictures depending on your viewport .

<picture>
  <source srcset="https://dummyimage.com/1200x300/2a9c2a/ffffff" media="(min-width: 1200px)" />
  <source srcset="https://dummyimage.com/992x300/2a9c2a/ffffff" media="(min-width: 992px)" />
  <source srcset="https://dummyimage.com/768x300/2a9c2a/ffffff" media="(min-width: 768px)" />
  <source srcset="https://dummyimage.com/576x300/2a9c2a/ffffff" media="(min-width: 576px)" />
  <img src="https://dummyimage.com/576x300/2a9c2a/ffffff" />
</picture>