Story Player: Consider use of child img for poster instead of custom style property

[westonruter]

Given the usage of amp-story-player:

  <amp-story-player layout="fixed" width="360" height="600">
    <a
       href="https://preview.amp.dev/documentation/examples/introduction/stories_in_amp/"
       style="--story-player-poster: url('https://amp.dev/static/samples/img/story_dog2_portrait.jpg')"
    >
      Stories in AMP - Hello World
    </a>
  </amp-story-player>

The use of the --story-player-poster property means that the poster won't render until the amp-story-player JS is loaded, and this negatively impacts LCP (or at least, the poster may not show while the player is loading). The current way to reduce that LCP is to include amp-story-player-v0.css on the page. This, however, adds additional burden on authors to include a CSS file which they normally do not have to do when writing other AMP components. (Adding this CSS is not mentioned in the amp-story-player AMP component docs, but rather only in the guide for embedding stories in web pages). Including amp-story-player-v0.css on AMP pages also means 1KB additional CSS that subtracts from the overall 75KB amp-custom budget.

Another issue with using --story-player-poster is that custom style properties are not currently allowed in AMP, per #24262.

One other downside of using custom CSS properties in this way is that they are stripped out in email clients that convert HTML into something that is email-friendly. For example, I wrote a post that included an amp-story-poster and publishing this post caused an email to be sent out to my subscribers that only showed the link, without any image but only a link:

Post	Email

In a sanitized email context, the --story-player-poster is stripped out along with any amp-story-poster JS.

Proposal

I suggest that instead of using a custom style property that the component instead use an img (or amp-img). The link can also be marked as a placeholder so that it is automatically hidden once the component loads. So instead of the above, it could look as followed:

  <amp-story-player layout="fixed" width="360" height="600">
    <a
       href="https://preview.amp.dev/documentation/examples/introduction/stories_in_amp/"
       placeholder
    >
        <amp-img 
            src="https://amp.dev/static/samples/img/story_dog2_portrait.jpg"
            alt="Stories in AMP - Hello World"
            layout="fill"
            object-fit="contain"
        ></amp-img>
    </a>
  </amp-story-player>

In a non-AMP context, an img can be used (or also in AMP once amp-img is deprecated per #30442):

  <amp-story-player style="width:360px; height: 600px; position:relative;">
    <a href="https://preview.amp.dev/documentation/examples/introduction/stories_in_amp/">
        <img 
            src="https://amp.dev/static/samples/img/story_dog2_portrait.jpg"
            alt="Stories in AMP - Hello World"
            loading="lazy"
            decoding="async"
            style="position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%; object-fit:contain;"
        >
    </a>
  </amp-story-player>

In doing so, the placeholder poster image will render without needing any CSS and it will render in other contexts like when the HTML is sanitized for email.

An img also seems to be a more semantic use of markup.

cc @ampproject/wg-stories @Enriqe

[Enriqe]

Discussed with the team and we have agreed to switch to an <img loading="lazy"> for the poster image mechanism. We will not be using <amp-img> for the AMP version since it's going to be deprecated anyways. We will also maintain support for the existing CSS variable but will remove it from documentation.

Using the <img> tag ensures that we're just using HTML so it should be interpreted correctly by browsers when it comes to computing LCP, over an <amp-img>. Plus it's AMP/non-AMP consistent

[newmuis]

Request: can we put some semantic marker on the image, so that we know it's the poster image? Like <img loading="lazy" is-this-the-poster-image="yep"> (feel free to bikeshed the exact API).

I suspect this might help with forwards compatibility.

[kristoferbaxter]

Let's coordinate this change with the i2d of amp-img if possible.

Adding support for img directly may require data-hero attributes for non lazyload scenarios or additional enforced classnames to ensure compatibility.

[gmajoulet]

Kris, do you have any link or doc for us to get more information on these attributes and classnames?
The Story Player being available for both AMP and non AMP, we got pretty excited at the idea of keeping the HTML configuration consistent.

[kristoferbaxter]

@gmajoulet @rebeccanthomas is working on these documents right now, can coordinate to ensure it's clear how to achieve this.

[gmajoulet]

@Enriqe I think this should stay P1 and be done before we communicate widely about the player on social networks / blogs etc. We're going to change the API for a superior one that has positive performance implications so it'd be awesome to get as many people as possible using it.

Do you think it'd be possible to split this ticket in two and:

1. For non AMP, recommend using <img loading="lazy" and update all our examples
2. For AMP, switch to amp-img as the inlined variable is invalid AMP anyway, and then we'll follow amp-img's deprecation

[kristoferbaxter]

Another option, we could team up and ship the change to allow img loading=lazy as valid for AMP documents with more expediency.

This part is the first phase of deprecating amp-img but can be done standalone much faster.