Jump to content
新域网络技术论坛
Sign in to follow this  
Jamers

浏览器Webp支持检测方式

Recommended Posts

webp是Google 2010年推出的新图像格式,到目前为止也只有Google自己支持。它的优势也非常明显。

 

 

PNG 转 WebP 的压缩率要高于 PNG 原图压缩率,同样支持有损与无损压缩转换后的 WebP 体积大幅减少,图片质量也得到保障(同时肉眼几乎无法看出差异)转换后的 WebP 支持 Alpha 透明和 24-bit 颜色数,不存在 PNG8 色彩不够丰富和在浏览器中可能会出现毛边的问题

作者:知乎用户
链接:https://www.zhihu.com/question/27201061/answer/35637827
来源:知乎
 

科技博客 GigaOM 曾报道:YouTube 的视频略缩图采用 WebP 格式后,网页加载速度提升了 10%;谷歌的 Chrome 网上应用商店采用 WebP 格式图片后,每天可以节省几 TB 的带宽,页面平均加载时间大约减少 1/3;Google+ 移动应用采用 WebP 图片格式后,每天节省了 50TB 数据存储空间。

作者:知乎用户
链接:https://www.zhihu.com/question/27201061/answer/35637827
来源:知乎

 

目前只有一半左右的浏览器支持,我们想使用这个图片格式还是得费一番功夫,首先判断浏览器是否支持这个格式,如果支持直接使用webp,如果不支持使用传统的图片格式。

 

判断方式有两种方式:
一、通过浏览器请求头进行判断,Accept 中是否包含 image/webp ,如果包含就是支持,否则就是不支持,这里切换文件也相对比较方便,即使客户端关闭JS也不会有影响,推荐使用此模式进行处理。
二、用JS进行前端判断,然后前端用js切换图片。 alert(support.webp2);即可

/**
 * 检测浏览器是否支持webp格式(异步方式)
 * @param callback
 */
var support = {};
checkWebpAsync = function(callback) {
    if (support.webp2 === undefined) {
        var img = new Image();
        var tid = setTimeout(function(){
            support.webp2 = false;
            callback && callback(support.webp2,true);
            img.onload = img.onerror = null;
            img = null;
        },500);
        img.onload = img.onerror = function() {
            clearTimeout(tid);
            support.webp2 = img.width === 2 && img.height === 2;
            callback && callback(support.webp2,false);
        };
        img.src = "data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/oPP8bA//LwYAAA";
    }else{
        callback && callback(support.webp2);
    }
}
checkWebpAsync();

Share this post


Link to post
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
Sign in to follow this  

×
×
  • Create New...