移动端webP调研

摘要：移动端调研介绍格式，谷歌开发的一种旨在加快图片加载速度的图片格式。图像的解码及显示都在中完成，因此目前版本对设置的背景图片无效。业界分析天猫前端方案美团后端判断返回大图采用了像列表页详情页的图片预览参考资料图片的高效使用

WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。支持有损压缩和无损压缩，无损压缩后比png文件少了大约35%，有损压缩后比png文件少了大约70%，能节省大量的服务器带宽资源和数据空间。

1、 智图http://zhitu.isux.us/
2、 iSparta
3、 libwebp
4、http://image.online-convert.com/convert-...
5、Cloudinary
6、谷歌开发的命令行

前端JS方案（推荐）——利用img标签加载一张base64的WebP图片，在img标签的onload事件中判断该图片是否具有宽高的属性，若有表示支持webP，若没有表示不支持webP。

testWebp = function(callback){

       var image = new Image();  
       image.onerror = function() {  
         callback(false);  
       };  
       image.onload = function() {  
         callback(image.width == 1);  
       };  
       image.src = "data:image/webp;base64,UklGRiwAAABXRUJQVlA4ICAAAAAUAgCdASoBAAEAL/3+/3+CAB/AAAFzrNsAAP5QAAAAAA==";  

};

webSrc = function(src){

       var suffix = src.lastIndexOf(".");  
       suffix = src.substr(suffix);  
       if (/png|jpg/.test(suffix)){  
           return src.substr(0,(src.length-3))+"webp";  
       }else{  
           return src;  
       }  

};
$(function(){
testWebp(

   function(SUP){
       var $img = $("img[data-img]");
       if(SUP){
           $("body").addClass("webp");
           $img.each(function(i,o){
               var src= $(o).attr("data-img");
               $(o).attr("src",webSrc(src));
           });
       }
       else{
           $("body").addClass("nowebp");
           $img.each(function(i,o){
               var src= $(o).attr("data-img");
               $(o).attr("src",src);
           });
       }
   }

)
})

- 后台判断方案——判断浏览器请求头Accept是否支持WebP，返回是否支持的标示给前台。
- iOS独立版

这样做的好处在于下载WebP的时候节省了带宽，虽然在转码的时候会耗时，但是由于下载时间缩短中和了转码的时间，所以用户基本感觉不出来差别。我们在不延长用户等待时间的同时缩小图片体积，节省了带宽。

安卓独立版
后台判断用户机器系统，当系统版本大于4.0的时候返回支持WebP标示（因为其原生支持），前端拉取图片时后台会根据这个标示决定使用原格式图片还是WebP格式的图片。

webp.js
插件将会捕捉页面中使用WebP格式的img元素，并用Flash进行替换。图像的解码及显示都在Flash中完成，因此目前版本对CSS设置的背景图片无效。

当然，作为JPEG格式的替换，只有对较大的图像使用才有意义，否则过多的解码将消耗大量的资源。

天猫 (前端JS方案)
https://www.tmall.com/?locate=icon-1&spm...

define("mui/tangram/webp", function(e, t, i) {
    "use strict";
    var r = false;
    var n = false;
    var a = false;
    var u = [];
    var m = "";
    var o = 0;
    var s = 7;
    var d = window.g_config || {};
    i.exports = {
        init: function p() {
            var e = this;
            e._testJPG();
            e._testPNG();
            e._testAlpha()
        },
        _loadDone: function l(e, t) {
            o |= e;
            this._checkDone(t)
        },
        _testJPG: function g(e) {
            var t = this;
            var i = new Image;
            i.onload = function() {
                r = true;
                u.push("jpg");
                u.push("jpeg");
                t._loadDone(1, e)
            }
            ;
            i.onerror = function() {
                t._loadDone(1, e)
            }
            ;
            i.src = "data:image/webp;base64,UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA"
        },
        _testPNG: function c(e) {
            var t = this;
            var i = new Image;
            i.onload = function() {
                n = true;
                u.push("png");
                t._loadDone(2, e)
            }
            ;
            i.onerror = function() {
                t._loadDone(2, e)
            }
            ;
            i.src = "data:image/webp;base64,UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA=="
        },
        _testAlpha: function f(e) {
            var t = this;
            var i = new Image;
            i.onload = function() {
                a = true;
                t._loadDone(4, e)
            }
            ;
            i.onerror = function() {
                t._loadDone(4, e)
            }
            ;
            i.src = "data:image/webp;base64,UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA=="
        },
        _checkDone: function x(e) {
            var t = this;
            if (o === s) {
                if (t["canAddSuffixReg"] === undefined) {
                    t._generateReg()
                }
                if (e && e.__webp__hadExec === undefined) {
                    e.__webp__hadExec = true;
                    S.isFunction(e) && e({
                        jpeg: r,
                        jpg: r,
                        png: n,
                        alpha: a
                    })
                }
            } else {
                return false
            }
        },
        _generateReg: function y() {
            m = u.join("|");
            if (u.length > 0) {
                this["canAddSuffixReg"] = new RegExp(m + "$","i");
                this["transformReg"] = new RegExp("(." + m + ")s*"","gi")
            }
        },
        isSupport: function A(e) {
            var t = this;
            if (t._checkDone(e) === false) {
                t._testJPG(e);
                t._testPNG(e);
                t._testAlpha(e)
            }
            return {
                jpeg: r,
                jpg: r,
                png: n,
                alpha: a
            }
        },
        get: function v(e, t) {
            var i = this;
            if (o === s) {
                if (i.canAddSuffixReg && i.canAddSuffixReg.test(e)) {
                    if (n || n === false && e.indexOf(".png") < 0) {
                        return e + (t ? t : "_.webp")
                    }
                }
            }
            return e
        },
        transform: function h(e, t) {
            if (o === s) {
                if (this.transformReg !== undefined) {
                    e = e.replace(this.transformReg, "$1" + (t ? t : "_.webp") + """);
                    if (n === false) {
                        e = e.replace(new RegExp("(.png_.+?.(?:jpg|jpeg))" + (t ? t : "_.webp"),"gi"), "$1")
                    }
                }
            }
            return e
        },
        suffix: function b(e, t) {
            var i = this;
            if (o === s) {
                if (i.canAddSuffixReg && i.canAddSuffixReg.test(e)) {
                    if (n || n === false && e.indexOf(".png") < 0) {
                        return t ? t : "_.webp"
                    }
                }
            }
            return ""
        }
    }
});

美团（后端判断返回）
大图采用了webP,像列表页banner,详情页的图片预览

https://developers.google.com/speed/webp...
http://news.oneapm.com/bi-webp-2/
http://zhitu.isux.us/index.php/preview/w...
WebP 图片的高效使用 http://www.etherdream.com/WebP/