Summary

We would like to allow developers who write AMP to be able to use the native html img tag, use transforms to change existing amp-img tags to native img tags and after sufficient time remove amp-img from v0 and make it an optional component.

Motivation

The amp-img component was primarily created in order to allow for lazy-loading of images in amp pages in order to improve page performance. At the time the native html img tag did not allow for this which necessitated the creation of a custom extension.

Today however, the native img tag does allow for lazy loading through the use of the loading attribute. As a result the amp-img extension is no longer needed to achieve the performance improvements for which it was originally created.
Because of this the amp-img extension will need to be constantly updated in order to maintain feature parity with the native html img tag or risk obsolescence.

In the long term we would like to turn down the use of amp-img in new amp documents, instead allowing developers to use the native html img tag with the loading attribute set to lazy in order to achieve these results. This would remove the burden on amp contributors to constantly maintain feature parity and will additionally allow developers to create simple documents without needing to learn the usage of an extra amp extension.

Impact on existing users

This change will allow users to use native img in future development.

Additionally existing AMP documents which are run through transformers will be modified to replace all existing amp-img tags with img tags.

This will cause the following changes to the amp-img features:
Loading placeholder will no longer exist
The blurry image placeholder will need to be implemented with a background image.
The sizes attribute will no longer be calculated automatically.
height and width attributes will be required
The loading attribute will be required and set to lazy. (not supported on IE)

In order to achieve 1:1 visual parity the native images will also require display:block and margin:0 which are both automatically applied by amp-img css.

Examples:
Sizes/Aspect-ratio - https://glitch.com/edit/#!/amp-img-to-img
Blurry Image placeholder - https://glitch.com/edit/#!/amp-img-blurry-placeholder?path=amp.html%3A77%3A21

Alternative implementation suggestion for developers using AMP

Developers will now be able to use native img instead of amp-img.
We will offer developers the following guidance in order to achieve similar functionality that is offered to amp-img
Use loading= “lazy”
The height and width attributes will respect the actual size of the image, this will cause CLS if they are incorrect therefore for the best experience make sure you use the correct width and height.
Use display: block and margin: 0 which amp automatically applies.
When using srcset you must use sizes in addition in order to verify that the appropriately sized image is selected.

Deprecation Plan

Step 1: Allow developers to use native img in valid amp pages.
Step 2: Use transformers to change amp-img to native img
Step 3: Wait
Step 4: Remove amp-img from the module runtime, because all documents in this runtime have passed through a transformer we are guaranteed that they will only have native img
Step 5: Either remove amp-img entirely, or remove amp-img from v0 and convert it into a regular AMP extension.

/cc @ampproject/wg-approvers