如何实现响应式图片？

• 如何挑选第三方组件，轮播carousel插件，owl-carousel2

• 响应式图片

• 图片压缩，与webp

如何挑选第三方组件

不重复造轮子，就要选择一个好轮子：
1.使用人数
2.是否开源
3.文档是否齐全
4.活跃性
5.轻量级
随便选一个，轮播的插件仍是不少的owl-carousel2，符合上述条件，使用看官方文档仍是比较简单上手的。

响应式图片

加载与用户设备相匹配的图片，既快速又不会影响用户体验！

1.js或者服务器

$(document).ready(function () {
    function makeImageResponsive() {
        var width = $(window).width();
        if(width < 400){使用A图片}else {使用B图片}
    }
    $(window).on('resize load',makeImageResponsive);
})

直接看代码，就是读取浏览器width选择相对应的图片，此外还能够设置cookie配置不一样图片。

2.srcset和sizes
看大神的解释
响应式图片srcset全新释义sizes属性w描述符，列子以下

<img src="a.png" alt=""
                srcset="a480.png 480w,b800.png 800w,c1600.png 1600w"
                sizes="100vw">

3.<picture>标签效果,与兼容

<picture>
                    <source srcset="img/ad001-l.png" media="(min-width:50em)">
                    <source srcset="img/ad001-m.png" media="(min-width:30em)">
                    <img src="img/ad001.png" alt="2015年度报告">
                </picture>

经过媒体查询的方式，根据页面宽度（固然也能够添加其余参考项如是否横屏）加载不一样图片。这样不只节省带宽还能使得图片更加适配内容。可是好事都没有这么顺利，如今不少浏览器不支持picture标签。
这里就须要引入另外一个概念--Polyfill
举个例子，html5的storage(session,local), 不一样浏览器，不一样版本，有些支持，有些不支持。

咱们又想使用这个特性，怎么办？

有些人就写对应的Polyfill（Polyfill有不少），帮你把这些差别化抹平，不支持的变得支持了（简单来说，写些代码判断当前浏览器有没有这个功能，没有的话，就写一些支持的补丁代码）。

你只须要把须要的Polyfill引入到你的程序里，就能够了。因此picture标签也有它本身的polyfill--picturefill.js，引入JS则低版本浏览器能够兼容picture标签。

4.svg
svg矢量图解决响应式问题，不作描述，svg也是解决方式之一。

图片压缩和webp

图片压缩能够给用户带来极大致验度提高，UI给出的png图经过压缩后通常能够缩小1/3，且像素效果差很少。
推荐网站webp是谷歌开发的图片格式，同质量下比jpg小1/3。