移動端webP調研

移動端webP調研

webP介紹

WebP格式，谷歌（google）開發的一種旨在加快圖片加載速度的圖片格式。支持有損壓縮和無損壓縮，無損壓縮後比png文件少了大約35%，有損壓縮後比png文件少了大約70%，能節省大量的服務器帶寬資源和數據空間。

webP如何轉換

一、 智圖http://zhitu.isux.us/
二、 iSparta
三、 libwebp
四、http://image.online-convert.com/convert-...
五、Cloudinary
六、谷歌開發的命令行

兼容性測試

機型	瀏覽器	支持狀況
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/