上一个模块演示了 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
文件(如果可能)。