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> 是内联。或者，您可以为 amp-img 元素在 CSS 中设置 display: inline-block。

responsive 和 intrinsic 布局之间的区别

responsive 和 intrinsic 布局都会创建一个自动缩放的图像。主要区别在于 intrinsic 布局使用 SVG 图像作为其缩放元素。这将使其行为方式与标准 HTML 图像相同，同时保留浏览器在初始布局时知道图像大小的优点。intrinsic 布局将具有固有大小，并将膨胀一个浮动的 div，直到它达到由传递给 amp-img 的 width 和 height 属性定义的图像大小（不是图像的自然大小）或诸如 max-width 之类的 CSS 约束。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 规则。