amp-img

Edit on Github
Open in Playground

Introduction

AMP HTML files don't support the normal HTML img tag. With amp-img AMP provides a powerful replacement.

Setup

amp-img is a built-in element and is automatically imported via the AMP runtime.

<script async src="https://cdn.ampproject.org/v0.js"></script>

Basic Usage

A simple responsive image - width and height are used to determine the aspect ratio. Use alt to specify text that can act as an alternative for the image.

Example

<amp-img src="/img/amp.jpg"
  width="1080"
  height="610"
  layout="responsive"
  alt="AMP"></amp-img>

srcset

Use srcset to specify different images for varying viewport widths and pixel densities (change the width of your browser windows to test it).

Example

<amp-img src="/img/amp.jpg"
  srcset="/img/amp.jpg 1080w, /img/amp-900.jpg 900w, /img/amp-800.jpg 800w,
/img/amp-700.jpg 700w, /img/amp-600.jpg 600w, /img/amp-500.jpg 500w, /img/amp-400.jpg 400w,
/img/amp-300.jpg 300w, /img/amp-200.jpg 200w, /img/amp-100.jpg 100w"
  width="1080"
  height="610"
  layout="responsive"
  alt="AMP"></amp-img>

Offline Fallback

amp-img supports AMP's common attributes, this means you can show a fallback in case the image couldn't be loaded. This is great for adding offline support to your AMPs.

Example

offline
<amp-img src="/img/does-not-exist.jpg"
  width="300"
  height="100"
  layout="responsive"
  class="m1">
  <div fallback>offline</div>
</amp-img>

No Script

If you want to ensure that users with javascript disabled can see your images, you can add an additional img element inside a noscript tag. This also makes it possible for webcrawlers without javascript runtime to discover your images.

Example

<amp-img src="/img/amp.jpg"
  alt="AMP"
  width="475"
  height="268"
  layout="responsive"
  class="m1">
  <noscript>
    <img src="/img/amp.jpg" width="475" height="268" alt="AMP"> 
  </noscript>
</amp-img>