包含图片

大多数 HTML 标签可以直接在 AMP 中使用，但某些标签，例如 <img> 标签，必须替换为它们的 AMP 等效标签。有关完整列表，请参阅规范中的 HTML 标签。

我们将通过 <amp-img> 标签，以 AMP 的方式将图片添加到我们的页面中。将以下代码复制并粘贴到 <body> 中。

<amp-img src="https://source.unsplash.com/random/600x400" width="600" height="400"></amp-img>

AMP 替换某些默认 HTML 标签的原因如下

在资源加载之前预测页面的布局。这确保了布局稳定性，从而提供更好的用户体验。
控制网络请求，以便资源被延迟加载并有效地确定资源的优先级。

AMP 团队正在努力支持有效 AMP 页面上的原生 <img> 标签。有关更多信息和当前进度，请参阅此 GitHub 问题。

使您的图片具有响应式

AMP 的强大优势之一是其布局系统。AMP 的布局系统使得实现响应式图像非常容易，这些图像会自动将其大小调整为页面上的可用空间。最好的是：它以一种确保布局稳定性和避免内容跳动的方式执行此操作。我们可以通过将 layout="responsive" 添加到 <amp-img> 标签来快速使我们的图像具有响应性。通过更新您的 amp-img 以匹配以下代码，然后在 Playground 中更改预览窗口的大小来亲自尝试。

<amp-img src="https://source.unsplash.com/Ji_G7Bu1MoM/600x400" width="600" height="400" layout="responsive"></amp-img>

现在，我们的图像恰好适合我们的视口，并且当视口大小更改时会放大或缩小！

修改布局

虽然非 AMP 页面几乎完全使用 CSS 来布局元素，但 AMP 会强制执行更严格的规则，以避免内容布局偏移和其他性能问题。所有 AMP 组件都需要一个布局，并且每个布局都有不同的尺寸声明要求。例如，我们的图像具有 responsive 布局，它需要 width 和 height。如果您从 <amp-img> 中删除 width 属性，Playground 将显示验证错误！但是，请不要担心，我们有几种方法可以解决此问题！一种方法是添加回 width 属性，但另一种方法是更改定义的 layout 属性。尝试将 “responsive” 更新为 “fixed-height”。

<amp-img src="https://source.unsplash.com/Ji_G7Bu1MoM/600x400" height="400" layout="fixed-height"></amp-img>

在那里，我们的验证错误消失了！这种布局的灵活性使我们可以使用我们所知道的，例如预定的高度而不是宽度，同时仍然保证最终用户的良好体验！在演示 AMP 布局中查看所有可用的布局，并了解 AMP 如何呈现和布局页面以及如何在布局和媒体查询中修改布局。

由 @crystalonscript 编写