Include images & video

Like on a normal HTML page, AMP allows you to embed images, video and audio content. Learn what's different about the AMP equivalents and learn how to include them in your pages.

Why not <img>, <video> and <audio>?

AMP doesn't support the default HTML counterparts to displaying media, like <img>. We provide equivalent components for the following reasons:

• We need to understand layout of the page before assets load, crucial to support first-viewport preloading
• We need to control network requests to lazy load and prioritize resources effectively

Images

Include an image in your page using the amp-img element, like so:

<amp-img alt="A beautiful sunset"
  src="/static/inline-examples/images/sunset.jpg"
  width="264"
  height="195">
</amp-img>

In this most basic example, the image will display with the specified fixed height and width. At minimum, an explicit width and height needs to be set.

Displaying images when JavaScript is disabled

As <amp-img> relies on JavaScript, if the user chooses to disable scripts, images won't display. In this case, you should provide a fallback to the image using <img> and <noscript>, like so:

<amp-img src="/static/inline-examples/images/sunset.jpg"
  width="264"
  height="195"
  alt="...">
  <noscript>
    <img src="/static/inline-examples/images/sunset.jpg" width="264" height="195" alt="...">
  </noscript>
</amp-img>

Advanced layouts

AMP makes it much easier than with standard CSS/HTML to create fully responsive images. In its most basic form, all you have to do is to add layout="responsive":

<amp-img alt="A view of the sea"
  src="/static/inline-examples/images/sea.jpg"
  width="900"
  height="675"
  layout="responsive">
</amp-img>

Behavior and placeholders

The AMP HTML runtime can effectively manage image resources, choosing to delay or prioritize resource loading based on the viewport position, system resources, connection bandwidth, or other factors.

Animated images

The amp-anim element is very similar to the amp-img element, and provides additional functionality to manage loading and playing of animated images such as GIFs.

<amp-anim width="400"
  height="300"
  src="/static/inline-examples/images/wavepool.gif"
  alt="...">
  <amp-img placeholder
    width="400"
    height="300"
    src="/static/inline-examples/images/wavepool.png"
    alt="...">
  </amp-img>
</amp-anim>

Video

Include a video in your page using the amp-video element.

Only use this element for direct HTML5 video file embeds. The element loads the video resource specified by the src attribute lazily, at a time determined by AMP.

Include a placeholder before the video starts, and a fallback, if the browser doesn't support HTML5 video, for example:

<amp-video controls
  width="640"
  height="360"
  src="/static/inline-examples/videos/kitten-playing.mp4"
  poster="/static/inline-examples/images/kitten-playing.png">
  <div fallback>
    <p>This browser does not support the video element.</p>
  </div>
</amp-video>

Audio

Include an audio resource in your page, using the amp-audio element.

Only use this element for direct HTML5 audio file embeds. Like all embedded external resources in an AMP page, the element loads the audio resource specified by the src attribute lazily, at a time determined by AMP.

Include a fallback, if the browser doesn't support HTML5 audio, for example:

<amp-audio width="400"
  height="200"
  src="/static/inline-examples/audio/cat-meow.mp3">
  <div fallback>
    <p>Your browser doesn’t support HTML5 audio.</p>
  </div>
  <source type="audio/mpeg"
    src="/static/inline-examples/audio/cat-meow.mp3">
  <source type="audio/ogg"
    src="/static/inline-examples/audio/cat-meow.ogg">
</amp-audio>

• Written by @pbakaus
  with contributions from @Meggin and @bpaduch