我是怎么给博客整上 WebP 的？

发表于 2022-12-09

一次填坑の经历

本文内容可能已过时，请前往标签: 图片优化查看最新文章

在前段时间所写的文章里面，我介绍到了 WebP 这种图片格式

鉴于 Hexo 目前尚未有较完善的一键将图片转换为 WebP 格式的插件，我采用了一种曲线救国的方式来实现。
这次就写篇文章来介绍下我博客采用 WebP 图片的方法

准备工作

1	npm install -g webp-batch-convert

如果难以访问 npm 源，请使用 cnpm 代替

这一步全局安装了 webp-batch-convert 这个模块，之后便可以通过 cwebp-batch 或指令来调用。
通过看名字也能看出来，这个模块是基于 cwebp 开发的，理论上是可以兼容大多数的 cwebp 语法的，但实测并非完全兼容，可能有一些语法开发者并没有做适配。

## 有损，适合处理普通图片
cwebp-batch --in ./ --out ./ -quiet -mt -m 6 -q 75
## 无损，适合用来处理截图类
cwebp-batch --in ./ --out ./ -quiet -mt -af -lossless

以上语法将自动在当前命令行所在目录里转换非 WebP 图片为 WebP 格式。
不知道是什么原因，导致在用有损压缩指令来处理截图之类图片时，会出现压缩后大小比压缩前还要大，而且画质还更糊，所以在处理截图类图片的时候推荐用无损的方式来处理。

众所周知，我是个老“脚本小子”了，能用脚本偷懒我就尽量用脚本。于是，就可以将以上两句指令写成两个脚本，放在博客根目录下。
第一个脚本命名为 cover2webp-basic.bat，内容为

1	cwebp-batch --in ./source/_drafts/ --out ./source/_drafts/ -quiet -mt -m 6 -q 75

第二个脚本命名为 cover2webp-lossless.bat，内容为

1	cwebp-batch --in ./source/_drafts/ --out ./source/_drafts/ -quiet -mt -af -lossless

然后就可以按需运行了，当需要处理截图的时候，就运行 cover2webp-lossless.bat，处理普通图片的时候，就运行 cover2webp-basic.bat。
通过这种方式，就可以给博客整上 WebP，一方面节约了博客网站空间与耗费的流量，另一方面能够提高网站分数（例如谷歌网站分析）。

顺带一提，为了防止直接转换 _post 目录出现的一些不可控的问题，脚本默认是转换 _drafts 目录的，如果不怕出现奇怪问题的话，可以把脚本中的 _drafts/ 去掉。

这篇文章是我很早以前就开始计划着写的了，奈何前段时间事情太多，就搁置了。当然，当时突然没灵感也是一部分的原因。
当我今天（2022.12.8）重新开始写这篇文章的时候，正好换了新的键盘
诺，就这玩意儿

多模（蓝牙+2.4G+有线）红轴机械键盘，才两百多块钱出头，Rapoo 不愧是平民（贫民）玩家福音。
趁着刚换键盘的新鲜感，这几天可能会多写一点博客内容了（笑）。