今天闲来无事将 Hugo 中的图片压缩为了 Webp。
以往图片都是以 png jpg jpeg 为主，日常在使用 Windows 上简单的图片编辑器时发现很多照片其实体积都挺大，特别是 Windows 默认截图时，由于使用的 4K 显示器，很多照片尺寸都超过 300 万像素，导致文件体积偏大。
我的 Hugo 目录一度超过了 3GB ，这不仅对 Github 免费仓库不是很友好，毕竟 Github 免费仓库推荐容量在 1-5GB 以内，而且耗费额外流量，不利于博客长期稳定运行。
Webp 可以大幅压缩图片体积，我测试了一些 5MB 左右的 Windows 截图，能压缩到 300KB 以内，可以说是当前最佳网络图片格式了。
于是开始查找转换方案。
转换需求
我的需求其实挺简单，只要将 Hugo 中 Content 目录下所有 jpg jpeg png 图片转换为 webp 并替代原文件即可。
DeepSeek未能实现
打开常用的国产 Ai DeepSeek 提问，它立马给出答案。
-
在 Windows 上安装 cwebp
从 Google WebP 官方页面 下载预编译的二进制文件，并将其添加到系统的 PATH 环境变量中。
-
编写批处理脚本
创建一个新的批处理文件（.bat），例如 convert_to_webp.bat，并将以下内容复制到文件中：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
@echo off
setlocal enabledelayedexpansion
:: 定义输入目录
set input_dir=D:\Hugo\content
:: 遍历输入目录及其子目录
for /r "%input_dir%" %%f in (*.jpg *.jpeg *.png) do (
set "filename=%%~nf"
set "extension=%%~xf"
set "output_file=%%~dpnf.webp"
:: 转换文件为 webp 格式
cwebp "%%f" -o "!output_file!"
)
echo 转换完成
pause
|
- 运行批处理脚本
将 convert_to_webp.bat 文件保存到你喜欢的目录中，然后在命令提示符中运行该脚本：
convert_to_webp.bat
但是这并不成功，因为图片虽然转换了，但全部转换在 bat 文件目录。于是开始着手解决这个问题。
可惜在 deepseek 上几经周折都未能实现。给出的 bat 脚本始终只能将文件转换在 bat 文件夹中。
并未实现对原文件的替换。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
@echo off
setlocal enabledelayedexpansion
:: 定义输入目录
set input_dir=D:\Hugo\content
:: 遍历输入目录及其子目录
for /r "%input_dir%" %%f in (*.jpg *.jpeg *.png) do (
set "filename=%%~nf"
set "extension=%%~xf"
set "output_file=%%~dpn!filename!.webp"
:: 转换文件为 webp 格式
cwebp "%%f" -o "!output_file!"
:: 删除原文件
del "%%f"
:: 重命名 webp 文件为原文件名
ren "!output_file!" "!filename!!extension!"
)
echo 转换完成
pause
|
并且，由于我有一部分文件夹中 png jpg 与 webp 文件重名，我还想着在每个生成的文件名尾部加一个字母避免文件名冲突，同时方便我在 vscode 中批量替换文件名后缀。
可惜一直不得行。
通义千问和智谱清言同样未能实现
通义千问给出的答案如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
@echo off
setlocal enabledelayedexpansion
REM 设置 cwebp 的路径（如果不在 PATH 环境变量中）
REM set CWEBP_PATH=C:\path\to\your\cwebp.exe
REM 设置源目录
set SOURCE_DIR=D:\Hugo\content
REM 开始遍历目录寻找图片
for /r "%SOURCE_DIR%" %%f in (*.png *.jpg *.jpeg) do (
REM 获取文件全名和文件名（不含扩展名）
set "file=%%f"
set "filename=%%~nf"
set "webp_file=%%~dpnwf.webp" %%%% dp = drive and path, n = name, f = extension
REM 执行 cwebp 命令进行转换
if defined CWEBP_PATH (
"!CWEBP_PATH!" -q 75 "%%f" -o "!webp_file!"
) else (
cwebp -q 75 "%%f" -o "!webp_file!"
)
REM 检查转换是否成功，如果成功则删除原文件
if exist "!webp_file!" (
del "%%f"
) else (
echo Failed to convert: %%f
)
)
echo Conversion completed.
pause
|
但问题依旧，还是未能替换原文件。只是将原文件删除了，然后新的图片生成在 bat 文件所在目录中。
智谱清言的情况类似，也是出现这个问题。甚至一开始给出的 bat 代码一度无法运行。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
@echo off
setlocal enabledelayedexpansion
REM 设置cwebp工具的路径
set "cwebp_path=cwebp.exe"
REM 设置要转换图片的目录
set "source_dir=D:\Hugo\content"
REM 遍历目录中的所有文件
for /r "%source_dir%" %%i in (*.png *.jpg *.jpeg) do (
REM 设置转换后的webp文件名
set "output_file=%%~dpni.webp"
REM 转换图片
"%cwebp_path%" "%%i" -o "%%~dpni.webp" -q 80
REM 删除原图片
del "%%i"
REM 重命名webp文件，替换原文件名
ren "%%~dpni.webp" "%%~nxi"
)
echo 图片转换完成。
endlocal
|
正确写法还是得靠Chatgpt
无奈之下还是回到 chatgpt ，用的还是 chatgpt 3.5 , 给出了一个更简洁的脚本。
我还一度以为这是忽悠。
1
2
3
4
5
6
7
8
9
10
11
12
13
|
@echo off
setlocal enabledelayedexpansion
for /r %%i in (*.jpg *.jpeg *.png) do (
set "newFile=%%~dpi%%~ni.webp"
cwebp -q 80 "%%i" -o "!newFile!"
del "%%i"
rename "!newFile!" "%%~nxi"
echo Converted %%i to "%%~nxi"
)
echo All images converted and originals deleted.
pause
|
出乎意料的是，chatgpt 这段脚本居然顺利运行。
但是在过程中我发现个奇怪的事，看起来图片文件还是原来那个文件，似乎并没有被转换。
直到我查看文件夹容量大小时才发现，确实变小了。
原来，chatgpt 给的这个答案只是将 jpg png jpeg 文件转换为 webp 文件并完成替换，但没有修改文件名称，依然保留了原文件后缀。看起来依然是 jpg png ，实际上内容已经变成 webp 了。
如此，我只需要直接将 content 文件夹中图片转换即可，博客 md 文件中那些图片后缀名都不用再修改了。
大道至简莫过于此。
这次压缩后，我 hugo 中整个 content 文件夹已经被压缩到了 150MB ，生成 public 和 resources 文件夹后，总共也就 780MB，可以说相比之前有了巨大改善。
