学习 srcset 属性

Apr 10, 2018

  要理解 srcset 属性，首先要了解 devicePixelRatio，即屏幕像素比，不同的屏幕设备有不同的值，可以通过 window.devicePixelRatio 查看

  在处理响应式网页时，有时为了在不同的屏幕设备上，同一副图片能够合适地呈现，这时可以考虑使用 srcset 属性。

srcset 属性可以让浏览器有所选择地下载适合的图片。

  情景1：根据 devicePixelRatio 大小，让浏览器选择合适的图片

  这种用法仅限于 img 标签宽度已知 

1
2
3
4

<img src="/uploads/100-marie-lloyd.jpg"
    srcset="/uploads/150-marie-lloyd.jpg 1.5x, 
            /uploads/200-marie-lloyd.jpg 2x"
    alt="A singer on the stage" width="100" height="150">
  上面代码一共设置有 3 幅可选图片，当屏幕像素比为 1.5 时，150-marie-lloyd.jpg 这幅图片会被下载使用；当屏幕像素比为 2 时，200-marie-lloyd.jpg 这幅图片会被下载使用；当屏幕像素比既不是 1.5 也不是 2 时，又或者浏览器不识别 srcset 属性时，100-marie-lloyd.jpg 这幅图片会被下载使用。屏幕像素密度越大，使用分辨率越大的图片。

  情景2：根据 Viewport 大小，让浏览器选择适合的图片 

1
2
3
4
5
6
7
8

<img sizes="(max-width: 30em) 100vw, 
            (max-width: 50em) 50vw, 
            calc(33vw - 100px)"
srcset="swing-200.jpg 200w, 
        swing-400.jpg 400w, 
        swing-800.jpg 800w, 
        swing-1600.jpg 1600w"
src="swing-400.jpg" alt="Kettlebell Swing">
上例，在 sizes 属性加入媒体查询，当 viewport 宽度小于或等于 30em 时，img 标签的 width 将被限制在 100vw。 srcset 中的 200w, 400w 等，声明图片的实际宽度为 200 像素，400 像素，目的在于让浏览器无需下载图片就知道图片宽度。此时，假设一台 305 像素宽的设备，屏幕像素比为 2 进行访问：

  1. 进行媒体查询，305px<=30em(30em*16px=480px)为真，则 img 标签的 width 为 100vw，即 100vw * 305px = 305px
  2. 400px < 305px * 2(图片宽度*屏幕像素比=设备所需像素) < 800px，所以选择使用上一梯度 swing-800.jpg 下载使用

总结：sizes 属性用于指定 img 标签的宽度，srcset 属性用于指定需要下载的图片