| Description | A runtime-managed replacement for the HTML img tag. |
| Availability | Stable |
| Supported Layouts | fill, fixed, fixed-height, flex-item, nodisplay, responsive |
| Examples | Annotated code example for amp-img |
The runtime may choose to delay or prioritize resource loading based on the viewport position, system resources, connection bandwidth, or other factors. The amp-img components allows the runtime to effectively manage image resources this way.
amp-img components, like all externally fetched AMP resources, must be given an
explicit size (as in width / height) in advance, so that the aspect ratio can be known without fetching the image. Actual layout behavior is determined by the layout attribute. For details on layouts, see AMP HTML Layout System and Supported Layouts.
If the resource requested by the amp-img component fails to load, the space will be blank unless a fallback child is provided. A fallback is only executed on the initial layout and subsequent src changes after the fact (through resize + srcset for example) will not have a fallback for performance implications.
A placeholder background color or other visual can be set using CSS selector and style on the element itself.
The amp-img includes attributes for denoting attribution via the attribution attribute.
Additional image features like captions can be implemented with standard HTML - using the figure and figcaption elements, for example.
src
Similar to the src attribute on the img tag. The value must be a URL that
points to a publicly-cacheable image file. Cache providers may rewrite these
URLs when ingesting AMP files to point to a cached version of the image.
srcset
Same as srcset attribute on the img tag. The behavior will be polyfilled where not natively supported.
alt
A string of alternate text, similar to the alt attribute on img.
attribution
A string that indicates the attribution of the image. E.g. attribution="CC courtesy of Cats on Flicker"
amp-img can be styled directly via CSS properties. Setting a grey background
placeholder for example could be achieved via:
amp-img {
background-color: grey;
}See amp-img rules in the AMP validator specification.