响应式图片
一、srcset属性
在整个网站的开发中，在管理图片上较为困难。注意，图片要在各种设备上平滑过渡显示，它们将会碰到的问题有：
适当的优化和减少图片的体积
注意不要浪费带宽（网站的成败与否加载速度是其中主要因素之一）
设备使用相应的解决方案
对于第一个问题，使用TinyPng和JPEGmini工具可以帮助减少图片的体积和优化图片。
对于第二个问题，在一些场合下我们可能要使用到强大的媒体查询。多亏了有他们，我们可以很简单的处理背景图片的问题。但是，有些地方使用的是img来显示图片，这也是我们要解决的第三个问题，也是最后一个问题，如何根据设备的分辨率调用合适的图像。
在这种情况之下，有个两个解决方案：使用元素的srcset属性。
在这篇文章中，我会向大家总体的介绍srcset属性，而
srcset属性
使用这个属性主要有什么好处呢？好处就是Web开发人员可以给使用高分辨率的用户显示高分辨的图像源，给其他设备分辨率的用户使用其他的图像源。在第一种情况下使用低PDD(pixel density displays)不需要背负着下载无用的高分辨率图像，而担心浪费带宽；而后者可以享受高清设备带来的不一样的享受。在第二种情况中，我们可以根据不同的屏幕尺寸指定不同的图像，这主要是根据用户的设备来提供一个较好的图像源。
事实上，srcset属性就做了这样的事情，根据像素密度或用户使用的屏幕尺寸大小，指定一个图像源。所以说，srcset属性可以让浏览器提供一套"建议"，让浏览器根据正确的行为匹配正确的图像。通过这样做，我们提高了Web的质量，同时提高了Web页面的加载速度和给用户一个较好的体验。
在这一点上，这个属性的基本特征就是：根据指定的条件来做选择，使其工作。这对于我们编码工作和实现的方法变理更为简易。
W3C规范是这样描述srcset:srcset属性允许作者根据不同分辨率或不同的视窗尺寸提多个不同分辨图像。用户代理会根据之前获取的任何资源做选择，从而避免多个资源加载浪费带宽和相关性能问题。
srcset属性包含一系列的逗号分隔值，一方面是指定图像的url，另一方面指图像将要显示的条件。图像条件我们可以看到有像素密度、视窗尺寸大小或者同时两者都存在。有一点非常有趣，浏览器可以根据用户的设置或页面访问时间，选择或抓取一个低分辨图像和高分辨图像。
想象一下，在你的移动浏览器偏好设置允许请求高分辨图像。例如，只有当连接到wifi的网络环境，或者在网络不强时会询问你是否手动设置浏览器偏好，允许加载低分辨图像。
语法格式如下：
<img src="small-photo.jpg" srcset="big-photo.jpg 2x" />
上面的代码要求浏览器显示名为small-photo.jpg图像。除非在一个高分辨显示器(像素密度为2x，比如Retina屏幕)，才显示名为big-photo.jpg图像。请注意，只有浏览器理解这个属性才会显示其他图像，如果浏览器不能正确的解释这个属性，流星器会忽略其他图像，回退到src属性指定的图像。
<img src="low-density-photo.jpg" srcset="small-photo.jpg 480w, big-photo.jpg 1024w, high-density-photo.jpg 1024w 2x" />
这段代码使用了low-density-photo.jpg图像作为候选图像，根据不同的条例提供了显示图像的一个列表：设备屏幕宽度小于或等于480px屏幕使用small-photo.jpg，设备屏幕宽度小于或等于1024px使用big-photo.jpg，最后是有两个条件，设备屏幕小于或等于1024的Retina屏将显示high-density-photo.jpg图像。
有一个不太好的消息要告诉你，目前支持srcset的浏览器只有Webkit引擎的浏览器:
二、image-set属性
image-set的语法
selector {
background-image: url(no-image-set.png);
background: image-set(url(foo-lowres.png) 1x,url(foo-highres.png) 2x) center;
}
类似于不同的文本，图像也会显示成不同的：
不支持image-set：在不支持image-set的浏览器下，他会支持background-image图像，也就是说不支持image-set的浏览器下，他们解析background-image中的背景图像；
支持image-set：如果你的浏览器支持image-sete，而且是普通显屏下，此时浏览器会选择image-set中的@1x背景图像；
Retina屏幕下的image-set：如果你的浏览器支持image-set，而且是在Retina屏幕下，此时浏览器会选择image-set中的@2x背景图像。
