<picture>:图片元素

为了决定加载哪个 URL，user agent 检查每个 <source> 的 srcset、media 和 type 属性，以选择最适合显示设备的当前布局和功能的兼容图片。

¥To decide which URL to load, the user agent examines each <source>'s srcset, media, and type attributes to select a compatible image that best matches the current layout and capabilities of the display device.

<img> 元素有两个用途：

¥The <img> element serves two purposes:

1. 它描述了图片的大小和其他属性及其呈现方式。
2. 如果所提供的 <source> 元素都无法提供可用图片，它可以提供后备方案。

<picture> 的常见用例：

¥Common use cases for <picture>:

• 艺术方向。针对不同的 media 条件裁剪或修改图片（例如，在较小的显示器上加载具有太多细节的图片的简单版本）。
• 针对不支持某些格式的情况提供替代图片格式。

  注意：例如，AVIF 或 WEBP 等较新的格式具有许多优点，但浏览器可能不支持。支持的图片格式列表可以在以下位置找到：图片文件类型和格式指南。

  ¥Note: For example, newer formats like AVIF or WEBP have many advantages, but might not be supported by the browser. A list of supported image formats can be found in: Image file type and format guide.

• 通过加载最适合查看者显示的图片来节省带宽并加快页面加载时间。

如果为高 DPI (Retina) 显示提供更高密度版本的图片，请在 <img> 元素上使用 srcset。这使得浏览器可以在数据保存模式下选择较低密度的版本，并且你不必编写显式的 media 条件。

¥If providing higher-density versions of an image for high-DPI (Retina) display, use srcset on the <img> element instead. This lets browsers opt for lower-density versions in data-saving modes, and you don't have to write explicit media conditions.

¥Attributes

该元素仅包含 全局属性。

¥This element includes only global attributes.

¥Usage notes

你可以使用 object-position 属性来调整图片在元素框架内的位置，并使用 object-fit 属性来控制如何调整图片大小以适合框架。

¥You can use the object-position property to adjust the positioning of the image within the element's frame, and the object-fit property to control how the image is resized to fit within the frame.

注意：在子 <img> 元素上使用这些属性，而不是在 <picture> 元素上。

¥Note: Use these properties on the child <img> element, not the <picture> element.

¥Examples

这些示例演示了 <source> 元素的不同属性如何改变 <picture> 内图片的选择。

¥These examples demonstrate how different attributes of the <source> element change the selection of the image inside <picture>.

¥The media attribute

media 属性指定用户代理将为每个 <source> 元素评估的媒体条件（类似于媒体查询）。

¥The media attribute specifies a media condition (similar to a media query) that the user agent will evaluate for each <source> element.

如果 <source> 的媒体条件评估为 false，则浏览器会跳过它并评估 <picture> 内的下一个元素。

¥If the <source>'s media condition evaluates to false, the browser skips it and evaluates the next element inside <picture>.

<picture>
  <source srcset="mdn-logo-wide.png" media="(min-width: 600px)" />
  <img src="mdn-logo-narrow.png" alt="MDN" />
</picture>

¥The srcset attribute

srcset 属性用于根据尺寸或显示器的像素密度提供可能的图片列表。

¥The srcset attribute is used to offer a list of possible images based on size or the display's pixel density.

它由逗号分隔的图片描述符列表组成。每个图片描述符由图片的 URL 组成，并且：

¥It is composed of a comma-separated list of image descriptors. Each image descriptor is composed of a URL of the image, and either:

• 宽度描述符，后跟 w（例如 300w）；OR
• 像素密度描述符，后跟 x（例如 2x），为高 DPI 屏幕提供高分辨率图片。

请务必注意：

¥Make sure to note that:

• 宽度和像素密度描述符不应一起使用
• 缺失的像素密度描述符意味着 1x
• 不允许重复的描述符值（2x 和 2x、100w 和 100w）

以下示例说明了如何使用 srcset 属性和 <source> 元素来指定高密度和标准分辨率图片：

¥The following example illustrates the usage of srcset attribute with the <source> element to specify a high-density and standard-resolution image:

<picture>
  <source srcset="logo.png, logo-1.5x.png 1.5x" />
  <img src="logo.png" alt="MDN Web Docs logo" height="320" width="320" />
</picture>

srcset 属性也可以用在 <img> 元素上，而不需要 <picture> 元素。以下示例演示如何使用 srcset 属性分别指定标准分辨率和高密度图片：

¥The srcset attribute can also be used on the <img> element without needing the <picture> element. The following example demonstrates how to use the srcset attribute to specify standard-resolution and high-density images, respectively:

<img
  srcset="logo.png, logo-2x.png 2x"
  src="logo.png"
  height="320"
  width="320"
  alt="MDN Web Docs logo" />

使用 srcset 时，sizes 属性不是强制性的，但建议使用它，以便向浏览器提供附加信息，帮助其选择最佳图片源。

¥The sizes attribute is not mandatory when using srcset, but it is recommended to use it in order to provide additional information to the browser to help it select the best image source.

如果没有尺寸，浏览器将使用由图片尺寸（以像素为单位）指定的默认图片尺寸。这可能并不适合所有设备，特别是当图片显示在不同的屏幕尺寸或不同的上下文中时。

¥Without sizes, the browser will use the default size of the image as specified by its dimensions in pixels. This may not be the best fit for all devices, especially if the image is displayed on different screen sizes or in different contexts.

请注意，只有当 srcset 提供宽度尺寸描述符而不是像素比率值（例如 200w 而不是 2x）时，尺寸才会产生影响。有关使用 srcset 的更多信息，请参阅 响应式图片 文档。

¥Please note that sizes will have its effect only if width dimension descriptors are provided with srcset instead of pixel ratio values (200w instead of 2x for example). For more information on using srcset, see the Responsive images documentation.

¥The type attribute

type 属性为 <source> 元素的 srcset 属性中的资源 URL 指定 MIME 类型。如果用户代理不支持给定类型，则跳过 <source> 元素。

¥The type attribute specifies a MIME type for the resource URL(s) in the <source> element's srcset attribute. If the user agent does not support the given type, the <source> element is skipped.

<picture>
  <source srcset="photo.avif" type="image/avif" />
  <source srcset="photo.webp" type="image/webp" />
  <img src="photo.jpg" alt="photo" />
</picture>

¥Technical summary

¥See also

• <img> 元素
• <source> 元素
• 在框架内定位图片并调整其大小：object-position 和 object-fit
• 图片文件类型和格式指南