AMP

amp-img

Description

替换 HTML5 img 标记。

 
说明 由运行时管理,可替代 HTML img 标记。
支持的布局 fill、fixed、fixed-height、flex-item、intrinsic、nodisplay、responsive
示例 请参阅 AMP By Example 的 amp-img 示例

行为

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

与所有外部抓取的 AMP 资源一样,必须提前为 amp-img 组件指定确切尺寸(以 width/height 的方式指定),这样一来,浏览器即使不抓取图片,也能知道宽高比。实际布局行为由 layout 属性决定。

详细了解 AMP HTML 布局系统规范中的布局以及支持的布局

示例:显示自适应图片

在下面的示例中,我们通过设置 layout=responsive 来展示一张能够根据视口尺寸自行调整大小的图片。该图片会根据通过 widthheight 指定的宽高比进行缩放。

<amp-img alt="A view of the sea"
  src="/static/inline-examples/images/sea.jpg"
  width="900"
  height="675"
  layout="responsive">
</amp-img>
在 Playground 中打开此代码段

如需了解自适应 AMP 网页,请参阅制作自适应 AMP 网页指南。

如果 amp-img 组件请求的资源未能成功加载,则该资源所对应的空间将为空白,除非提供了 fallback 子级。仅对初始布局执行后备操作;如果在初始布局完成之后进行后续的 src 更改(例如,通过调整大小和 srcset),则不会执行后备操作,以免影响性能。

示例:指定后备图片

在下面的示例中,如果浏览器不支持 WebP,则会显示后备 JPG 图片:

<amp-img alt="Mountains"
  width="550"
  height="368"
  src="/static/inline-examples/images/mountains.webp">
  <amp-img alt="Mountains"
    fallback
    width="550"
    height="368"
    src="/static/inline-examples/images/mountains.jpg"></amp-img>
</amp-img>
在 Playground 中打开此代码段

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

图片说明等其他图片功能可通过标准 HTML(例如,figurefigcaption)实现。

如需详细了解如何使用 amp-img,请参阅以下资源:

属性

src

该属性与 img 标记中的 src 属性类似。该属性的值必须是指向可公开缓存的图片文件的网址。提取 AMP 文件以指向相应图片的缓存版本时,缓存提供商可能会重写这些网址。

srcset

img 标记中的 srcset 属性相同。对于不支持 srcset 的浏览器,<amp-img> 默认使用 src。如果仅提供 srcset 而不提供 src,则系统将选择 srcset 中的第一个网址。

sizes

img 标记中的 sizes 属性相同。

如需了解 sizessrcset 的用法,请参阅通过 srcset、sizes 和 heights 设置自适应图片

alt

替代文字的字符串,与 img 中的 alt 属性类似。

attribution

用于说明图片归属信息的字符串。例如,attribution="CC courtesy of Cats on Flicker"

heightwidth

图片的确切尺寸,供 AMP runtime 用于在不抓取图片的情况下确定宽高比。

常见属性

此元素包含扩展到 AMP 组件的常见属性

样式设置

可通过 CSS 属性直接设置 amp-img 的样式。例如,可通过以下代码将占位符背景颜色设置为灰色:

amp-img {
  background-color: grey;
  }

提示和技巧

放大图片,但不超过最大宽度

如果您希望图片随着窗口大小的调整而缩放,但宽度不超过最大宽度(这样,拉伸图片时不会超过窗口宽度),请执行以下操作:

  1. <amp-img> 设置 layout=responsive
  2. 在图片的容器中,指定 max-width:<max width to display image> CSS 属性。为何在容器中指定?这是因为 layout=responsiveamp-img 元素是块级元素,而 <img> 是内嵌元素。****或者,您可以在 CSS 中为 amp-img 元素设置 display: inline-block

自适应布局和固有布局之间的区别

使用 responsiveintrinsic 布局都可以创建能够自动缩放的图片。这两种布局的主要区别在于,intrinsic 布局使用 SVG 图片作为其缩放元素。这样一来,它就与标准的 HTML 图片具有相同的行为方式,同时保留浏览器知道图片在初始布局上的尺寸这一优势。intrinsic 布局具有固定尺寸,且会不断扩大悬浮式 div,直至其达到自然图片尺寸或 CSS 上限(如 max-width)。在悬浮式 div 中,responsive 布局将呈现 0x0,这是因为其尺寸继承自父级,而父级在处于悬浮状态时没有自然尺寸。

设置尺寸固定的图片

如果您希望图片以固定尺寸显示,请执行以下操作:

  1. <amp-img> 设置 layout=fixed
  2. 指定 widthheight

如果您没有指定 layout 属性,可了解一下推断布局

设置宽高比

对于自适应图片,widthheight 无需与 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>
在 Playground 中打开此代码段

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

要提供同一张图片的不同分辨率,应使用 srcset 属性,这些分辨率的宽高比要全部相同。浏览器将根据用户设备的屏幕分辨率和宽度,通过 srcset 自动选择最适合的文件。

相比之下,media 属性用于显示或隐藏 AMP 组件,并且应在设计自适应布局时使用。要显示宽高比不同的图片,适当的方法是使用多个 <amp-img> 组件,每个组件的 media 属性都与显示每个实例的屏幕宽度一致。

如需了解详情,请参阅制作自适应 AMP 网页指南。

使尺寸未知的图片的宽高比保持不变

AMP 布局系统需要提前知道图片的宽高比,然后才能抓取图片;但在某些情况下,您可能不知道图片的尺寸。要显示尺寸未知的图片并使其宽高比保持不变,请将 AMP 的 fill 布局与 object-fit CSS 属性结合使用。如需了解详情,请参阅 AMP By Example 的如何支持尺寸未知的图片

验证

请参阅 AMP 验证工具规范中的 amp-img 规则

需要更多帮助?

您已多次阅读本文档,但它仍未能涵盖您的所有问题?也许其他人也这么觉得:在 Stack Overflow 上与他们联系。

前往 Stack Overflow
发现错误或缺少功能?

AMP 项目强烈鼓励您参与并做出贡献!我们希望您能成为我们开放源代码社区的持续参与者,但我们也欢迎您对所热衷问题做出一次性贡献。

前往 GitHub