amp-img

用法

AMP HTML 对普通 HTML img 标签的替代品。借助 amp-img，AMP 提供了一个强大的替代方案。

AMP 可能会根据视口位置、系统资源、连接带宽或其他因素选择延迟或优先加载资源。amp-img 组件允许运行时以这种方式有效地管理图像资源。

amp-img 组件，像所有外部获取的 AMP 资源一样，必须预先给出明确的大小（如 width / height），以便在不获取图像的情况下知道宽高比。实际的布局行为由 layout 属性决定。

在以下示例中，我们通过设置 layout=responsive 来显示一个对视口大小做出响应的图像。图像根据 width 和 height 指定的宽高比进行拉伸和收缩。

<amp-img
  alt="A view of the sea"
  src="/static/inline-examples/images/sea.jpg"
  width="900"
  height="675"
  layout="responsive"
>
</amp-img>

如果 amp-img 组件请求的资源加载失败，则该空间将为空白，除非提供了fallback子项。回退仅在初始布局上执行，并且事后（例如，通过调整大小 + srcset）对 src 进行的后续更改不会有回退，因为这会影响性能。

指定回退图片

在以下示例中，如果浏览器无法加载图像，它将显示回退图像（此处我们使用内联 SVG 作为回退）

<amp-img
  alt="Misty road"
  width="550"
  height="368"
  src="image-does-not-exist.jpg"
>
  <amp-img
    alt="Misty road"
    fallback
    width="550"
    height="368"
    src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSAiaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmlld0JveD0iMSAxIDggNCI+PGltYWdlIGZpbHRlcj0idXJsKCNibHVyKSIgd2lkdGg9IjEwIiBoZWlnaHQ9IjYiIHhsaW5rOmhyZWY9ImRhdGE6aW1hZ2UvcG5nO2Jhc2U2NCxpVkJPUncwS0dnb0FBQUFOU1VoRVVnQUFBQW9BQUFBR0NBWUFBQUQ2OEEvR0FBQUFBWE5TUjBJQXJzNGM2UUFBQUVSbFdFbG1UVTBBS2dBQUFBZ0FBWWRwQUFRQUFBQUJBQUFBR2dBQUFBQUFBNkFCQUFNQUFBQUJBQUVBQUtBQ0FBUUFBQUFCQUFBQUNxQURBQVFBQUFBQkFBQUFCZ0FBQUFEK2lGWDBBQUFBcjBsRVFWUUlIVDJQU1FxRlFBeEVYN2VpNG9BYkVRV3Y0TVlMZUhLdjQwSVV3UW5uL25ZdmZxQ29JcWxRaVVpU1JQbStqNVFTei9PNDd4dkhjUmlHZ2I3dnNTeUw2N3FRNy91YW9XNHN5L0kzYXYwOGp6SHlsZFNHZmQrcDY5cXcxbTNia21VWlFnalQweXlpS0ZKNlE4ZVdaVWxSRklSaGFLS2JwdUU4VCtaNVJyaXVxejZna2VjNVZWVXhqaVBUTkpremp1TmcyemJzN3htQ0lDQk5VK0k0cHVzNmxGS3M2NHB0MjBicnhCODZ4VmdkUHdJV2NRQUFBQUJKUlU1RXJrSmdnZz09Ii8+PGZpbHRlciBpZD0iYmx1ciI+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iLjUiIC8+PC9maWx0ZXI+PC9zdmc+"
  >
  </amp-img>
</amp-img>

可以使用 CSS 选择器和元素本身的样式设置占位符背景颜色或其他视觉效果。

可以使用标准 HTML（例如，figure 和 figcaption）实现其他图像功能，如标题。

将图片缩放到最大宽度

如果您希望图像在窗口调整大小时缩放，但缩放到最大宽度（因此图像不会超出其宽度拉伸）

1. 为 <amp-img> 设置 layout=responsive。
2. 在图像的容器上，指定 max-width:<显示图像的最大宽度> CSS 属性。为什么在容器上？具有 layout=responsive 的 amp-img 元素是块级元素，而 <img> 是内联元素。或者，您可以在 CSS 中为 amp-img 元素设置 display: inline-block。

responsive 和 intrinsic 布局之间的区别

responsive 和 intrinsic 布局都创建了一个会自动缩放的图像。主要区别在于 intrinsic 布局使用 SVG 图像作为其缩放元素。这将使其行为与标准 HTML 图像相同，同时保留浏览器在初始布局时知道图像大小的优点。intrinsic 布局将具有固有大小，并将膨胀一个浮动的 div，直到它达到由传递给 amp-img 的 width 和 height 属性定义的图像大小（而不是图像的自然大小）或 CSS 约束（如 max-width）。responsive 布局将在浮动的 div 中呈现 0x0，因为它的大小取自父级，而父级在浮动时没有自然大小。

设置固定大小的图片

如果您希望图像以固定大小显示

1. 为 <amp-img> 设置 layout=fixed。
2. 指定 width 和 height。

设置宽高比

