让网站根据浏览器自动选择是否展示webp格式图像

关于webp格式的好处，我在很久之前转载过一篇文章：WebP 相对于 PNG、JPG 有什么优势？那个时候我的博客刚改成使用webp格式，不过后来出了一些问题导致我回滚了这个操作。

时隔近一年时间，我的博客再次重新支持webp格式了。这篇文章主要是介绍我的博客是如何判断浏览器是否支持webp格式并将所有的图片以webp格式展现。

我的配置

因为我使用的是七牛云自带的格式转换的图片样式，所以我使用了替换全站img标签的src中的url参数。如果你使用的不是七牛云，可以根据我的代码进行二次修改。

主要思路

使用的是js来判断浏览器的头部信息是否支持，如果支持则将原有我全站里面img标签里src中的!blogimg改为@blogwebp。

代码如下

可以放在外置的js文件，也可以直接写进网页中

window.onload=function(){
    var checkPic = function(isWebP){
        $("img").each(function(){
            // console.log('执行')
            var str; 
            str = $(this).attr("src");
          if(str){
	          // 将原有链接进行修改
            str = str.replace("!blogimg", "@blogwebp");
            str = str.replace("!cover", "!coverwebp");
            var newstr = str;
            $(this).attr("src",newstr);
          }
          
        })
    }
    var checkWebp = function(){
        try{
            return (document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0);
        }catch(err) {
            return  false;
        }
    }
    
    checkPic(checkWebp());
}