[MASTER FEATURE] <amp-img> autogenerate sizes

[ghost]

I find making Responsive Images in amp-html actually harder than normal HTML (which should not be the case).

Take the following code examples:

The first example I am going to create a responsive image in normal html using the wonderful lazysizes library, see code example:

<img
    data-sizes="auto"
    data-src="image2.jpg"
    data-srcset="image1.jpg 300w,
       image2.jpg 600w,
       image3.jpg 900w"
    class="lazyload" />

The above library does the hard work for you with the attribute data-sizes="auto"

Taken from their Spec: "lazysizes supports setting the sizes attribute automatically, corresponding to the current size of your image - just set the value of data-sizes to auto."

I would love to see the feature in AMP-HTML so we can create the following code example:

<amp-img alt="Hummingbird"
  src="images/hummingbird-wide.jpg"
  width="640"
  height="457"
  srcset="images/hummingbird-wide.jpg 640w,
            images/hummingbird-narrow.jpg 320w"
  sizes="auto">
</amp-img>

[aghassemi]

@ayumihamsaki totally agree this would be a great feature. We have talked about it in the past #11575 (comment) . Thanks for the reference to lazysizes framework as well.

[cathyxz]

With #21742, this feature has now been launched to 100% of production. We'll monitor for a week and track/fix any bugs here. Following that, I will remove the experiment, update documentation, and close this issue.

[ghost]

@cathyxz Thank you for all your hard work, has this been mentioned in the doc's or is it just a case of adding the attribute sizes="auto" and amp will do the rest. I would like to beta test this, if I come across any errors where should I send a comment too?

[cathyxz]

Hi @ayumihamsaki !

You can just leave the sizes attribute blank, and make sure that the amp-img-auto-sizes experiment has been turned on (it is currently on by default, and you can check it here). If a sizes attribute is provided to <amp-img> it will be propagated to the underlying <img>, if not, a sizes attribute will be generated for the underlying <img> automatically.

This is not yet in documentation yet--I will document that when we have monitored it sufficiently and are ready to remove the experiment flag.

If you see errors, you can just comment on this github issue and tag me.