amp-img

Действия

Среда выполнения может задерживать загрузку ресурсов или повышать ее приоритет в зависимости от системных ресурсов, пропускной способности, положения области просмотра и других факторов. Компоненты amp-img позволяют среде выполнения эффективно управлять графическими ресурсами.

Для компонентов amp-img, как и для всех получаемых извне ресурсов AMP, должен быть задан конкретный размер (например width/height). Это необходимо, чтобы соотношение сторон можно было узнать, не извлекая изображение. Поведение макета определяется атрибутом layout.

Пример: показ адаптивного изображения

В примере ниже показывается изображение, которое реагирует на размер области просмотра благодаря настройке layout=responsive. Оно растягивается и сжимается в соответствии с соотношением сторон, заданным с помощью свойств width и height.

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

Если ресурс, запрошенный компонентом amp-img не загружается, а дочерний элемент fallback отсутствует, пространство будет пустым. Резервное изображение показывается только в исходном макете. При последующих изменениях src, например с помощью resize + srcset, оно не используется. Это позволяет повысить эффективность.

Пример: показ резервного изображения

В этом примере, если браузер не поддерживает WebP, показывается резервное изображение JPG:

<amp-img alt="Mountains"
  width="550"
  height="368"
  src="/static/inline-examples/images/mountains.webp">
  <amp-img alt="Mountains"
    fallback
    width="550"
    height="368"
    src="/static/inline-examples/images/mountains.jpg"></amp-img>
</amp-img>

Цвет фона и другие графические элементы для резервного изображения можно задать с помощью селектора CSS и стиля самого элемента.

Дополнительные функции, такие как подписи, можно реализовать с помощью стандартного HTML (например, figure и figcaption).

Атрибуты

src

Этот атрибут похож на src в теге img. Значение должно быть URL, указывающим на общедоступный кешируемый файл изображения. Поставщики кеша могут переписывать эти URL при приеме AMP-файлов, чтобы добавить указание на кешированную версию изображения.

srcset

Аналог атрибута srcset в теге img. Для браузеров, которые не поддерживают srcset, <amp-img> будет по умолчанию использовать src. Если есть только srcset, а src отсутствует, будет выбран первый URL в srcset.

sizes

Аналог атрибута sizes в теге img.

alt

Строка альтернативного текста, похожая на атрибут alt в img.

attribution

Строка, которая указывает на атрибуцию изображения. Пример: attribution="CC courtesy of Cats on Flicker".

height и width

Конкретные размеры, по которым среда выполнения AMP определяет соотношение сторон без извлечения изображения.

common attributes

Этот элемент содержит распространенные атрибуты, расширенные до компонентов AMP.

Поддержка стилей

Стиль amp-img можно задать непосредственно через свойства CSS. Вот пример для серого фона:

amp-img {
  background-color: grey;
  }

Справочный центр

Масштабирование изображения до максимальной ширины

Если вы хотите, чтобы ваше изображение масштабировалось с учетом размера окна, но до максимальной ширины и не далее, выполните следующие действия:

1. Задайте layout=responsive для <amp-img>.
2. В контейнере изображения укажите CSS-атрибут max-width:<max width to display image>. Почему в контейнере? Элемент amp-img со свойством layout=responsive является блочным, тогда как <img> – встроенный. В качестве альтернативы вы можете добавить атрибут display: inline-block в CSS для элемента amp-img.

Различия между адаптивным и встроенным макетами

Макеты responsive (адаптивный) и intrinsic (встроенный) создают изображение, которое масштабируется автоматически. Однако intrinsic использует изображение SVG в качестве элемента масштабирования. Поэтому поведение не отличается от стандартного HTML-изображения, а браузер при этом получает данные о размере в исходном макете. Макет intrinsic имеет собственный размер и увеличивает плавающий элемент div, пока не будет достигнут естественный размер изображения или ограничение в CSS (например, max-width). Макет responsive будет отображать 0 x 0 в плавающем div, поскольку изображение наследует размер от родительского элемента, а у него в плавающем виде размер отсутствует.

Установка изображения фиксированного размера

Чтобы изображение показывалось в фиксированном размере, выполните следующие действия:

1. Задайте layout=fixed для <amp-img>.
2. Укажите значения для width и height.

Установка соотношения сторон

Для адаптивных изображений значения width и height не обязательно должны в точности совпадать с шириной и высотой amp-img. Достаточно соблюдать то же соотношение сторон.

Например, вместо width="900" и height="675" можно задать width="1.33" and height="1".

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

Настройка нескольких исходных файлов для разных разрешений экрана

Чтобы добавить варианты изображения с разным разрешением но одним и тем же соотношением сторон, используйте атрибут srcset. Браузер будет автоматически выбирать наиболее подходящий файл из списка srcset, учитывая разрешение и размер пользовательского экрана.

Атрибут media наоборот показывает или скрывает компоненты AMP. Его следует применять при создании адаптивных макетов. Чтобы добавить изображения с разным соотношением сторон, используйте несколько компонентов <amp-img>. В каждый из них необходимо добавить атрибут media, соответствующий ширине экрана для показа экземпляра.

Ознакомьтесь с руководством по созданию адаптивных AMP-страниц.

Сохранение соотношения сторон для изображений с неизвестными размерами

Системе макетов AMP необходимо знать соотношение сторон изображения до его извлечения. Однако в некоторых случаях размеры недоступны. Чтобы показать такие изображения и сохранить соотношение сторон, используйте AMP-шаблон fill вместе со свойством CSS object-fit/ Ознакомьтесь со статьей о том, как обеспечить поддержку изображений с неизвестными размерами на сайте AMP By Example.

Валидация

О правилах для amp-img читайте в спецификации валидатора AMP.