响应式图片实践研究（html5 picture/srcset 等多种方法对比）
一、需求
现在有一需求
对于一个宽屏的banner焦点图，要求根据浏览器尺寸读取不同尺寸的图片，设浏览器宽度为w，
w<767时读取640px
768<=w<=1024时读取1024px
w>1024时读取1400px
这次我们分多种方法讨论响应式图片应用情况
二、html5新属性 srcset&sizes
html5新增了的属性 srcset 和 sizes，用于设置响应式图片源，这里有一篇关于它的文章讲解，难点在于srcset+sizes如何配合使用，要实现上面的需求，我们需要把代码写成这样：
<img
src="1400.png" srcset="640.png 640w, 1024.png 1024w ,1400.png 1400w"
sizes="(max-width: 767px) 320px, (max-width:1024px) 512px,1400px">
效果：
先制作640、1024、1400px宽度的3张png图片，然后写上对应的规格640w、1024w、1400w；关键在于后面的sizes为什么是这样写呢？
为什么是(max-width: 767px) 320px,而不是(max-width: 767px) 640px？
我们需理解2点：1、sizes作用是控制图片显示宽度；2、srcset是根据sizes设置的宽度和设备像素密度智能读取图片的。
我们以iphone5为例子，我们知道ip5的像素比是2，而ip5的可视宽度为320×568，均小于767px，所以srcset会读取最大为320px×2=640px的图片，640px对应640w规格，640w规格对应640.png图片。
如果是在像素比为1的pc上会有什么效果呢？实践证明pc浏览器宽度<=1024时均读取640png，>1024时会读取1400png。这时你是否懵B了呢？
这里解析下，我们主要看(max-width:1024px) 512px，意思是当浏览器宽度<=1024是，设置图片宽度为512px，pc像素比为1，代入公式：512×1=512px，512px对应512w规格，但srcset没有512w规格，这时候它会“智能”读取！我们看到最小的640w>512w，能满足需求，于是它就读取640w规格，640w对应640.png。
如果ip5像素比为3呢？一样的代入公式： 320px×3=940px --> 940w>640w，于是智能读取1024w–>1024.png。
这srcset+sizes真的很智能呢！可见它的向后兼容性很好，但实在太智能，所以可以说“不可控”！
优缺点
- 优点：智能（向后兼容，不管日后出2x、3x、4x、10x的高清屏）
- 缺点：1、智能（不可控） 2、浏览器兼容性不够好 3、不能随拉伸浏览器直接变换图片
三、html5新标签
标签比较简单，要实现上面需求，只需如下代码：
<picture>
<source media="(max-width: 767px)" srcset="640.png" />
<source media="(max-width: 1024px)" srcset="1024.png" />
<img src="1400.png" />
</picture>
如果需要为2x高清屏设置图片可以这样：，具体可以网上搜索相关资料。
优缺点
- 优点：1、容易理解，可控 2、能随拉伸浏览器直接变换图片
- 缺点：兼容性不好，目前chrome支持，但本ie和safari都不支持
四、css3媒体查询
.pic{ background:url(1400.png) center 0 no-repeat; }
@media screen and (max-width: 1024px) {
.pic{ background:url(1024.png) center 0 no-repeat; }
}
@media screen and (max-width: 767px) {
.pic{ background:url(640.png) center 0 no-repeat; }
}
优缺点
- 优点：1、兼容性好 2、能随拉伸浏览器直接变换图片
- 缺点：1、不能自适应撑开高度，只能写死高度
五、用js判断处理
具体代码不列出来了，思路也很简单。
优缺点
优点：能满足所有需求，现阶段最好的选择
缺点：总感觉不够优雅。
六、后端代码判断处理、第三方云服务
这是方法之一，但由于没实践过，所以不好判断。
优缺点
优点：能满足需求？
缺点：要开发协助，要钱，不可控？
