AMP's srcset/sizes is different from browser's native implementation

[kraftpixel]

What's the issue?

AMP's sizes attribute doesn't work in the same way as a browser's native implementation. AMP-IMG tag doesn't seem to be respecting the width of the element set by SIZES attribute and ends up loading the image based on the entire viewport width.

This was pointed out by our client. The test was done on a desktop browser. This does not happen normally as users will generally only land on AMP pages from a mobile device and these devices generally have a width below 600px. I'am mentioning the issue here just in case it's possible to address this difference.

How do we reproduce the issue?

Please disable caching through 'Developer Tools' > 'Network' tab > 'Disable Cache' then try out the following links on desktop to observe the difference.
Note : sizes="300px" in both the following cases.
Native Implementation : https://codepen.io/KraftPixel/pen/JrMQaJ
AMP Implementation : https://codepen.io/KraftPixel/pen/JrMQpN
For reference : Here is a screenshot of the output on a 1920x1080 -> https://i.imgur.com/g2jFaxu.png

What browsers are affected?

Tested on Google Chrome (Desktop)

Which AMP version is affected?

1506977814714

[aghassemi]

/cc @dvoytenko

[dvoytenko]

@cramforce is this the way you wanted this in the last PR?

[cramforce]

I did not realize there was the action-at-a-distance of handling the sizes attribute in framework land and srcset on the image itself.

I suppose we could revert to old behavior if the sizes attribute is present on the amp-img element as a quick fix?

I still think that going forward we should just use the native implementation here.

[dvoytenko]

@cramforce I suppose either way. Maybe we should just copy srcset/sizes from amp-img to img and leave the current implementation in place as a polyfill for those that do not support it?

[cramforce]

+1

[ampprojectbot]

This is a high priority issue but it hasn't been updated in awhile. Do you have any updates?

[ampprojectbot]

This is a high priority issue but it hasn't been updated in awhile. Do you have any updates?

[adelinamart]

Since is a high priority I'm assigning it to you @dvoytenko Feel free to re-assign.