Expands image when no size is set

[bryanburgers]

When using <img src="logo.png" srcset="logo.png 1x, logo@2x.png 2x" alt="logo"> without an explicit width or height attribute, the image is expanded to double its size, instead of staying the same size.

For example, if logo.png is 100×50 and logo@2x.png is 200×100, I would expect my <img> element to stay 100×50 instead of becoming 200×100.

[culshaw]

Hey, so the original image logo.png is being doubled in size irrespective of your screen density and then becoming physically 200x100?

[bryanburgers]

I have a layout like this, where the blue block is an image and the gray blocks are text. The markup could be like <img src="logo.png">, without width and height attributes.

If I then change the markup to be <img src="logo.png" srcset="logo.png 1x, logo@2x.png 2x">, the layout changes to this second layout, which is not what I expected, because the srcset polyfill is changing the intrinsic size of the image when it replaces the src.

In fact, when I use Chrome, which has built in support for srcset, the first layout is correctly shown, because Chrome deals with the intrinsic size properly.

The easy fix is to change this to explicitly state the size: <img src="logo.png" srcset="logo.png 1x, logo@2x.png 2x" width="100" height="100">. But I think it is a bug (though I'm not sure what a polyfill could do about it), so I reported it.

[bryanburgers]

Also, to more directly answer your question, this is only happening when my screen density is 2, because the polyfill is correctly downloading the 2x image and effectively turning the img into <img src="logo@2x.png">, which has a larger intrinsic size than <img src="logo.png">.

[culshaw]

Great explanation, I know exactly what is happening. Thanks, it's a nice edge case to have under consideration, thank you.