AMP

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:

While they're not supported, they will render, but AMP won't validate your pages and you won't get all the benefits AMP provides.

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>
Открыть этот фрагмент в песочнице

READ ON – Learn more about advanced layout techniques.

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>
Открыть этот фрагмент в песочнице

NOTE – Include <script async custom-element="amp-anim" src="https://cdn.ampproject.org/v0/amp-anim-0.1.js"></script> in the head of your page to use this component.

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:

This browser does not support the video element.

<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:

Your browser doesn’t support HTML5 audio.

<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>
Открыть этот фрагмент в песочнице

NOTE – Include <script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script> in the head of your page to use this component.