Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 11 additions & 14 deletions builtins/amp-img.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,28 +14,25 @@ See the License for the specific language governing permissions and
limitations under the License.
-->

### <a name="amp-img"></a> `amp-img`
## <a name="amp-img"></a> `amp-img`

A runtime-managed replacement for the HTML `img` tag.

#### Behavior
### 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.
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` component allows the runtime to effectively manage image resources.

`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.
`amp-img` components, like all externally fetched AMP resources, must be given an explicit `width` and `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 a 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.
Additional image features like captions can be implemented with standard HTML, such as the `figure` and `figcaption` elements.

#### Attributes
### 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.
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**

Expand All @@ -47,13 +44,13 @@ 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"`
A string that indicates the attribution of the image, e.g., `attribution="CC courtesy of Cats on Flicker"`


#### Styling
### Styling

`amp-img` can be styled directly via CSS properties. Setting a grey background placeholder, for example, could be achieved via:

`amp-img` can be styled directly via CSS properties. Setting a grey background
placeholder for example could be achieved via:
```css
amp-img {
background-color: grey;
Expand Down