Allow picture element in noscript tag

[martindybal]

this is linked to the issue 1279

Now is allowed have <img>, <video>, and <audio> in <noscript>. It'll be nice to have some way how to create a fallback for webp format when user didn't have javascript allowed. I think it should also be allowed to have <picture> element in <noscript> .

There is a simple example:

<amp-img alt="The main square of Brno, Czech republic" width="1200" height="800" layout="responsive" src="images/brno.webp">
    <amp-img alt="The main square of Brno, Czech republic" fallback width="1200" height="800" layout="responsive" src="images/brno.jpg"></amp-img>
</amp-img>

<noscript>
    <picture>
        <source type="image/webp" sizes="images/brno.webp">
        <source type="image/jpeg" sizes="images/brno.jpg">
        <img alt="The main square of Brno, Czech republic" width="1200" height="800" sizes="" src="images/brno.jpg">
    </picture>
</noscript>

[aghassemi]

SGTM

/to @Gregable

[Gregable]

SGTM too.

In the meantime, I believe you can accomplish the same thing on a single img tag using srcset and sizes attributes.

[Gregable]

Actually @aghassemi , is there a reason we couldn't allow something similar for <amp-img>, so this isn't a noscript-specific rule?

<picture>
   <source type="image/webp" srcset="images/brno.webp">
   <source type="image/jpeg" srcset="images/brno.jpg">
   <amp-img ...>
</picture>

Does this work? What would we need to do to make it work? It would address #3517 as well.

[Gregable]

In the meantime, I believe you can accomplish the same thing on a single img tag using srcset and sizes attributes.

This is incorrect, I didn't initially realize you were doing this to select webp.

As an aside, your top amp-img approach, using a fallback, does work but isn't great. A non-webp browser will download both images, first the webp, then failing to decode it, the jpg. This actually adds latency for non-webp browsers, even if it does improve latency for webp browsers. The AMP Cache does do webp transcoding automatically for webp capable browsers, but this doesn't help on your own origin unless you can Vary based on Accept headers.

[martindybal]

OK, so what is correct solution for support non-webp browser? There is same sample in the documentation https://www.ampproject.org/docs/design/responsive/responsive_design#providing-optimized-images maybe it should change or it should be mentioned there.

[Gregable]

Ah, I didn't realize that this was being recommended. It's the only solution that works today that I know of, I'm just hoping @aghassemi or someone else has ideas for making this better.

[aghassemi]

yes, we essentailyl cover picture's main use-case via fallback on amp-img. I like some of the proposals on #3517 around this particularly #3517 (comment) but main use-case of falling back from WebP is covered so less of a priority

[aghassemi]

Closing since noscript part was fixed by #18996 and rest is either covered or dup of #3517