如何实现响应式图片？

2019年9月14日 140次阅读 来源: whhlu

  • 如何挑选第三方组件，轮播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。

    原文作者：whhlu
    原文地址: https://segmentfault.com/a/1190000008589663
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