amp-img

Список атрибутов

Благодаря новому тегу под картинки у AMP есть возможность в режиме реального времени управлять картинками на странице. Одна из значительных оптимизаций AMP-страниц является пост-загрузка картинок. Загрузка картинок происходит по необходимости и учитываются факторы пропускной способности, системных ресурсов и другое. Картинки которые не находятся в зоне видимости не будут загружены. В обычной версии этого можно было добиться сторонними JS плагинами «LazyLoad».

Компонент amp-img, как и все остальные внешние ресурсы AMP, должны иметь явный размер (как по ширине, так и высоте) заранее, так что соотношение сторон может быть известно без извлечения изображения. Фактическое поведение макета определяется атрибутом layout.

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

В качестве примера мы отобразим изображение, которое соответствует размеру окна просмотра, задав layout=responsive. Изображение растягивается и сжимается в соответствии с форматным соотношением, определяемым шириной и высотой.

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

Подсказки

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

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

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

1
Оставить комментарий

avatar
25412
1 Цепочка комментария
0 Ответы по цепочке
0 Последователи
 
Популярнейший комментарий
Цепочка актуального комментария
1 Авторы комментариев
Антон Авторы недавних комментариев
  Подписаться  
новее старее большинство голосов
Уведомление о
Антон
Гость
Антон

А если у меня одна картинка в двух форматах. .png и .webp, и я хочу их одновременно задействовать, мне из всё также в тег picture оборачивать?