amp-html - 将 转换为

Question

这是转换 <img> 的默认方式到 <amp-img> ？

我自己解释一下:在我要转换为 AMP 的网站中，我有很多没有宽度和高度的图像，例如:

<img src="/img/image.png" alt="My image">

如果我没有指定布局，layout="container"默认设置并且大多数图像抛出以下错误:

amp-img error: Layout not supported for: container

另一方面，大多数图片不适合响应式布局，这是谷歌在大多数情况下推荐的布局

我一直在检查文档中的布局类型:

• Layout System
• Layout & Media queries

但是它们中的任何一个似乎都适合必须显示为实际大小的图像，而不是指定宽度或高度。

那么，在那种情况下，AMP 中的哪个是等效的？

Answer 1

正如您所说的，您有多个图像，最好使用“layout="responsive"”，这样，您至少可以使图像具有响应性。现在关于宽度和高度。他们是必须的。如果您阅读了 AMP 的用途，其中之一就是使页面成为“跳跃/闪烁的免费内容”，如果没有提到图像的宽度，就会发生这种情况。通过指定宽度，浏览器(移动浏览器)可以计算出精确的空间并为该图像保留它并在之后显示内容。这样，在加载页面和图像时，内容不会有任何闪烁。

关于重写 HTML，我可以提供的一个提示是，您可以使用 PHP、Python 或 Node JavaScript 编写一些小实用程序，它们实际上可以读取源图像、计算它们的尺寸并替换您的 IMG 标签。

希望这对您有所帮助，并祝您在 AMP 支持的网站上好运:-)