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探寻之路