在使用 hexo-admin-qiniu 时使用 webp 图像格式并适配兼容性

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

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

所以本博客暂时还是使用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.js和zhhoo/node_modules/hexo-admin-qiniu/www/bundle.js

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

参考代码：

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)
      }
      
    )
  });