當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

移动端webP调研

發(fā)布時(shí)間：2025/7/14 编程问答 20 豆豆

生活随笔收集整理的這篇文章主要介紹了移动端webP调研小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

移動(dòng)端webP調(diào)研

webP介紹

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

webP如何轉(zhuǎn)換

1、智圖http://zhitu.isux.us/
2、 iSparta
3、 libwebp
4、http://image.online-convert.com/convert-...
5、Cloudinary
6、谷歌開發(fā)的命令行

兼容性測(cè)試

機(jī)型瀏覽器支持情況

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	手機(jī)百度	不支持
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	手機(jī)百度7.1+	支持
Android 三星/小米3	微信	支持

兼容解決方案

前端JS方案（推薦）——利用img標(biāo)簽加載一張base64的WebP圖片，在img標(biāo)簽的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);});}}

)
})

- 后臺(tái)判斷方案——判斷瀏覽器請(qǐng)求頭Accept是否支持WebP，返回是否支持的標(biāo)示給前臺(tái)。 - iOS獨(dú)立版

這樣做的好處在于下載WebP的時(shí)候節(jié)省了帶寬，雖然在轉(zhuǎn)碼的時(shí)候會(huì)耗時(shí)，但是由于下載時(shí)間縮短中和了轉(zhuǎn)碼的時(shí)間，所以用戶基本感覺不出來(lái)差別。我們?cè)诓谎娱L(zhǎng)用戶等待時(shí)間的同時(shí)縮小圖片體積，節(jié)省了帶寬。

安卓獨(dú)立版
后臺(tái)判斷用戶機(jī)器系統(tǒng)，當(dāng)系統(tǒng)版本大于4.0的時(shí)候返回支持WebP標(biāo)示（因?yàn)槠湓С?#xff09;，前端拉取圖片時(shí)后臺(tái)會(huì)根據(jù)這個(gè)標(biāo)示決定使用原格式圖片還是WebP格式的圖片。
webp.js
插件將會(huì)捕捉頁(yè)面中使用WebP格式的img元素，并用Flash進(jìn)行替換。圖像的解碼及顯示都在Flash中完成，因此目前版本對(duì)CSS設(shè)置的背景圖片無(wú)效。

當(dāng)然，作為JPEG格式的替換，只有對(duì)較大的圖像使用才有意義，否則過多的解碼將消耗大量的資源。

業(yè)界分析

天貓 (前端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 ""}} });

美團(tuán)（后端判斷返回）
大圖采用了webP,像列表頁(yè)banner,詳情頁(yè)的圖片預(yù)覽

參考資料

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/

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

WebP