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

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

我的配置

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

主要思路

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

代码如下

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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());
}

其他方式

如果你是相同文件名,不同扩展名,可以举一反三,将修改代码更改为:

1
str = str.replace(".png", ".webp");

以此类推。