Skip to content

Latest commit

 

History

History
85 lines (60 loc) · 3.52 KB

amp-img.md

File metadata and controls

85 lines (60 loc) · 3.52 KB
Raw

amp-img

Description A runtime-managed replacement for the HTML img tag.
Availability Stable
Supported Layouts FILL, FIXED, FIXED_HEIGHT, FLEX_ITEM, NODISPLAY, RESPONSIVE
Examples amp-img.html
responsive.amp.html

Behavior

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 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.

Attributes

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"

Styling

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

Validation

See amp-img rules in the AMP validator specification.