图片元素

上一个模块演示了 srcset 属性如何允许您提供同一图片的不同尺寸版本。然后，浏览器便可决定要使用的正确版本。如果您想完全更改图片，则需要 picture 元素。

srcset 以 src 属性为基础，picture 元素以 img 元素为基础。picture 元素封装了 img 元素。

<picture>
  <img src="image.jpg" alt="A description of the image.">
</picture>

如果 picture 元素内没有嵌套的 img 元素，则 picture 元素将不起作用。

与 srcset 属性一样，picture 元素会更新该 img 元素中 src 属性的值。不同之处在于 srcset 属性向浏览器提供建议，而 picture 元素则发出命令。这让您拥有控制权。

source

您可以在 picture 元素中指定多个 source 元素，每个元素都有自己的 srcset 属性。然后，浏览器会尽可能执行第一个请求。

图片格式

在此示例中，有三张不同的图片，它们采用三种不同的格式：

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="A description of the image." 
    width="300" height="200" loading="lazy" decoding="async">
</picture>

第一个 source 元素指向采用新 AVIF 格式的图片。如果浏览器能够呈现 AVIF 图片，那么系统会选用该图片文件。否则，它会移至下一个 source 元素。

第二个 source 元素指向 WebP 格式的图片。如果浏览器能够呈现 WebP 图片，则会使用该图片文件。

否则，浏览器将回退到使用 img 元素的 src 属性中的图片文件。该图片为 JPEG 格式。

这���味着，您可以开始使用新的图片格式，且不会影响向后兼容性。

在该示例中，type 属性告知浏览器指定了哪种类型的图片格式。

图片尺寸

除了切换图片格式之外，您还可以切换图片尺寸。使用 media 属性告知浏览器图片将会显示多宽。在 media 属性内添加媒体查询。

<picture>
  <source srcset="large.png" media="(min-width: 75em)">
  <source srcset="medium.png" media="(min-width: 40em)">
  <img src="small.png" alt="A description of the image." 
    width="300" height="200" loading="lazy" decoding="async">
</picture>

此处将告知浏览器，如果视口宽度超过 75em，必须使用大图片。浏览器必须使用 40em 到 75em 之间的中等图片。在 40em 下，浏览器必须使用小图片。

这与在 img 元素中使用 srcset 和 sizes 属性不同。这样，您就向浏览器提供建议。source 元素更像是一个命令，而非建议。

您还可以在 source 元素的 srcset 属性内使用像素密度描述符。

<picture>
  <source srcset="large.png 1x" media="(min-width: 75em)">
  <source srcset="medium.png 1x, large.png 2x" media="(min-width: 40em)">
  <img src="small.png" alt="A description of the image." width="300" height="200" loading="lazy" decoding="async"
    srcset="small.png 1x, medium.png 2x, large.png 3x">
</picture>

在该示例中，您仍在告知浏览器在不同断点处执行什么操作，但现在浏览器可以选择与设备的像素密度最相符的图片。

剪裁

如果您只需投放同一图片的不同尺寸版本，srcset 就是最佳选项。但是，如果图片在尺寸较小时看起来不美观，您可以尝试将图片剪裁为剪裁版本。

不同的图片可能具有不同的宽度和高度，以更好地适应其上下文。例如，在移动浏览器上，您可能需要同时剪裁和长剪裁；而在桌面浏览器上，则可能需要剪裁较宽和较短的剪裁。

下例中的主打图片会根据视口宽度更改其内容和形状。为每个 source 元素添加 width 和 height 属性。

<picture>
  <source srcset="full.jpg" media="(min-width: 75em)" width="1200" height="500">
  <source srcset="regular.jpg" media="(min-width: 50em)" width="800" height="400">
  <img src="cropped.jpg" alt="A description of the image." width="400" height="400" loading="eager" decoding="sync">
</picture>

请注意，您不能根据图片来源更改 alt 属性。您需要编写一个 alt 属性，用于描述完整尺寸的图片和剪裁后的图片。

对于大多数自适应图片，您可能不需要使用 picture 元素，因为 img 元素的 srcset 和 sizes 属性涵盖了很多用例。但对于需要更精细的控制的情形，picture 元素是一个功能强大的工具。

有一种图片可能不需要这两种解决方案，那就是图标。接下来我们说说。

检查您的掌握程度

测试您对图片元素的了解程度