移动端webP调研

时间 2019-12-05

标签移动 webp 调研栏目无线繁體版

原文原文链接

移动端webP调研

webP介绍

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

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。web

testWebp = function(callback){chrome

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的时候节省了带宽，虽然在转码的时候会耗时，可是因为下载时间缩短中和了转码的时间，因此用户基本感受不出来差异。咱们在不延长用户等待时间的同时缩小图片体积，节省了带宽。移动端web

安卓独立版
后台判断用户机器系统，当系统版本大于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/