Amphtml: Document PICTURE tag replacement

[machal]

When I'm trying to use <picture> element…

<picture>
  <source src="https://satyr.io/160x90/red" 
    media="(max-width: 599px)">
  <amp-img src="https://satyr.io/160x90/green" 
    width="16" height="9" layout="responsive"
    media="(min-width: 600px)">
</picture>    

https://jsbin.com/voresus/edit?html,output

…I'm getting this message from AMP validator:

The parent tag of tag 'picture' is 'body', but it can only be 'noscript'

I have read some texts saying something like "<picture> is replaced by inheriting <amp-img> and media="" attribute"…

But why? The answer is impossible to find.

Suggested steps

1. If <picture> is disallowed, it should be here: https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#html-tags
2. There should be section about <picture> replacement in he AMP docs for amp-img and Responsive images with srcset, sizes & heights both mentions all <picture> use cases and how to solve them in AMP.

[honeybadgerdontcare]

@twifkak @Gregable

[Gregable]

@pbakaus this seems like a documentation issue, not a validation one. Picture is not allowed.

[robinpokorny]

A related question: what is the current status of having <picture> (<amp-picture>) or somehow supporting all its use cases in AMP?

[Gregable]

@ampproject/wg-ui-and-a11y

[aghassemi]

@robinpokorny @machal Functionality that picture provides such as responsive art direction and various encoding supported in AMP via media and amp-img. https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/responsive_design has a nice write up on the topic.

[aghassemi]

Agree that we should document picture being prohibited and point to https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/responsive_design from https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#html-tags .

/to @CrystalOnScript If I remember correctly, you were working on some image related documentation with Cathy? This might be a good one to point out in there as well.

[robinpokorny]

@aghassemi Then I'd like to challenge that the current status solves providing different image formats.

For example the current code:

<amp-img alt="Mountains"
  width="550"
  height="368"
  layout="responsive"
  src="images/mountains.webp"
  srcset="images/mountains.webp 550w, images/mountains_hd.webp 1100w"
  sizes="550px"
  >
  <amp-img alt="Mountains"
    fallback
    width="550"
    height="368"
    layout="responsive"
    src="images/mountains.jpg"
    srcset="images/mountains.jpg 550w, images/mountains_hd.jpg 1100w"
    sizes="550px"
  ></amp-img>
</amp-img>

This will in browsers not supporting WebP (e.g. Safari on my MacBook), download 3 images! (images/mountains_hd.webp from srcset, then images/mountains.webp from src, and images/mountains_hd.jpg from srcset).

[sparhami]

@aghassemi Then I'd like to challenge that the current status solves providing different image formats.

This will in browsers not supporting WebP (e.g. Safari on my MacBook), download 3 images! (images/mountains_hd.webp from srcset, then images/mountains.webp from src, and images/mountains_hd.jpg from srcset).

The current recommendation for that use case is to configure the image server to serve webp based on the accept header. The browser will render the content based on the actual returned image, so it should handle webp just fine. See https://github.com/ampproject/amphtml/issues/21912#issuecomment-486474488 for more details.

[sisidovski]

This will in browsers not supporting WebP (e.g. Safari on my MacBook), download 3 images! (images/mountains_hd.webp from srcset, then images/mountains.webp from src, and images/mountains_hd.jpg from srcset).

I've just run into same issue. I thought fallback attribute was common use case for serving different image format, as far as reading documentation pages below.
https://amp.dev/documentation/components/amp-img?referrer=ampproject.org#example:-specifying-a-fallback-image
https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/placeholders?referrer=ampproject.org#example:-serve-different-image-formats

fallback attribute for this use case affects site performance. So hopefully documentation should have a message something like " I made testing page btw. https://amp-img-fallback-comparison.glitch.me/

So, I would say it's nice to have a note which mentions performance issue in documentation, or mention https://github.com/ampproject/amphtml/issues/21912#issuecomment-486474488 so far.

[machal]

@CrystalOnScript I don't think this solves the issue. This is solution for multiple images downloading problem mentioned by @robinpokorny.

I've suggested:

1. If is disallowed, it should be here: https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#html-tags
2. There should be section about replacement in he AMP docs for amp-img and Responsive images with srcset, sizes & heights both mentions all use cases and how to solve them in AMP.

[CrystalOnScript]

@machal the spec does state that picture is disallowed, addressed in this PR.

I apologize, but I'm confused by the phrasing of your second bullet, It is unclear what your request update is. Would you mind expanding?

[machal]

@CrystalOnScript So, my first point is solved, thank you!

Second point was suggestion to update these pages (or one of them):

• https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/art_direction/
• https://amp.dev/documentation/components/amp-img/

When I was looking for the information about <picture>, those pages were first I've visited. I think this is really common scenario.

I was searching for this information:

• is the <picture> tag forbidden in AMP? (should be solved by link to existing specs)
• why is <picture> forbidden (this kind of information ("why something is different then in standard HTML") is AMP docs generally missing)
• how to replace <picture> tag (most common scenarios)

[CrystalOnScript]

From my understanding, the <picture> tag is used to serve different image formats in an optimized way with fallbacks if the browser does not support it. Replacing picture tag is outlined here:

Create responsive AMP pages: Providing optimized images

and

Changing the art direction of an image

[CrystalOnScript]

@machal - while we do have documentation on img and picture replacements in AMP, because images are extremely important on the web, I've made a point to open a documentation issue with amp.dev here. While I think the initial issue is resolved, there is room for further documentation and clarification on images in AMP. Thanks for raising this issue!