img元素srcset属性含义及作用

属性格式：图片地址 宽度描述w 像素密度描述x，多个资源之间用逗号分隔。例如：

<img src="small.jpg " 
        srcset="big.jpg 1440w, 
        middle.jpg 800w,
        small.jpg 1x" />

上面的例子表示浏览器宽度达到 800px 则加载 middle.jpg ，达到 1400px 则加载 big.jpg。注意：像素密度描述只对固定宽度图片有效。

img 元素的 size 属性给浏览器提供一个预估的图片显示宽度。

属性格式：媒体查询 宽度描述（支持px），多条规则用逗号分隔。

<img src="images/gun.png"
 srcset="images/bg_star.jpg 1200w, 
images/share.jpg 800w, 
images/gun.png 320w"
sizes="(max-width: 320px) 300w, 
1200w"
/>

上面的例子表示浏览器视口为 320px 时图片宽度为 300px，其他情况为 1200px。

css image-set()
css属性image-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);

    background-image: image-set( 
url(../images/pic-1.jpg) 1x, 
url(../images/pic-2.jpg) 2x, 
url(../images/pic-3.jpg) 600dpi);
}