浅谈CSS响应式图⽚运⽤中的srcset属性
介绍
在整个⽹站的开发中，在管理图⽚上较为困难。注意，图⽚要在各种设备上平滑过渡显⽰，它们将会碰到的问题有：
适当的优化和减少图⽚的体积
注意不要浪费带宽（⽹站的成败与否加载速度是其中主要因素之⼀）
设备使⽤相应的解决⽅案
对于第⼀个问题，使⽤TinyPng和JPEGmini⼯具可以帮助减少图⽚的体积和优化图⽚。
对于第⼆个问题，在⼀些场合下我们可能要使⽤到强⼤的媒体查询。多亏了有他们，我们可以很简单的处理背景图⽚的问题。但是，有些地⽅使⽤的是img来显⽰图⽚，这也是我们要解决的第三个问题，也是最后⼀个问题，如何根据设备的分辨率调⽤合适的图像。
在这种情况之下，有个两个解决⽅案：使⽤<picture>元素和<img>元素的srcset属性。
在这篇⽂章中，我会向⼤家总体的介绍srcset属性。
srcset属性
使⽤这个属性主要有什么好处呢？好处就是Web开发⼈员可以给使⽤⾼分辨率的⽤户显⽰⾼分辨的图像源，给其他设备分辨率的⽤户使⽤其他的图像源。在第⼀种情况下使⽤低PDD(pixel density displays)不需要背负着下载⽆⽤的⾼分辨率图像，⽽担⼼浪费带宽；⽽后者可以享受⾼清设备带来的不⼀样的享受。在第⼆种情况中，我们可以根据不同的屏幕尺⼨指定不同的图像，这主要是根据⽤户的设备来提供⼀个较好的图像源。
事实上，srcset属性就做了这样的事情，根据像素密度或⽤户使⽤的屏幕尺⼨⼤⼩，指定⼀个图像源。所以说，srcset属性可以让浏览器提供⼀套"建议"，让浏览器根据正确的⾏为匹配正确的图像。通过这样做，我们提⾼了Web的质量，同时提⾼了Web页⾯的加载速度和给⽤户⼀个较好的体验。
在这⼀点上，这个属性的基本特征就是：根据指定的条件来做选择，使其⼯作。这对于我们编码⼯作和实现的⽅法变理更为简易。
W3C规范是这样描述srcset:srcset属性允许作者根据不同分辨率或不同的视窗尺⼨提多个不同分辨图像。⽤户代理会根据之前获取的任何资源做选择，从⽽避免多个资源加载浪费带宽和相关性能问题。
说起图⽚的srcset属性，估计有不少与时俱进的⼩伙伴会在⼼中不由⾃主念想道：“这个我知道的，可以根据屏幕密度现实对应尺⼨图⽚，例如……”
<img src="mm-width-128px.jpg" srcset="mm-width-128px.jpg 1x, mm-width-256px 2x">
上⾯代码。当然，我们也可以简写成：
<img src="mm-width-128px.jpg" srcset="mm-width-256px 2x">
由于我们都不是“别⼈家”的公司，因此，我们的办公PC显⽰器默认设备像素⽐都是1，因此，这些显⽰器呈现的图⽚默认都是128像素宽度的。下⾯问题来了，（不是挖掘机哪家强），如何让屌丝显⽰器模拟⾼设备像素⽐呢？
⽅法⼀：
Chrome浏览器，切换设备模式，如下截图:
然后，选择对应的设备，例如iPhone6 Plus的设备像素⽐就是3.
此时，刷新页⾯，加载的就是⼤尺⼨图⽚，也就是256像素宽度那张。
⽅法⼆：
此时设备像素⽐window.devicePixelRatio为1.5，因此加载的就是256像素宽度的图⽚。有图有真相：
不同的2x显⽰策略
一般使用的分辨率的显示密度是多少dpi还有些时候，使⽤同尺⼨的⾼清图⽚作为2x对应图⽚，虽然两者图⽚⼤⼩差不多，但个⼈觉得还是2倍尺⼨优化⼤图更好⼀点，为什么呢？
srcset当初设计的⽤意是为了⾼密度屏幕上图⽚更好的显⽰，如果世界上就只有“不同设备密度”这⼀个戏剧冲突的话，2x图⽚是⾼清图还是2倍尺⼨图其实都⽆伤⼤雅。然⽽，事实上，⽣活⽆处不戏剧，现代web布局中，有种布局不可忽略，那就是「响应式布局」，剧本往往会这样，PC浏览器上显⽰⼤图，Mobile浏览器上显⽰⼩图。发现没，同样是“⼤⼩图的要求”，和设备像素⽐有类似的戏剧冲突。
于是，如果我们2x图⽚使⽤的是⾼清图，结合响应式布局，我们可能需要4张图⽚资源，即：⼩图、⼩图⾼清和⼤图、⼤图⾼清。但是，2x图⽚⾛的是2倍尺⼨图⽚，我们只需要3张图⽚资源，即：⼩图、中图以及中图、⼤图。
在⽼⼀代srcset规范成型过程中，其实已经考虑到与响应式布局的纠葛，出现了w描述符，例如，⾛⾼清路线的：
CSS Code复制内容到剪贴板
1. <img src="small.jpg" srcset="small.jpg 640w 1x, small-hd.jpg 640w 2x, large.jpg 1x, large-hd.jpg 2x">
⾛2倍尺⼨路线的：
CSS Code复制内容到剪贴板
1. <img src="small.jpg" srcset="small.jpg 640w 1x, medium.jpg 640w 2x, medium.jpg 1x, large.jpg 2x">
注意啊注意：千万不要去关⼼上⾯的w描述符的含义，因为新的srcset属性中w描述符含义与之完全不同，为了避免理解冲突，⼼中跟我默念3遍：忘掉它、忘掉它、忘掉它，⽆视它、⽆视它、⽆视它。⼤家可以把精⼒放在下⾯，新的srcset规范以及新的sizes属性语法含义等。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。