What is this?

This is a test of the behavior of the picture element. If you use an img-tag inside the picture element, you want it to give width & height attributes (which *is* important). But if you also use the srcSet and sizes attributes it may lead to unexpected/unwanted behavior.

What happens is that the width & height attributes cancel out the sizes-attribute. You can prevent this from happening by using CSS, but that makes the sizes attribute redundant, so you should remove it. It was Stefan Judis's article that set me on track for figuring this out.

img with css styling, sizes, height and width attributes

img without css styling, but with sizes, height and width attributes

img without css styling, height and width attributes, but with sizes attribute

img without css styling, height, width and sizes attributes

img without sizes attribute, but with css styling, height and width attributes