web响应式图片的5种实现

在目前的前端开发中，我们经常需要进行响应式的网站开发。提起响应式，大家应该想到三个概念：弹性布局，弹性图片，媒体查询。本文着重介绍一下弹性图片，也就是响应式图片的解决方案。

一、js或服务端

通过js或者服务端来控制图片的加载，原理就是跟踪window的resize事件，然后修改图片的路径，代码如下

<div class="content">
    <img src="" alt=""/>
</div>

<script src="js/vendor/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        function makeImageResponsive() {
            var width = $(window).width;
            var img = $(".content img");
 
            if (width <= 480) {
                img.attr('src', 'img/480.png')
            } else if (width <= 800) {
                img.attr('src', 'img/800.png')
            } else {
                img.attr('src', 'img/1600.png')
            }
        }
 
        $(window).on('resize load', makeImageResponsive());
    })
</script>

这种形式还有一种类似的变种，就是通过把屏幕或者设备信息写入cookie，获取图片的时候在服务器端选择返回哪种图片，这样就不需要我们来写脚本了。

二、srcset

通过js或服务端加载确实可以达到响应式图片的目的，兼容性也非常的好，但是需要我们编码实现响应式的逻辑，在修改的时候也不是很方便属于命令式的实现，以下方法使用声明式的实现，就是把图片的地址声明在html中，由浏览器自行来决定如何加载，这样更加灵活，把展示的逻辑从硬编码中分离出来，降低了耦合。

现在HTML5中对于img标签新增了一个srcset属性。属性值为以逗号分隔的一个或多个字符串。每个字符串由以下组成：

a. 一个图像的URL。
b. 可选的，空格后跟以下的其中一个

~ 一个宽度描述符，后面紧跟’w’符号。
~ 一个像素描述符，后面紧跟’x’符号。

<img class="image" src="img/480.png" srcset="img/480.png 480w, img/800.png 800w, img/1600.png 1600w"/>

设置srcset属性后浏览器会根据我们的页面不同，从当前的浏览环境进行感知，然后选择一个图片进行加载。当超过480时，加载的图片变成了800，当超过800时，图片变成了1600。但当我们把屏幕变小时，图片始终是1600，是因为浏览器已经在大的分辨率下加载了大的图片，那么会被默认放在缓存中，使用大的图片不再会有网络消耗，当然使用更大的图片更好咯。

三、sizes

当然这个属性可以配合sizes属性结合使用。sizes属性可以设置一些类似媒体查询的规则。例如：

前面的第二种方法单独使用的话会有一个坑，就是例如当img的宽度只占50%，当我们加宽宽度的时候，加宽到480，但此时图片的宽度只有240，图片仍然变成了800。这时srcset属性就还需要配合sizes属性进行使用（第二种方法的sizes属性值默认为100vw）。

<div class="content">
    <img class="image" src="img/480.png"
        srcset="img/480.png 480w, img/800.png 800w, img/1600.png 1600w"
        sizes="50vw"/>
</div>

sizes属性内还可以写入媒体查询，例如

<style>
        html, * {
            margin:0;
            padding:0;
        }
 
        .content {
            width:100%;
            margin:0 auto;
        }
 
        .content img {
            display: block;
            max-width: 100%;
        }
    </style>
</head>
<body>
<div class="content">
    <img class="image" src="img/480.png"
        srcset="img/480.png 480w, img/800.png 800w, img/1600.png 1600w"
        sizes="(min-width:800px) 800px, 100vm"/>
</div>

就是当浏览器宽度小于800时，按照100vw来设置图片；但超过800时，就是定宽了。

四、picture标签

这个也是HTML5的新属性。可以放置多个source标签，以指定不同的图像文件名，进而根据不同的条件进行加载。用法：

创建标签。
里面放置标签用来展示可能用到的图像
对source添加srcset属性来指定图片URL，添加media属性，来规定媒体查询。
添加一个回退的元素

这个例子表示在大于800px的时候，展示ad002-l这个large图片。在大于480px的时候，展示ad002-m这个medium图片。否则，展示ad002小图片。

<picture>
    <source srcset='src/img/ad002-l.png' media='(min-width: 50em)'/>
    <source srcset='src/img/ad002-m.png' media='(min-width: 30em)'/>
    <img src="src/img/ad002.png"/>
</picture>

现在很多浏览器对于picture这个标签还不支持，所以我们需要用到picturefill.js来解决。

五、svg图片

SVG图片不是一个简单的图像，而是一个规则。所以可是很好的响应式，不过因为比较复杂，所以一般都是对于一些简单的图像使用svg，对于复杂，颜色多的图片，不采用SVG。

链接: https://fly63.com/article/detial/1263