Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[MASTER FEATURE] <amp-img> sizes="auto" for srcset #19513

Open
ayumihamsaki opened this Issue Nov 28, 2018 · 1 comment

Comments

@ayumihamsaki
Copy link

ayumihamsaki commented Nov 28, 2018

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

This comment has been minimized.

Copy link
Member

aghassemi commented Nov 29, 2018

@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.

@aghassemi aghassemi added the P2: Soon label Nov 29, 2018

@aghassemi aghassemi referenced this issue Jan 9, 2019

Open

[Roadmap] 2019 - Q1 #2

5 of 11 tasks complete

@nainar nainar added this to 2019 Q1 in UI - Master Issues Jan 17, 2019

@nainar nainar changed the title feature request: <amp-img> sizes="auto" for srcset [MASTER FEATURE] <amp-img> sizes="auto" for srcset Jan 22, 2019

@nainar nainar added this to Next Up in AMP HTML Project Roadmap via automation Jan 22, 2019

@cathyxz cathyxz assigned cathyxz and unassigned aghassemi Jan 24, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.