| Description | A runtime-managed replacement for the HTML img tag. |
| Availability | Stable |
| Examples | responsive.amp.html |
The following lists validation errors specific to the amp-img tag
(see also amp-img in the AMP validator specification:
| Validation Error | Description |
|---|---|
| MANDATORY_TAG_ANCESTOR_WITH_HINT | Error thrown if your AMP document uses img instead of amp-img. Error message: The tag . |
| MANDATORY_ONEOF_ATTR_MISSING | Error thrown when neither src or srcset is included. One of these attributes is mandatory. |
| MISSING_URL | Error thrown when src or srcset attribute is missing it's URL. |
| INVALID_URL | Error thrown when src or srcset attribute's URL is invalid. |
| IMPLIED_LAYOUT_INVALID | Error thrown when implied layout is set to CONTAINER; this layout type isn't supported. |
| SPECIFIED_LAYOUT_INVALID | Error thrown when specified layout is set to CONTAINER; this layout type isn't supported. |
| INVALID_PROPERTY_VALUE_IN_ATTR_VALUE | Error thrown when invalid value is given for attributes height or width. For example, height=auto triggers this error for all supported layout types, with the exception of NODISPLAY. |
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. If the resource requested by the amp-img component fails to load, the space will be blank. 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;
}