上一个模块演示了 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 元素是一个功能强大的工具。
有一种图片可能不需要这两种解决方案，那就是图标。接下来我们说说。
检查您的掌握程度
测试您对图片元素的了解程度
当 srcset 属性为浏览器提供________时，<picture> 元素为浏览器提供________。
<picture> 元素的部分功能如下：
avif 或 webp 文件（如果可能）。