响应式网站-弹性图片

实现响应式图片有一下几种方法：

1、js或者服务端

2、secset

3、srcset配合sizes

4、picture

5、svg

1、首先来看一下js的演示代码

$(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);
});

在window加载的时候和改变窗口大小的时候调用makeImageResponsive方法判断当前浏览器的宽度选择合适的图片。

2.srcset

<img src="img/ad003-m.png" srcset="img/480.png 480w, img/800png 800w, img/1600png 1600w">

这样设置img的属性后就会根据屏幕的宽度来决定加载那张图片

3.srcset配合sizes

<img src="img/ad003-m.png" srcset="img/480.png 480w, img/800png 800w, img/1600png 1600w" sizes="50vw">

vw是代表视口宽度的一个单位（viewport width），100vm代表图片的尺寸就是100%视口的宽度

srcset属性也有个坑，默认设置100vw的话，当图片居中占50%的情况下，依然根据视口宽度来选择图片，所以这时需要设置sizes="50vw"让图片宽度真正到达480的时候在加载更大的图片。 

随着布局更加复杂，还可以通过计算来控制sizes

<img src="img/ad003-m.png" srcset="img/480.png 480w, img/800png 800w, img/1600png 1600w" sizes="(min-width:800px) calc(100vw - 30em), 100vw">

4.picture标签

<picture>
                    <source srcset="img/ad003-l.png" media='(min-width : 50em' />
                    <source srcset='img/ad003-m.png' media='(min-width : 30em)' />
                    <img alt="新手秘籍" src="img/ad003.png">
                </picture>  

浏览器会遍历picture的source设置，直到找到一个属性满足当前环境media就讲这个source的srcset匹配到img里面，可以设置多个source和多个srcset。还可以根据图片格式来选择图片：

<source type="image/svg+xml" srcset="logo.svg 480w, logo-m.svg 800w" />

<source type="image/webp" srcset="logo.webp 480w, logo-m.webp 800w" />

浏览器不支持picture的话可以使用picturefill.js来兼容

5.svg

在线创建svg的图片的网站有：editor.method.ac   和 https://icomoon.io

相比srcset和picture来说，svg的兼容性比较广泛，而且图片很小。

svg图片可以在线压缩：iconizr.com

针对png图片进行压缩：https://tinypng.com

有时候简单对图片进行压缩带来页面载入速度的提升有惊喜的效果。