Retina屏缘起

自2010年Apple发布iPhone4以后，Retina屏逐渐流行起来，其惊艳的显示效果和其细节的全面展示带给了人们全新的视觉体验，而越来越多的终端开始支持响应式，那么作为响应式中的重要一环「响应式图片」又该如何解决？

Retina屏俗称「视网膜屏」，其的设备像素比是x2，而普通屏幕像素比为x1，对于图片这种位图像素已定的资源，如果不加以处理的话，要么全都用x1倍图，那么在视网膜屏上观看就会模糊；要么都是用x2倍图，那么在普通屏幕上浏览的时候就会白白浪费流量消耗下载速度。

在开发iDevise主题的时候，我就是使用x2倍图来完成图片响应，因为图片裁剪后占用硬盘并不大，所以流量消耗几乎可以忽略，且代码量也少一些，但是在新主题iDevs中，图片开始变大，继续采用全x2倍图显然不是最佳方案了，那么该如何完成图片响应呢？

srcset属性

相对简单的解决方案就是srcset属性了，使用简单，可以非常方便的完成图片响应效果。

代码实例：

<img src="images-x1.png" 
     srcset="images-x2.png 2x"
     alt="iDevs" />

浏览器会默认访问src里面的图片路径，如果视网膜屏幕的话，浏览器会解析srcset里面的图片路径。

srcset配合sizes属性

sizes属性产生的初衷就是可以在html中实现简单的媒体查询功能，来适应越来越大规模的响应式网站开发。

那么w是个啥？ w是一个衡量宽度的标识符，一定要对应图片的真实宽度，这会使得浏览器正确的选择图片，如果w值和图片宽度不对应时，实际渲染是会有问题的。

示例代码：

<img src="images-x1.jpg"   
     srcset="images-x1.jpg 500w, images-x2.jpg 1000w, images-x3.jpg 1500w" 
     sizes="500px">

sizes=500px，也就是图片宽度设置为了500px，那么：

x1倍屏幕访问时就会选用images-x1.jpg；

x2倍屏幕可渲染的位图像素宽度就变为了1000px，也就选用了images-x2.jpg；

类推一下，x3倍屏幕当然就会访问images-x3.jpg了。

现代浏览器对该属性的支持是越来越多了，这个方案应该会是个潮流。

那么兼容性如何呢？

电脑设备

手持设备

在移动端Andriod浏览器的支持实在是太差劲了，PC端对于一些现代的浏览器支持性就非常好。

当然，还有其他的一些解决方案，后期有时间再与大家探讨与分享。

本文参考：
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img
http://www.zhangxinxu.com/wordpress/2014/10/responsive-images-srcset-size-w-descriptor/
http://www.jianshu.com/p/235ef450f5e9
http://liyaodong.com/2015/10/18/responsive-image-workflow/