amp-img

用法

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

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

与所有外部获取的 AMP 资源一样，必须预先为 amp-img 组件指定明确的大小（如 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:<max width to display image> CSS 属性。为什么在容器上？具有 layout=responsive 的 amp-img 元素是块级元素，而 <img> 是内联元素。或者，您可以在 CSS 中为 amp-img 元素设置 display: inline-block。

responsive 和 intrinsic 布局之间的区别

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

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

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

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

图像的可访问性考虑因素

<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 必须是 https。

电子邮件的 AMP 规范不允许在 AMP 电子邮件格式上使用以下属性。

• [src]
• [srcset]
• srcset
• lightbox
• lightbox-thumbnail-id
• object-fit
• object-position

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 和高度的响应式图像。

alt

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

attribution

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

height 和 width

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

通用属性

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

数据属性

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

样式

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

amp-img {
  background-color: grey;
}

通过使用带有 on 操作的 amp-image-lightbox 组件，在电子邮件中启用 amp-img 的灯箱效果。

验证

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