HTML | srcset 属性

<source> 标签用于为 <picture> 或 <video> 元素指定一组可选的媒体资源。srcset 属性则用于指定这其中的一个或多个资源以及其对应的媒体查询条件。

语法

<source srcset="url media-query">
<source srcset="url" type="mime-type">

属性

• srcset：指定一个或多个媒体资源的 URL 和媒体查询条件。多个媒体资源可以通过逗号分隔，并使用“空格媒体查询”，用于指定不同的设备像素比或屏幕/视区大小等。
• type：指定媒体资源的 MIME 类型，如 image/webp、image/jpeg、image/png 等。
• media：指定媒体查询条件，当它们匹配设备屏幕时，浏览器会选择相应的媒体资源。

示例

<picture>
  <source srcset="image-2x.webp 2x, image-1x.webp 1x" type="image/webp" media="(min-width: 768px)">
  <source srcset="image-2x.jpg 2x, image-1x.jpg 1x" media="(min-width: 768px)">
  <img src="image-1x.jpg" alt="Image">
</picture>

此示例用了 <picture> 元素，因为它更适合处理不同大小和分辨率的图片。对于设备像素比（DPR）大于 1 的设备，浏览器会选择名为 image-2x.webp 或 image-2x.jpg 的图片，而对于 DPR 小于等于 1 的设备，则选择名为 image-1x.webp 或 image-1x.jpg 的图片。同时，在设备宽度大于等于 768 像素时，浏览器才会采用这些 <source> 元素，否则直接使用 img 元素。

总结

<source> 元素与 srcset 属性可以让我们在提供多个媒体资源时，更好地控制浏览器如何选择它们，以提供更适合访问者设备和网络状况的媒体内容，减少不必要的资源浪费。它不仅用于图片，还可以用于视频、音频等其他媒体元素中。