如何实现响应式图片？

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/whh181/article/details/67633731

• 如何挑选第三方组件，轮播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描述符，列子如下

图片压缩和webp

图片压缩可以给用户带来极大体验度提升，UI给出的png图通过压缩后一般可以缩小1/3，且像素效果差不多。
推荐网站
webp是谷歌开发的图片格式，同质量下比jpg小1/3。