Responsive picture selection displays wrong image

Question

I'd like to display different images on different view ports. Therefore I have used the <picture> tag with two sources and corresponding media queries. I have did already clear my cache few times.

This is my code:

<picture>
    <source srcset="img/small.png" media="(max-width: 1535px)"/>
    <source srcset="img/large.png" media="(min-width: 1536px)"/>
    <img src="img/large.png"/>
</picture>

But if the page is loaded with a width of 1535px, then the larger image is used, although it should only be loaded from a width of 1536px.

If the page is loaded with 1534px and lower, the smaller image is loaded, which is correct. So the issue exists only at 1535px.

Do you have an idea what the reason is?

Answer 1

you are using 1535px for both min and max

<picture>
    <source srcset="img/small.png" media="(max-width: 1535px)"/>
    <source srcset="img/large.png" media="(min-width: 1536px)"/>
    <img src="img/large.png" alt="Description for your image"/>
</picture>