响应式图片

前几日看了一篇关于响应式图片的文章，回想一下平时做的移动端开发，为了适配retina屏幕，一般都是直接选择2x图片来进行加载，并没有针对不同的DPR进行适配。

文章里面讲到了srcset属性的一些应用场景，可以用来很好的处理响应式图片的问题。关于srcset属性，文章介绍了第一代标准和第二代标准，看完之后，我又查了一些资料和博文。在这里，就对srcset属性的使用做一下总结，结合自己写的示例代码，聊聊对W的理解。

srcset和srizes都是HTML5对于img标签的属性。

首先来看一下第一代标准的使用场景。
<img src="logo@1x.png" srcset="logo@1x.png 1x, logo@2x.png 2x"/>
这个例子非常简单，首先设置默认的图标为logo@1x.png，然后用srcset设置了1x场景和2x场景的适配图。经过这样的设置之后，2xDPR的显示屏会加载高清的图片。（如果浏览器不支持srcset，则显示src设置的图片）

鑫哥的博文里面有句话写的非常好。

旧的srcset 是人主导，
而现在新的srcset 是浏览器主导

我是这样理解的，第一代标准的使用，就好比是把js代码的逻辑简单的搬到了img标签中，什么样的条件加载什么样的图片，代码里面可以看到很强的逻辑关系。第二代标准，是一种新的思路，我们提供不同的图片资源，给予一定的条件，最终把选择权交给浏览器，浏览器来选择最佳的图片进行适配。

新标准的例子。（2014年）
<img src="logo-128.png" srcset="logo-128.png 128w,logo-256.png 256w,logo-512.png 512w" sizes="(max-width:500px) 340px,512px" />

sizes属性中可以进行媒体查询，后面是对应的宽度，上面的例子就是最大宽度小于500px时，图片限制宽度为340px,其他情况为128px。

首先看一下，浏览器对于不同DPR的处理，将浏览器宽度调整为1024px,此时根据媒体查询，应该显示128px的图片，如果此时浏览器模拟1x设备，则加载logo-128.png。如果模拟2x设备，则加载logo-256.png。如果模拟3x设备，则加载logo-512.png。但是最终的显示宽度都是128px。因为浏览器会找到最佳适配图片进行加载，我们只要提供不同的图片规格就可以了。

再来理解一下w。我们现在将宽度调整为500px,图片宽度应该为340px,此时如果是1x设备，浏览器会选择logo-512.png进行加载。
过程：媒体查询，刚好为500px,匹配340px，340px对应340w,而logo-128.png对应128w，未达标；logo-256.png对应256w，未达标。最后选择了最适合的logo-512.png进行加载。
当然，这里举这个例子，是为了理解w和sizes的关系，平时使用的时候，并不会这样的奇怪的匹配。

新的标准，浏览器为我们做了很多事情，非常的简介智能，chrome38+可以支持该属性。
兼容性当然是一个问题，可是要提醒自己多抽时间了解新特性~