webP兼容性前端处理方法

上一篇 【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");
};