- Действия
- Пример: показ адаптивного изображения
- Пример: показ резервного изображения
- Атрибуты
- Поддержка стилей
- Справочный центр
- Масштабирование изображения до максимальной ширины
- Различия между адаптивным и встроенным макетами
- Установка изображения фиксированного размера
- Установка соотношения сторон
- Настройка нескольких исходных файлов для разных разрешений экрана
- Сохранение соотношения сторон для изображений с неизвестными размерами
- Валидация
amp-img
Description
заменяет HTML5-тег img
Supported Layouts
Описание | Замена для HTML-тега img . Можно управлять в среде выполнения. |
Поддерживаемые макеты | fill, fixed, fixed-height, flex-item, intrinsic, nodisplay, responsive |
Примеры | См. пример amp-img на сайте AMP By Example. |
Действия
Среда выполнения может задерживать загрузку ресурсов или повышать ее приоритет в зависимости от системных ресурсов, пропускной способности, положения области просмотра и других факторов. Компоненты 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
).
amp-img
:
Атрибуты
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; }
Справочный центр
Масштабирование изображения до максимальной ширины
Если вы хотите, чтобы ваше изображение масштабировалось с учетом размера окна, но до максимальной ширины и не далее, выполните следующие действия:
- Задайте
layout=responsive
для<amp-img>
. - В контейнере изображения укажите 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
, поскольку изображение наследует размер от родительского элемента, а у него в плавающем виде размер отсутствует.
Установка изображения фиксированного размера
Чтобы изображение показывалось в фиксированном размере, выполните следующие действия:
- Задайте
layout=fixed
для<amp-img>
. - Укажите значения для
width
иheight
.
layout
не задан. Установка соотношения сторон
Для адаптивных изображений значения 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.
Вы читали этот документ десятки раз, но так и не нашли ответов на все свои вопросы? Возможно, другие люди столкнулись с такой же проблемой — обратитесь к ним на Stack Overflow.
Перейти на Stack Overflow Нашли ошибку или недостающую функцию?Проект AMP активно поощряет ваше участие и сотрудничество! Мы надеемся, что вы станете постоянным участником нашего открытого сообщества, но разовые вклады в работу над задачами, которые вам особенно интересны, также приветствуются.
Перейти на GitHub