1、img元素srcset属性
srcset属性用于浏览器根据宽、高和像素密度来加载相应的图片资源。
属性格式：图片地址，宽度描述，像素密度描述
eg: <img src="small.jpg" srcset="big.jpg 1440w,middle.jpg 800w,small.jpg 1x"/>
上面例子表示浏览器宽度达到800px则加载middle.jpg，达到1400px则加载big.jpg（像素密度描述只对固定宽度图片有效）
2、img元素的size属性 ：给浏览器提供一个预估的图片显示宽度。
属性格式：媒体查询，宽度描述（支持px）
<img src="images/gun.png"
srcset="images/bg_star.jpg 1200px,images/share.jpg 800w,images/gun.png 320w"
sizes="(max-320px) 300w,1200w"/>
上面例子表示浏览器视口为320px时，图片宽度为300px，其他情况为1200px。
3、img-set()支持根据用户分辨率适配图像
body{
background-image: -webkit-image-set( url(../images/pic-1.jpg) 1x, url(../images/pic-2.jpg) 2x, url(../images/pic-3.jpg) 600dpi);
}
上述代码将会为普通屏幕使用pic-1.jpg，为高分屏使用 pic-2.jpg，如果更高的分辨率则使用pic-3.png.