将<img>转换为<amp-img>

Question

这是将<img>转换为<amp-img>的默认方法。

我解释自己:在我正在转换为AMP的网站上，我有很多没有宽度和高度的图片。

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

如果我没有指定布局，默认情况下将设置layout="container"，并且大多数图像会引发以下错误：

amp-img错误:不支持:容器的布局

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

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

• 布局系统
• 布局与媒体查询

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

那么，在这种情况下，在AMP中哪一个是等价的呢？

Answer 1

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

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

希望这对你的AMP网站有帮助并祝你好运:-)

Answer 2

您可以使用layout=fixed，但仍然需要添加width和height，因此可能需要为图像计算这些值。