用于响应式布局的 amp-img 标记

【问题标题】：amp-img tag for a responsive layout用于响应式布局的 amp-img 标记
【发布时间】：2018-01-18 21:04:37
【问题描述】：

我在一个新项目中使用 amp（Accelerated Mobile Pages Project）技术。我担心的是图像的 amp-img 标签。根据本文档 (https://github.com/ampproject/amphtml/blob/master/spec/amp-html-layout.md)，您可以将属性 layout='responsive' 用于响应目的，同时您也可以将 srcset,media,sizes 属性用于响应目的。

同样，文档说图像将占用其父容器的空间。

我不明白这个逻辑。我们为什么要调整容器的大小以具有适当的图像大小。如果它以这种方式工作，那么使用起来非常繁重。

提前感谢您的回答

【问题讨论】：

标签： html amp-html

【解决方案1】：

棘手的部分是在页面上呈现响应式元素而不会对性能指标或用户体验产生不利影响。

是的，您可以轻松获得适合屏幕的图像，而无需宽度和高度，但会影响性能。 我认为这就是 AMP 不允许没有宽度和高度的响应式布局的原因。

浏览器必须先下载图片以获取图片的尺寸，然后根据屏幕大小调整图片大小，最后重排并重绘页面。

在 AMP 中，渲染路径经过优化，首先布局页面，根据 amp-img 中提供的尺寸为图像留出占位符（使用这些数字确定纵横比），然后下载资源, 页面被绘制。无需回流。

更多关于限制响应图片宽度的信息Click Here

【讨论】：