移动端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。
-
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==';};
-
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/