Hexo 博客使用 WebP Cloud Service

为什么要使用 WebP 格式

用一张图片来说就是

WebP 格式的图片更小，可以让你打开 keshane.moe 的加载速度变得更快。

为什么我的博客之前没使用 webp 格式的图片

虽然目前的主流浏览器都支持了 WebP 格式，但是如果你使用了过于先进的浏览器或者某些小而美的聊天软件，可能不能很好的支持 WebP 格式，所以我们目前暂时不能一股脑的在页面上用上把所有的图片换成 WebP 格式，之前 Nova 大佬开发了 https://github.com/webp-sh/webp_server_go 可以在不改变 url 和原始图片格式的情况下根据不同的设备返回不同的图片。但是由于我是个懒人，所有图片都是丢在 git 仓库下的，静态页面是 cloudflare page ，并不想再单独部署一个 webp_server_go 来提供更好的浏览体验反正也没啥人看（

WebP Cloud

因为上述不便呢，一个在线托管的 webp_server 服务就很有必要了。Webp Cloud Service 出现了，https://webp.se/

使用方式可以参考官方文档

快速接入

使用 hexo 提供的过滤器和插件机制，我们可以简单的处理内容。

我做了个简单的插件，将 img 标签中的 src 内容替换为 Webp Cloud Service 提供的代理 urlhexo-webp-cloud-proxy

1. 首先安装这个插件

1

npm install hexo-webp-cloud-proxy --save

1. 然后将下面的内容复制到你的配置文件中

1
2
3
4
5
6
7
8
9
10

webp_cloud_proxy:
  enable: true
  # the suffix of img type to use webp cloud service
  convert_type_list: ["jpg", "jpeg", "png", "gif"]
  # your site url
  pre_url: https://keshane.moe
  # webp cloud service proxy url
  proxy_url: https://webp.keshane.moe
  # the filter priority, see https://hexo.io/api/filter.html
  priority: 10

后续就和正常使用 hexo 一样了

参考

• webp cloud service
• hexo过滤器