icewing

使用js判断是否使用WebP图片显示
很多CDN服务商会有一个创建图片缩略图的规则。可以通过CDN设置并自动使用WebP图片。无奈我的目前没有,想要使用...
扫描右侧二维码阅读全文
08
2018/12

使用js判断是否使用WebP图片显示

很多CDN服务商会有一个创建图片缩略图的规则。可以通过CDN设置并自动使用WebP图片。无奈我的目前没有,想要使用只好自己来配置。

WebP图片

如果你还不知道什么是WebP图片。可以查看一下下面的示例。

1

WebP格式,谷歌(google)开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3,并能节省大量的服务器宽带资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。
WebP既支持有损压缩也支持无损压缩。相较编码JPEG文件,编码同样质量的WebP文件需要占用更多的计算资源。

缺点

目前支持的游览器:Chrome、Edge;
Mozilla的Firefox和苹果的Safar目前仍不支持WebP。
所以就有了下面这个js来判断是否需要使用WebP。

js代码

  • 公共方法:用于所有img标签显示原图还是webp图片。
var checkPic = function(isWebP){
    $("img").each(function(i,v){
        var src = isWebP?$(v).attr('webppic-src'):$(v).attr('pic-src');
        $(v).attr('src',src);
    })
}
  • html代码需要准备两个属性加载图片。
<img src="" pic-src="./test.jpg" webppic-src="./test.webp">
  • 第一种:这里先加载一个一像素的图片。如果能获取图片的宽高。说明支持WebP。反之不支持。
var isWebP = false;
var img = new Image();
img.onload = function(){
    isWebP = !!(img.height>0 && img.width>0);
    checkPic(isWebP);
};
img.onerror = function(){
    isWebP = false;
    checkPic(isWebP);
};
img.src = 'data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoBAAEAAwA0JaQAA3AA/vuUAAA=';
  • 第二种:通过查看响应头和请求头相关字段,判断其Accept里是否含有 image/webp 字段,如果包含则说明支持WebP,反之则不支持。
var checkWebp = function(){
    try{
        return (document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0);
    }catch(err) {
        return  false;
    }
}
checkPic(checkWebp());
最后修改:2018 年 12 月 08 日 10 : 34 AM
生活需要一些仪式感,比如手冲一杯咖啡:)

发表评论