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;
}