#BlackLivesMatter
AMP
  • email

amp-img

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>

You can use the amp-bind extension for dynamically changing an image.

<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.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.

AMP
<amp-img src="https://amp.dev/static/samples/img/amp.jpg"
  width="1080"
  height="610"
  layout="responsive"
  alt="AMP"></amp-img>

Offline fallback

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

offline
<amp-img src="https://amp.dev/static/samples/img/does-not-exist.jpg"
  width="300"
  height="100"
  layout="responsive"
  alt="a non-existent image">
  <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.

<amp-img src="https://amp.dev/static/samples/img/amp.jpg"
  width="475"
  height="268"
  layout="responsive"
  alt="AMP">
</amp-img>

Hiding the loading indicator

Use the noloading attribute to hide the loading indicators on page load. This is recommended for logos and small images/icons.

<amp-img src="https://amp.dev/static/samples/img/amp_by_example_logo.svg"
  width="208"
  height="40"
  alt="AMP by Example"
  noloading></amp-img>

Vertically centering an amp-img

Here is a simple approach to vertically center an amp-img using the flex layout (src):

<div class="outer">
  <amp-img class="inner"
    layout="responsive"
    src="https://unsplash.it/300/200"
    width="3"
    height="2"
    alt="a vertically centered amp-img">
  </amp-img>
</div>

...and here is the CSS:

.inner{
  flex-basis: 0;
  -ms-flex-preferred-size: 0;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}
.outer {
  height: 320px; /* adjust to your needs */
  display: flex;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
Требуются дальнейшие объяснения?

Если на этой странице нет ответов на все ваши вопросы, обратитесь к другим пользователям AMP и обсудите свой конкретный сценарий использования.

Перейти на Stack Overflow
Не нашли пояснения к функции?

Проект AMP активно поощряет ваше участие и сотрудничество! Мы надеемся, что вы станете постоянным участником нашего открытого сообщества, но разовые вклады в работу над задачами, которые вам особенно интересны, также приветствуются.

Редактировать пример на GitHub