Add mechanism for selecting image file based on capability

[Gregable]

WebP images are not supported on all browsers, but can be enabled per browser as a means of reducing bytes on the wire.

In the case of the AMP Cache, the origin can't respond selectively with different image types based on the browser request headers, so the decision of image variant would need to be something the browser selects.

With a <picture> tag, this is possible outside of AMP, ie:

<picture>
  <source type="image/webp" srcset="image.webp">
  <img src="image.jpg">
</picture>

However, AMP doesn't seem to have anything similar with <amp-img>.

[ericlindley-g]

Slotting in Backlog to start, but please feel free to update if the milestone is different or changes

[dvoytenko]

I'd like to consider a more general element, e.g. <amp-select-one> that would interrogate its children based on media queries, browser capabilities, network parameters, etc and would pick the winning child and hide all other.

[Jxck]

@dvoytenko that seems <amp-picture> with source, not <amp-select-one>.

[Gregable]

It would also be nice if this would work in all image scenarios, such as amp-carousel, amp-image-lightbox, amp-anim, etc. A high level amp-select-one would work, but I'm amp-picture would only solve one.

[eike-hass]

We encountered some trouble trying to take the art-direction approach for selecting images in an amp-carousel on different breakpoints and ended up rendering an amp-image per breakpoint and toggling them with CSS (the same thing should be possible with the media attribute from the layout spec). For the carousel we then did some CSS-trickery to account for the changes in ratio. For images the <amp-picture> approach would be the closest thing to existing specs. Would you suggest that the <amp-select-one> acts as a "media-query provider" in HTML and simply hides/shows content? For our scenario we would like to change the carousel config (width, height, slides/carousel) or even disable the carousel based on media-queries. Would this work somehow?

[dvoytenko]

@eike-hass To clarify, do you mean <amp-carousel type=slides>? If so, this element (and many others, including amp-img) support different sizing options based on the media queries. They are described in layout documentation.

In particular:

• media attribute allows showing/hiding elements based on the media query. E.g. media="(min-width: 320px)" would show the element only on viewports with at least 320px width.
• sizes attribute allows customizing width for layout=responsive elements. E.g. sizes="(min-width: 320px) 320px, 100vw" would give the element the width of 320px on the viewports with width of 320px and more; smaller viewports will get 100vw.

Layout-wise, most of what <picture> element provides can be accomplished with a set of <amp-img> elements using these two attributes.

Depending on how you source images for your carousel, you can always pick the best aspect ratio and use object-fit CSS to fit the image if you can't get the perfect aspect ratio.

[eike-hass]

@dvoytenko thank you for the information. We were able solve many of our challenges. Especially the heights attribute was very useful. Only the switch between the display modes of the carousel (slides, carousel) on certain breakpoints remains. Should we open another issue for that?

[dvoytenko]

Yes, let's definitely discuss it in a separate thread.

[adelinamart]

@Gregable is this still a valid request? Thanks

[adelinamart]

@ericlindley-g to decide if we still need this. Thanks

[Gregable]

@adelinamart , it's still a valid request. I don't know if it's a priority.

[88kbbq]

I've come across this issue building a static site using Jekyll. Since AMP is designed for static sites, this fix would require amp-img support to run some sort of JS polyfill for browsers that lack support. There is no other way around this. Please, no more hacks.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.

[Gregable]

I think this is still a reasonable request. Publishers should be able to select between image formats based on capability.

[Gregable]

I'll add that AVIF support on origin is another new reason to consider implementing this.

[pbakaus]

I want to lend my support to this. We need to support the picture tag, or an equivalent of it. This is a big shortcoming in AMP to date (and the workarounds with the media attribute are very hacky).

[kristoferbaxter]

I agree this should be supported. My preference would be to support the native HTMLImageElement and thus extend support for native HTMLPictureElement to solve instead of a custom web component that achieves the same purpose.