Add a max-width attribute for amp-img elements with layout=responsive.

Small AMP images that have layout=responsive are upscaled if the available space is larger. This can be fixed by adding a special ID and a max-width style in style amp-custom, but this is cumbersome if there are lots of images, and if the page styles are generated independently of the page content. You

You could also use the sizes attribute to achieve this, but that is difficult if there is no simple relationship between the viewport width and the available width for the image (e.g. multiple columns).

It would be great to have an additional max-width attribute that acts the same as an inline style (style="max-width: 92px"):

<amp-img src="..." alt="..." width="92" height="64" max-width="92" layout="responsive"></amp-img>

[SchnWalter]

Looking back on this, I think that @aghassemi is right, min and max attributes aren’t really that confusing, but we need to be clear in the documentation to what layouts they apply.

From what I can tell a table like this one would help:

layout	min-height/max-height	min-width/max-width
container	❌	❌
fill	❌ *	❌ *
fixed	❌	❌
fixed-height	❌	✅
flex-item	❌ **	❌ **
nodisplay	❌	❌
responsive	✅	✅

* maybe, the fill layout could also accept all min/max attributes. ** also, the flex-item layout could use individual, inline min/max limits, but I’m not so sure about these.

[aghassemi]

@SchnWalter I don’t see how a new attribute (which will be opt-in) would break existing websites. Am I missing something?

Is there a difference between <amp-img width=400 height=200 layout=shrink-only> and <amp-img width=400 height=200 max-width=400 max-height=200 layout=responsive> in terms of the behaviour you had in mind for layout=shrink-only?