I have responsive images with picture tag and want to use srcset and sizes.
I've noticed that browser serves wrong img src.
Here is codepen and html:
https://codepen.io/piernik/pen/YzgzrJX
<html>
<body>
<img width="516" height="290" src="https://via.placeholder.com/516x290/ffa/000?text=loaded:%20516%20px" class="img-fluid rounded" srcset="https://via.placeholder.com/1296x730/ffa/000?text=loaded:%201296%20px 1296w, https://via.placeholder.com/1116x628/ffa/000?text=loaded:%201116%20px 1116w, https://via.placeholder.com/951x535/ffa/000?text=loaded:%20951%20px 951w, https://via.placeholder.com/696x392/ffa/000?text=loaded:%20696%20px 696w, https://via.placeholder.com/516x290/ffa/000?text=loaded:%20516%20px 516w" sizes="400px"/>
</body>
</html>
As sizes attribute I put 400px. It means that it should take image that has 400px width. But it takes the one with 696 pixels. Why?
