小码农

在当前响应式设计和自适应设计的流行下，大部分web页面往往都兼容多终端设备，其中一个比较麻烦的问题就是图片的加载了。不同平台显然不可能用同一张大的图片，这样子不但浪费手机流量、影响网站载入速度并且在小屏幕下会很不清晰。让浏览器根据分辨率自动识别图片是最好的方法。

方法一：

picture标签

引用HTML5新特性

1. 创建标签
2. 在标签内使用source元素
3. 添加media属性
4. srcset加载图片
5. img元素避免老旧浏览器不识别picture标签和srcset属性

    <picture>
        <source srcset="img/300.png" media="(min-width:300px)">
        <source srcset="img/600.png" media="(min-width:600px)">
        <source srcset="img/1200.png" media="(min-width:1200px)">
        <img srcset="img/1200.png"/>                
    </picture>

方法二：

srcset属性

1. img标签的新属性
2. 配合sizes属性使用更好

    <img srcset="img/300.png 300w,
                 img/600.png 600w,
                 img/1200.png 1200w"
         sizes="(max-width:300px) 100vm,
                (max-width:600px) 50vm,
                (max-width:1200) 300px"
    />

   srcset中的300w、600w、1200w类似于媒体查询，规定了不同宽度下应该加载的图片。当图片外围的宽度不为视口宽度的100%时，该属性会出现一些小问题，所以需要与sizes属性相配合。
   sizes属性的媒体查询规定的是视口大小与其缩放比例

   方法三：

   js或cookie控制服务器
   详细参考