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 子元素。备用仅在初始布局时执行，并且此后事实发生 src 更改（例如，通过调整大小 + srcset），出于性能原因将不会有备用。

指定备用图像

在下面的示例中，如果浏览器无法加载图像，它将显示备用图像（这里我们使用内联 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:<max width to display image> CSS 属性。为什么在容器上？具有 layout=responsive 的 amp-img 元素是一个块级元素，而 <img> 是内联元素。或者，您可以在 amp-img 元素的 CSS 中设置 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 属性。

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

有关 sizes 和 srcset 的用法，请参阅使用 srcset、sizes 和 heights 实现响应式图片。

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 规则。