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

Question

将<img>转换为<amp-img>的默认方法是什么？

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

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

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

  

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

另一方面，大多数图像都不适合响应式布局，Google建议大多数情况使用这种布局

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

• Layout System
• Layout & Media queries

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

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

Answer 1

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

Answer 2

正如你所说，你有多张图片，你最好使用＆＃39; 布局=＆＃34;响应＆＃34; ＆＃39;，用它，你将使你的图像至少响应。 现在关于宽度和高度。他们是必须的。如果您阅读AMP的目的，其中之一就是制作页面＆＃39; 跳跃/闪烁免费内容＆＃39;如果图像没有提到宽度，就会发生这种情况。 通过指定宽度，浏览器（移动浏览器）可以计算精确的空间并保留该图像并在此之后显示内容。就这样，那里不会有。随着页面和图像的加载，内容会闪烁。

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

希望这有助于您的AMP运行网站祝你好运： - ）