WebP探索

不同场景下WebP的使用方案总结：

 

• App：Android4.0以上提供原生支持，其他版本使用官方提供的解析库（Android、iOS）；

 

• 浏览器：JS能力检测，对支持 WebP 的用户输出 WebP 图片；使用WebpJS检测浏览器或webview是否支持，此插件我自己测试只有win下chrome能用，其他均存在问题

 

• 转换工具：智图、iSparta

 

• 手淘方案：目前手淘Android和iOS App中是支持的WebP的，采用解析库。iOS中webview本身是不支持WebP格式的，手淘中的实现是交给图片库来完成这部分工作（手淘是获取WebP格式文件然后转码成jpg给webview，我们现在是先进性判断再加载对应的图片）

 

• 案例实战：

;(function(doc){
    //判断是否支持WebP，测试了iPhone5s和坚果手机下的不同浏览器该判断方法可行
    function checkWebp(){
        try{
            return (doc.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0);
            //返回的是一串Base64编码的URL
            //data:image/webp;base64,UklGRrgAAABXRUJQVlA4WAoAAAAQAAAAKwEAlQAAQUxQSBIAAAAB…kPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99qwAAP7/1gAAAAAAAAAA
        }
        catch(err){
            return false;
        }
    }
    //获取class不依赖zepto
    function getByClass(parent,cls){
        if(parent.getElementsByClassName){
            return parent.getElementsByClassName(cls);
        }
        else{
            var res=[];
            var reg=new RegExp(" "+cls+" ","i");
            var ele=parent.getElementsByTagName("*");
            for(var i=0;i<ele.length;i++){
                if(reg.test(" "+ele[i].className+" ")){
                    res.push(ele[i]);
                }
            }
            return res;
        }
    }
    //改变带webp class的图片路径
    function ChangeImg(sClass){
        this.aImg = getByClass(doc,"webp");
        this.oBar = checkWebp();
    }
    ChangeImg.prototype.test = function(){
        //默认给html根节点加.normal
        doc.documentElement.className = "normal";
        if(this.oBar){
            //支持webp则给html根节点加上support类名
            doc.documentElement.className = "support";
            for(var i = 0;i < this.aImg.length;i ++){
                if(this.aImg[i].getAttribute("data-src")){
                    var dataSrc = this.aImg[i].getAttribute("data-src");
                    //获取images目录下图片的名字
                    var imgSrc = dataSrc.split("?")[0].split(".")[0].substring(6);
                    //images换成webp
                    var imgStr = "webp" + imgSrc + ".webp";
                    this.aImg[i].setAttribute("data-src",imgStr);
                }
            }
        }
    };
    //通过webp class来判断是否需要webp格式图片
    new ChangeImg("webp").test();

})(document);

• 改进点：fis3下暂未发现有实时监听转换webp格式图片的插件，gulp有，目前可以通过智图网页版或客户端进行批量转换，一步到位；iOS下App不支持WebP，需要iOS同学进行相关的处理；其他一些问题等待大家去探索发现...

DEMO下载

参考：

• 15年双11手淘前端技术巡演
• WebP探寻之路