Skip to content

Add noscript>img fallbacks for amp-img #1832

@westonruter

Description

@westonruter

Search engines that index AMP pages that have <amp-img> will likely not know what the web component is, at a semantic level. Unless they have special logic to recognize what an amp-img is, they would have to fire up a headless browser to actually render the page with JavaScript in order to find out what the web component constructs in the DOM. Beyond search engines, users who have JavaScript disabled are also adversely affected by amp-img because it does not render given the lack of the AMP runtime.

However, as can be seen at https://ampbyexample.com/components/amp-img/ the amp-img element allows a regular img as fallback content if it inside of a noscript element:

<amp-img src="/img/amp.jpg"
  alt="AMP"
  width="475"
  height="268"
  layout="responsive">
  <noscript>
    <img src="/img/amp.jpg" width="475" height="268" alt="AMP"> 
  </noscript>
</amp-img>

So instead of replacing an img with an amp-img, we should be constructing an amp-img and then inserting the original img as a descendant of an added noscript element.

Related #1316: Add support for <picture> element, which also involves fallbacks.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions