移動端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/

總結

以上是生活随笔為你收集整理的移动端webP调研的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。