一文带你了解图片降级我不想愧对那晚星光，即使从未看到天亮，即使头顶高墙，再看我温柔故乡，看我的信仰变成了这般摸样。图片

我不想愧对那晚星光，即使从未看到天亮，即使头顶高墙，再看我温柔故乡，看我的信仰变成了这般摸样。

前言

图片的格式有很多 jpeg png webp等,我们经常使用webp格式的图片,因为webp格式的图片拥有无损压缩和有损压缩两种模式而且压缩率更高等优点。

为什么要做图片降级

但是webp格式的图片同样也有缺点，ios webview和IE不支持webp。所以我们要检测浏览器是否支持webp格式的图片,如果不支持webp则展示图片的其它格式。

例子:以淘宝为例

淘宝的图片path是这样子的

...jpg_220x220.jpg_.webp

降级方案

html 图片懒加载

<div class="box">
    <img   alt="">
</div>

检测浏览器是否支持该webp

 function isSupportWebp(cb) {
        let img = new Image();
        img.src = webpPath;
        img.onload = function() {
            cb(true);
        }
        img.onerror = function() {//浏览器不支持该图片格式时会触发
            cb(false);
        }
    }

img path 截取图片展示

 function LoadImg() {
        let img = document.getElementsByTagName('img')[0];
        isSupportWebp(function(isSupport) {
            if(isSupport) {
                img.src = webpPath;
            } else {
                let index = webpPath.indexOf('_.webp');
                if(index!=-1) {
                    webpPath = webpPath.slice(0,index);
                }
                img.src = webpPath;

            }
        });
    }

完整代码


<body>
<div class="box">
    <img   alt="">
</div>
<script>

    let webpPath = './img/O1CN01xYaPxM1CgQAujTNvy_!!0-saturn_solar.jpg_220x220.jpg_.webp';
    function isSupportWebp(cb) {
        let img = new Image();
        img.src = webpPath;
        img.onload = function() {
            cb(true);
        }
        img.onerror = function() {
            cb(false);
        }
    }
    function LoadImg() {
        let img = document.getElementsByTagName('img')[0];
        isSupportWebp(function(isSupport) {
            if(isSupport) {
                img.src = webpPath;
            } else {
                let index = webpPath.indexOf('_.webp');
                if(index!=-1) {
                    webpPath = webpPath.slice(0,index);
                }
                img.src = webpPath;

            }
        });
    }
   LoadImg();
</script>
</body>