对于响应式图像，width 和 height 不需要与 amp-img 的确切宽度和高度匹配；这些值只需要产生相同的宽高比即可。

例如，您只需指定 width="1.33" 和 height="1"，而不是指定 width="900" 和 height="675"。

<amp-img
  alt="A view of the sea"
  src="/static/inline-examples/images/sea.jpg"
  width="1.33"
  height="1"
  layout="responsive"
>
</amp-img>

为不同的屏幕分辨率设置多个源文件

应使用 srcset 属性来提供同一图像的不同分辨率，这些图像都具有相同的宽高比。浏览器将根据屏幕分辨率和用户设备的宽度从 srcset 中自动选择最合适的文件。

相反，media 属性显示或隐藏 AMP 组件，应在设计响应式布局时使用。显示具有不同宽高比的图像的适当方法是使用多个 <amp-img> 组件，每个组件都具有一个 media 属性，该属性与显示每个实例的屏幕宽度相匹配。

有关更多详细信息，请参阅有关创建响应式 AMP 页面的指南。

为尺寸未知的图片保持宽高比

AMP 布局系统需要在获取图像之前预先知道图像的宽高比；但是，在某些情况下，您可能不知道图像的尺寸。要显示尺寸未知的图像并保持宽高比，请将 AMP 的fill布局与 object-fit CSS 属性结合使用。有关更多信息，请参阅如何支持尺寸未知的图像示例。

图片的辅助功能注意事项

<amp-img> 允许您包含动画图像，如 GIF 或 APNG。但是，请记住，以这种方式包含的动画通常无法被用户暂停/停止。根据图像及其大小，这可能会对某些用户群体造成轻微的干扰，或者造成严重的问题，特别是如果动画包含快速闪烁的颜色变化。一般来说，我们建议完全避免使用动画图像，除非您确定它们不会产生不利影响。

<amp-img> 还可以用于包含文本图像。通常，最好尽可能使用实际的 HTML 文本，而不是文本图像。如果必须使用文本图像（例如，因为公司标识/品牌指南规定了特定的字体），请确保 alt 准确反映了图像中可见的文本。

最后，如果图像包含文本或重要的非文本元素（例如条形图、信息图表、图标），而这些元素对于理解图像内容至关重要，请确保它们具有足够的颜色对比度。有关介绍（主要围绕文本对比度），请参阅 web.dev 颜色和对比度辅助功能，有关非文本元素的更多详细信息，请参阅 Knowbility：探索 WCAG 2.1 — 1.4.11 非文本对比度。

选择合适的文本替代方案

有关如何为图像选择合适的替代文本的建议和指导，您可以参考 W3C WAI 教程“alt 决策树” 和 HTML5.2 提供文本作为图像替代的规范。

属性

src

此属性类似于 img 标签上的 src 属性。该值必须是一个 URL，指向一个可公开缓存的图像文件。缓存提供商在接收 AMP 文件时可能会重写这些 URL，以指向该图像的缓存版本。

srcset

与 img 标签上的 srcset 属性相同。对于不支持 srcset 的浏览器，<amp-img> 将默认使用 src。如果仅提供 srcset 而不提供 src，则将选择 srcset 中的第一个 URL。

sizes

AMP sizes 属性的值是一个尺寸表达式，它根据当前窗口大小选择与媒体查询对应的定义尺寸。此外，AMP 会为元素设置一个内联样式 width。如果提供了 srcset 属性，则当没有指定 sizes 时，<amp-img> 将为底层的 <img> 自动生成 HTML5 的 sizes 属性定义。如果未提供 srcset 属性，则不会为底层的 <amp-img> 自动生成 sizes 属性。

可以在没有 srcset 的情况下，在 <amp-img> 上使用 sizes，纯粹是为了根据匹配的媒体查询设置 width 的内联样式，或者纯粹是为了推断布局 responsive。

有关 sizes 和 srcset 的用法，请参阅 使用 srcset、sizes 和高度的响应式图像。

alt

一段替代文本字符串，类似于 img 上的 alt 属性。每当您使用 amp-img 时，请始终提供合适的替代文本。否则，辅助技术（如屏幕阅读器）会将该元素声明为“未标记的图形”或类似内容。如果图像纯粹是装饰性的，不传达任何内容，则可以使用空的 alt="" - 在这种情况下，辅助技术将简单地忽略/不宣布该元素。

attribution

一个指示图像归属的字符串。例如，attribution="CC courtesy of Cats on Flicker"。

height 和 width

图像的显式大小，AMP 运行时使用该大小来确定宽高比，而无需获取图像。

通用属性

amp-img 包括扩展到 AMP 组件的 通用属性。

数据属性

数据属性从 amp-img 元素复制到组件创建的内部 img 元素。

样式

可以通过 CSS 属性直接设置 amp-img 的样式。例如，通过以下方式可以实现设置灰色背景占位符：

amp-img {
  background-color: grey;
}

验证

请参阅 AMP 验证器规范中的 amp-img 规则。