响应式图片的设计

1.使用js。根据Windows resize和load事件，触发响应函数，获取设备尺寸，对应的更改图片的路径

2.服务端。就是将屏幕尺寸记录到cookie中，由服务端决定图片返回

---------下面的两个比较常用--------

3.srcset 格式： srcset="图一路径 图一宽度，图二路径 图二宽度，..."路径与宽度间有个空格。通过在img中加入srcset属性，浏览器会根据这一属性的设置以及屏幕尺寸自动的决定加载哪张图片。IE不支持

tips 1.当屏幕由小的尺寸渐渐变大时，图片的路径会随着设置改变，但再变小时，图片路径就不会变了，保持最后最大的那张，可以理解成大的图片，质量较高的图片，浏览器已经与缓存了，浏览器会优先使用高质量的图片。

2.DPR，当屏幕的DPR大于1时，比如那些retina屏幕，浏览器的逻辑并不是简单的将设备宽度除以DPR作为临界点，浏览器会有较复杂的综合考量

3.单纯的srcset的宽度始终以屏幕宽度，而不是图片的容器宽度，所以比如当图片容器为屏幕宽的一半，而浏览器还是按100%的逻辑去处理，所以需要引入另一个属性sizes，默认值为“100vw”，v是viewport，所以这里可以设置成 “50vw”，详细教程可见张大神的： http://www.zhangxinxu.com/wordpress/2014/10/responsive-images-srcset-size-w-descriptor/

4.picture标签（IE不支持）例

意思就是给img在不同的媒体查询条件下可以设置多组srcset选项，浏览器由上到下直至找到符合当前环境的设置，然后匹配到img

上面的picture和srcset IE都不支持，兼容性比较弱，后面会说下解决方案

5.使用svg图片，适用于小型线条简单的图案，如logo之类的

-----------------------------------------------------------------------------

兼容性设置的福音：pollyfill，这个概念的意思是对于代码中一些部分浏览器不支持的情况，pollyfill会响应的作出一些处理，来填补这些浏览器不兼容的问题，它是一个大的概念，需要根据不同的需要去选区具体的pollyfill，比如这里以picture为例，就可以使用 picturefill

顺便介绍两个svg、png、jpg图片压缩的站点： https://tinypng.com/ and http://iconizr.com/