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:

Images

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

<amp-img src="fixed.jpg" width="264" height="96"></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.

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 src="responsive.jpg" width="527" height="193" 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="my-gif.gif">
  <amp-img placeholder width="400" height="300" src="my-gif-screencap.jpg">
  </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 width="400" height="300" src="https://yourhost.com/videos/myvideo.mp4"
  poster="myvideo-poster.jpg">
  <div fallback>
    <p>Your browser doesn’t support HTML5 video</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 placeholder before the audio starts, and a fallback, if the browser doesn't support HTML5 audio, for example:

<amp-audio width="400" height="300" src="https://yourhost.com/audios/myaudio.mp3">
  <div fallback>
    <p>Your browser doesn’t support HTML5 audio</p>
  </div>
  <source type="audio/mpeg" src="foo.mp3">
  <source type="audio/ogg" src="foo.ogg">
</amp-audio>