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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...