SSR all amp-img tags to img (not just the hero images)

[twifkak]

trafficstars

@jridgewell's http://cl/327496988 (c/o #466) converts hero images from amp-img to amp-img > img and adds link rel=preload.

In addition, for SXG, we should convert all amp-imgs on the page to amp-img > img[loading=lazy] (but not preload them). Thus, all images above the fold can be fetched and decoded before full layout, but at a lower priority than hero images.

Example: https://jsfiddle.net/Ln9yejr3/show

This is particular to SXG-optimized AMP, because loading=lazy isn't implemented in all browsers that AMP targets, but it is implemented in almost all browsers that support SXG. (~3% of Chromium browsers are 73-75.)

As a precondition to this change, SXG-supporting AMP caches should remove the non-hero img tags when retransforming for unsigned use (which includes a higher fraction of non-loading=lazy-supporting browsers), so that the prerender network usage is the same as non-SXG AMP.

Moving discussion from https://github.com/ampproject/amphtml/pull/29025#discussion_r472493977. /cc @sebastianbenz @cramforce @jridgewell

[jridgewell]

This sounds good. I think we can add loading=lazy to the SSR validator rules, then use that as the signal that this <img> is a low priority one (high priority ones should not lazy load).

[jridgewell]

/tryassign @jridgewell

[amp-invite-bot[bot]]

I've assigned this issue to @jridgewell.

[jridgewell]

• Validator: allow loading=lazy on SSR'd amp-img > img
• Amp Packager SSR: Inject a loading=lazy img for every amp-img

The C++ transformer already removes SSR'd amp-img > img, so it's covered.

[twifkak]

Is there anything left to do on this (besides e2e testing)?

[jridgewell]

No, I think that's it.