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

时间:2018-01-18 21:04:37

标签: html amp-html

我在一个新项目中使用了amp(Accelerated Mobile Pages Project)技术。 我关心的是图像的amp-img标签。根据此文档(https://github.com/ampproject/amphtml/blob/master/spec/amp-html-layout.md),您可以使用attribut layout =' responsive'为了响应目的和结合,你可以使用srcset,media,sizes属性也可以用于响应目的。

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

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

提前感谢您的回答

1 个答案:

答案 0 :(得分:0)

棘手的部分是在页面上呈现响应元素而不会对效果指标用户体验产生负面影响。

是的,你可以很容易地获得适合屏幕的图像而没有宽度和高度但是有性能命中。 我认为这就是为什么AMP不允许没有宽度和高度的响应式布局。

浏览器必须首先下载图像以获取图像的尺寸,然后根据屏幕尺寸适当调整图像大小,最后重排并重新绘制页面。

在AMP中,优化渲染路径,以便首先布置页面,根据amp-img中提供的尺寸(使用这些数字建立宽高比)为图像预留占位符,然后下载资源,并绘制页面。不需要回流焊。

有关限制响应式图像宽度的详细信息 Click Here