Design Review 2020-08-12 20:00 UTC (amp-img deprecation)

[mrjoro]

Time: 2020-08-12 20:00 UTC (add to Google Calendar) Location: Video conference via Google Meet

The AMP community holds weekly engineering design reviews. We encourage everyone in the community to participate in these design reviews.

If you are interested in bringing your design to design review, read the design review documentation and add a link to your design doc or issue by the Monday before your design review.

When attending a design review please read through the designs before the design review starts. This allows us to spend more time on discussion of the design.

We rotate our design review between times that work better for different parts of the world as described in our design review documentation, but you are welcome to attend any design review. If you cannot make any of the design reviews but have a design to discuss please let mrjoro@ know on Slack and we will find a time that works for you.

[mrjoro]

The Viewers Working Group will be presenting their periodic update at this Design Review (10-15 minutes).

/cc @ampproject/wg-viewers @ericfs

[ericfs]

There are no major updates to share at this time.

[rbeckthomas]

I would like to review issue #29786 which deals with the deprecation plan for amp-img. Thanks!

[kristoferbaxter]

AMP Image Deprecation Notes (Will update in an edit).

One of the primary focuses of AMP-IMG is to lazyload the resources, and prevent CLS degradations. The native img element now supports the concepts without our wrapper.

We need to implement a few features around img to support current features in amp-img.

Native Sizing flag needs to be reversed, making native sizing the default instead of the exception.

• Malte: Native Image picked up AMPs approach to supporting native sizes.
• After loading this can cause shifts (provide incorrect values to pass the validation, but actually switch and violate CLS)
• This native size dimensions changes almost guarantees that there is an increase in CLS for pages not working as expected.
• Alan: Would we expect the aspect ratio values be required to be set to be considered valid.
• Malte: Use the css attr getter to set the default aspect ratio for browsers that do not yes support the default value set via the DOM Attrs.
• We could force all images to be inside an AMP Layout object to enforce size, but this would reduce the usefulness of the change and make it harder to use versus just standard images.
• Malte: We could use a hard informed aspect-ratio (img { aspect-ratio: attr(width) / attr(height) !important }) matching AMPs current behaviour. This would override the resizing when a size is fully known.
• Justin: What's the supported browser matrix for aspect-ratio and attr(width) and attr(height). Can we be certain it works as we want? (Good followup)

Blurry Placeholders

• Make the Blurry Placeholder change exclusively done via Cache Transformations.
• We lose Blurry Placeholders with this change if we do nothing.
• Alan: CSS Background image set to the low-src value can replicate the current implementation.
• Malte: We could switch the background image approach today independent of the img being valid.
• Malte: The chrome team is planning a change that the blurry placeholders do count for CLS, but only if the value has the same intrinsic size. Annie from the Chrome team is continuing to investigate.
• Kris: Let's make the LCP impact a non-goal and address with Browser vendors to see if we can help solve this generally.
• Alan: We should use the background-image approach

General theme of browser support questions.

• Which browsers work: Chrome and Firefox support it. (Question on iOS14)
• Would ESM mode limit the impact of unsupported devices?
• What's the fallback of this when it's unsupported?
• CSS Attr support is very low (https://caniuse.com/#feat=css3-attr)

CLS Impact of this change, what would cause a CLS increase here?

Browsers include in the default stylesheet a bounding box correctly for the image width and height as declared on the img element.

With the native image implementation not only can the dimensions change, but the aspect ratio can change as the image loads.

Devin Can we look at a sample of pages in the wild and see where its misreported? Malte The incentive changes when the value doesn't need to be accurate, with the native image size the browser can reflow as necessary and looks correct for developers with a higher CLS impact.

Rebecca When documents supply invalid values, how much do we care? Malte Sample pages would be really valuable, and sample HTML for developers to cover blurry placeholders if they chose to use native img elements.

Malte We should formulate an opinion for potential CLS impact based on real examples.

Malte Ok with bad CLS from poor publisher documents, not ok with general cases.

Alan: How do we replicate responsive sizes? We should have these examples. (width/height auto in css, values set on HTMLImageElement).

Rebecca: Should we test in prod with a sample? Alan lets first do sample pages and see if need to.

TODO: Rebecca Create Samples, and see if we can mitigate any issues for common occurrences.

Next Steps

• Create examples to see impact of migration and deprecation, bring to design review in a followup.