移动端webP调研

移动端webP调研

webP介绍

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

webP如何转换

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

兼容性测试

机型	浏览器	支持情况
Ios 4s/5/5s/6/6s	uc	支持
Ios 4s/5/5s/6/6s	safari	不支持
Ios 4s/5/5s/6/6s	chrome	不支持
Ios 4s/5/5s/6/6s	QQ浏览器	不支持
Ios 4s/5/5s/6/6s	手机百度	不支持
Ios 4s/5/5s/6/6s	Opera	支持
Ios 4s/5/5s/6/6s	微信	不支持
Android 三星/小米3	本地浏览器Android 4.0 +	支持
Android 三星/小米3	chrome	支持
Android 三星/小米3	uc	支持
Android 三星/小米3	QQ浏览器v6.4.1+	支持
Android 三星/小米3	手机百度7.1+	支持
Android 三星/小米3	微信	支持

兼容解决方案

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

1. 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==';  

   };

2. 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/