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> 是内联元素。或者，您可以在 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>

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

图像的可访问性注意事项

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

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

最后，如果图像包含对理解图像内容至关重要的文本或重要非文本元素（例如条形图、信息图表、图标），请确保它们具有足够的色彩对比度。请参阅 web.dev 色彩和对比度可访问性 以获取简介（主要围绕文本对比度）和 Knowbility：探索 WCAG 2.1 — 1.4.11 非文本对比度 以获取有关非文本元素的更多详细信息。

选择合适的文本替代项

有关如何为图像选择适当文本替代方案的建议和建议，可以参考 W3C WAI 教程“alt 决策树” 和 HTML5.2 为图像提供替代文本的要求。

属性

src

sizes

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

样式

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

amp-img {
  background-color: grey;
}

验证

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