上一篇 【webp简介】
兼容性
来自于【ISUX -Hahn 的文章 WebP 探寻之路】
根据对目前国内浏览器占比与 WebP 的兼容性分析,大约有 50% 以上的国内用户可以直接体验到 WebP,如果你的网站以图片为主,或者你的产品基于 Chromium 内核,建议体验尝试。假如你打算在 App 中使用 WebP,除了 Android4.0 以上提供的原生支持外,其他版本以及 iOS 都可以直接使用官方提供的解析库(Android 、iOS )。
测试一:AndroidQQ 下 PNG 和 WebP 各指标对比。
测试二:iPhoneQQ 下 PNG 和 WebP 各指标对比。
当前网络流量主要是已多媒体为主,之前谷歌发布过一个报告,多媒体资源流量占整个流量的65%以上。图片也是多媒体中重要的组成的成分,所以所占的流量比一定也不低。因为WebP是google开发的一种旨在加快图片加载速度的图片格式。所以支持主要是已chrome为主的,webkit内核的浏览器的支持。IE还是不是很支持的。所以代码上还是改造一下。
前端js兼容代码
//设置默认值
window.isSupportWebp = false;
void function(){
var webpTestsUri = 'data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoBAAEAAwA0JaQAA3AA/vuUAAA=';
var image = new Image();
function addResult(event) {
// if the event is from 'onload', check the see if the image's width is
// 1 pixel (which indiciates support). otherwise, it fails
window.isSupportWebp = event && event.type === 'load' ? image.width == 1 : false;
}
image.onerror = addResult;
image.onload = addResult;
image.src = webpTestsUri;
}();
// 图片替换为 webp 和 请求协议HTTPS
String.prototype.protocol = function(){
var str = this;
str = window.isSupportWebp ? (str.replace(/(\.jpg|\.png)/g, ".webp")) : str;
return str.replace(/http:\/\/p\d\.qh[imgs]{3}/,"https://p.ssl.qhmsg");
};
//自动适配协议
String.prototype.authorProtocol = function(){
var str = this.replace("quc.qhimg", "p8.qhimg");
str = window.isSupportWebp ? (str.replace(/(\.jpg|\.png)/g, ".webp")) : str;
return str.replace(/http:\/\/p\d\.qh[imgs]{3}/,"https://p.ssl.qhmsg");
};