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

一次填坑の经历

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

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

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

相关项目:lzwme/webp-batch-convert: webp 图片批量转换。将 png/jpg/bmp 格式的图片批量转换为 webp 格式。

准备工作

1
npm install -g webp-batch-convert

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

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

常用的两句指令

1
2
3
4
## 有损,适合处理普通图片
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 不愧是平民(贫民)玩家福音。
趁着刚换键盘的新鲜感,这几天可能会多写一点博客内容了(笑)。