图片元素

上一个单元演示了如何使用 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 元素是一个强大的工具。

有一种图片可能不需要任何解决方案：图标。接下来就是这样。

检查您的理解情况

测试您对图片元素知识的掌握情况