webp图像格式是Google推出的一款非常小体积的图像格式,它的优点很多,现在被大厂比如微信文章、豆瓣网等完美支持。可以降低图片对带宽和流量占用。

因为使用webp需要图片采用https(或者将网站降级为http),否则会出现加载异常

所以本博客暂时还是使用jpg。

WebP 百度百科

WebP 相对于 PNG、JPG 有什么优势?

因为工作是设计相关,博客自然会有很多图片。图片一多,一个问题就需要面对:占用的带宽和流量很高。

那么使用webp格式图片是一种非常棒的方法。但是使用webp格式不得不面对兼容性问题。除了Chrome(Chromeium)内核其他的几乎都不支持(还好国内大多数都是Chromeium内核)。但是苹果的safari和ie总不能放弃他们吧,所以在一开始本来想写个兼容性声明直接不兼容,但是最后还是花了些时间来解决这个兼容性问题。

使用环境:

框架:hexo

markdown编辑器:hexo-admin-qiniu

图片服务器:七牛

为七牛图片添加样式

进入 对象存储 ➡️ 图片样式 为jpg和webp各添加一个样式,我添加的名称为blogjpg(jpg格式)和blogimg(webp格式)

webp参考处理接口:

imageView2/2/format/webp&attname=downloadimg.webp

jpg参考处理接口:

imageView2/2/format/jpg&attname=downloadimg.jpg

1.当然你可以直接使用url处理而不使用图片样式,但是还是推荐使用图片样式的方法,方便后期修改。
2.样式分隔符我使用的是@作为分割,可以自行定义并修改下方代码
3.图片中的处理接口仅供参考,根据实际需求来进行填写。最重要的是开头的/format/webp和结尾的&attname=downloadimg.webp(jpg同理)

修改代码:

定位文件zhhoo/node_modules/hexo-admin-qiniu/client/code-mirror.jszhhoo/node_modules/hexo-admin-qiniu/www/bundle.js

定位并按照参考代码进行修改

参考代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
api.getToken(imgName).then(function(res)  {
var bucketHost= res.bucketHost;
var imageslime = res.imageslime;
_qiniuUpload(blob, res.token, imgName, function(res){
var pasteImg = '![](http://'+ bucketHost +'/' + res.key + ')';

//images slim
if(imageslime){
pasteImg = '<picture><source srcset=\"https://' + bucketHost + '/' + res.key + '!blogimg\" type=\"image/webp\"><source srcset=\"https://'+ bucketHost + '/' + res.key + '@blogjpg\" type=\"image/jpg\"><img src=\"https://'+ bucketHost + '/' + res.key + '@blogjpg\" type=\"image/jpg\" alt=\"zhhoo image\"></picture>';
//pasteImg = '![](https://'+ bucketHost +'/' + res.key + '!blogimg)';
}
cmEditor.replaceSelection(pasteImg)
}

)
});

参考资料:

借助数据万象(原万象优图),让 hexo 也用上 webp

hexo-admin-qiniu

搞定!是不是很简单~ 还有其他问题可以到我的公众号给我留言,如果对这个文章感到问题可以在下方评论。