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.

Example

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

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="an image"></amp-img>