网站在进行 seo 测试时,有一项推荐是更改 PNG 格式图片为 webp,图片体积大幅减少,质量损失不多。这样会加快网页加载速度,节约带宽。
由于网页里面 png 图片已经又一定数量,需要批量转换格式。操作在 ubuntu 下完成,过程如下。
sudo apt install webp
➜ cwebp xray_firefox.png -o xray_firefox.webp
Saving file 'xray_firefox.webp'
File: xray_firefox.png
Dimension: 1398 x 973
Output: 56808 bytes Y-U-V-All-PSNR 44.33 47.21 47.59 45.13 dB
(0.33 bpp)
block count: intra4: 1282 (23.88%)
intra16: 4086 (76.12%)
skipped: 3883 (72.34%)
bytes used: header: 421 (0.7%)
mode-partition: 7225 (12.7%)
Residuals bytes |segment 1|segment 2|segment 3|segment 4| total
macroblocks: | 1%| 9%| 22%| 67%| 5368
quantizer: | 36 | 34 | 29 | 23 |
filter level: | 11 | 7 | 12 | 10 |
➜ ls -lh xray_firefox*
-rw-rw-r-- 1 mephisto mephisto 168K Jun 3 21:08 xray_firefox.png
-rw-rw-r-- 1 mephisto mephisto 56K Jul 1 16:16 xray_firefox.webp
➜
如上所示,体积从 168K 减少至 56k,为原来的体积的三分之一
firefox 打开图片对比测试,左 PNG,右 WEB

调整质量因素参数测试(参数为 q,0<N<100,默认值为 75,下面示例为 85),体积从 56K 增加至 71K
➜ cwebp -q 85 xray_firefox.png -o xray_firefox.webp
Saving file 'xray_firefox.webp'
File: xray_firefox.png
Dimension: 1398 x 973
Output: 71730 bytes Y-U-V-All-PSNR 48.50 51.31 51.68 49.29 dB
(0.42 bpp)
block count: intra4: 1303 (24.27%)
intra16: 4065 (75.73%)
skipped: 3946 (73.51%)
bytes used: header: 544 (0.8%)
mode-partition: 7375 (10.3%)
Residuals bytes |segment 1|segment 2|segment 3|segment 4| total
macroblocks: | 1%| 9%| 22%| 67%| 5368
quantizer: | 20 | 18 | 16 | 12 |
filter level: | 7 | 4 | 3 | 2 |
➜ iPhone ls -lh xray_firefox*
-rw-rw-r-- 1 mephisto mephisto 168K Jun 3 21:08 xray_firefox.png
-rw-rw-r-- 1 mephisto mephisto 71K Jul 1 16:23 xray_firefox.webp
简单批量转换脚本
➜ cat test.sh
#/bin/bash
for file in *.png;
do
echo $file
cwebp "$file" -o "${file%.png}.webp";
done
执行脚本
➜ ./test.sh
font_result.png
Saving file 'font_result.webp'
File: font_result.png
Dimension: 1335 x 1005
Output: 57624 bytes Y-U-V-All-PSNR 43.96 45.09 45.14 44.31 dB
(0.34 bpp)
block count: intra4: 1396 (26.38%)
intra16: 3896 (73.62%)
skipped: 3630 (68.59%)
bytes used: header: 419 (0.7%)
mode-partition: 7629 (13.2%)
Residuals bytes |segment 1|segment 2|segment 3|segment 4| total
macroblocks: | 2%| 7%| 19%| 72%| 5292
quantizer: | 36 | 35 | 29 | 23 |
filter level: | 11 | 7 | 38 | 30 |
github_hook_result.png
Saving file 'github_hook_result.webp'
File: github_hook_result.png
Dimension: 1664 x 634
Output: 33674 bytes Y-U-V-All-PSNR 45.81 45.92 46.16 45.89 dB
(0.26 bpp)
block count: intra4: 643 (15.46%)
intra16: 3517 (84.54%)
skipped: 3258 (78.32%)
bytes used: header: 388 (1.2%)
mode-partition: 4412 (13.1%)
Residuals bytes |segment 1|segment 2|segment 3|segment 4| total
macroblocks: | 1%| 4%| 10%| 85%| 4160
quantizer: | 36 | 36 | 31 | 24 |
filter level: | 11 | 8 | 6 | 4 |
github_webhook.png
Saving file 'github_webhook.webp'
File: github_webhook.png
Dimension: 1085 x 687
Output: 35696 bytes Y-U-V-All-PSNR 44.19 44.32 44.53 44.27 dB
(0.38 bpp)
block count: intra4: 658 (22.50%)
intra16: 2266 (77.50%)
skipped: 2141 (73.22%)
bytes used: header: 380 (1.1%)
mode-partition: 3715 (10.4%)
Residuals bytes |segment 1|segment 2|segment 3|segment 4| total
macroblocks: | 2%| 7%| 11%| 80%| 2924
quantizer: | 36 | 36 | 30 | 24 |
filter level: | 11 | 8 | 5 | 5 |
......
查看结果,体积越大的图片,效果越明显
➜ ls -lh
total 1.9M
-rw-rw-r-- 1 mephisto mephisto 43K May 29 12:53 404.jpg
-rw-rw-r-- 1 mephisto mephisto 166K Jun 8 13:59 font_result.png
-rw-rw-r-- 1 mephisto mephisto 57K Jul 1 16:29 font_result.webp
-rw-rw-r-- 1 mephisto mephisto 96K Jun 6 18:24 github_hook_result.png
-rw-rw-r-- 1 mephisto mephisto 33K Jul 1 16:29 github_hook_result.webp
-rw-rw-r-- 1 mephisto mephisto 93K Jun 6 18:18 github_webhook.png
-rw-rw-r-- 1 mephisto mephisto 35K Jul 1 16:29 github_webhook.webp
-rw-rw-r-- 1 mephisto mephisto 184K Jun 7 18:01 google_fonts.png
-rw-rw-r-- 1 mephisto mephisto 74K Jul 1 16:29 google_fonts.webp
-rw-rw-r-- 1 mephisto mephisto 114K Jun 4 16:03 haha.png
-rw-rw-r-- 1 mephisto mephisto 52K Jul 1 16:29 haha.webp
-rw-rw-r-- 1 mephisto mephisto 79K Jun 7 18:07 libre_baskerville_font.png
-rw-rw-r-- 1 mephisto mephisto 28K Jul 1 16:29 libre_baskerville_font.webp
-rw-rw-r-- 1 mephisto mephisto 67K Jun 21 17:27 rime_clover.png
-rw-rw-r-- 1 mephisto mephisto 17K Jul 1 16:29 rime_clover.webp
-rw-rw-r-- 1 mephisto mephisto 403K Jun 21 17:48 rime_example.png
-rw-rw-r-- 1 mephisto mephisto 50K Jul 1 16:29 rime_example.webp
-rwxrwxr-x 1 mephisto mephisto 89 Jul 1 16:29 test.sh
-rw-rw-r-- 1 mephisto mephisto 168K Jun 3 21:08 xray_firefox.png
-rw-rw-r-- 1 mephisto mephisto 56K Jul 1 16:29 xray_firefox.webp
如今 webp 的支持已经比较完善了,本站绝大部分的图片都已更改为 webp 格式,包括 ico 图标文件,目测无明显图片品质损失,加载速度的确较大幅度提升,毕竟小破站,想改就该。
大型站点,请君酌情处理。
2025 年 12 月 14 日更新:
使用 imagemagick 的相关工具转换也非常方便,推荐使用
1sudo pacman -S imagemagick
1magick input.png output.webp
1 mogrify -format webp \*.png
网站在进行 seo 测试时,有一项推荐是更改 PNG 格式图片为 webp,图片体积大幅减少,质量损失不多。这样会加快网页加载速度,节约带宽。
由于网页里面 png 图片已经又一定数量,需要批量转换格式。操作在 ubuntu 下完成,过程如下。
sudo apt install webp
➜ cwebp xray_firefox.png -o xray_firefox.webp
Saving file 'xray_firefox.webp'
File: xray_firefox.png
Dimension: 1398 x 973
Output: 56808 bytes Y-U-V-All-PSNR 44.33 47.21 47.59 45.13 dB
(0.33 bpp)
block count: intra4: 1282 (23.88%)
intra16: 4086 (76.12%)
skipped: 3883 (72.34%)
bytes used: header: 421 (0.7%)
mode-partition: 7225 (12.7%)
Residuals bytes |segment 1|segment 2|segment 3|segment 4| total
macroblocks: | 1%| 9%| 22%| 67%| 5368
quantizer: | 36 | 34 | 29 | 23 |
filter level: | 11 | 7 | 12 | 10 |
➜ ls -lh xray_firefox*
-rw-rw-r-- 1 mephisto mephisto 168K Jun 3 21:08 xray_firefox.png
-rw-rw-r-- 1 mephisto mephisto 56K Jul 1 16:16 xray_firefox.webp
➜
如上所示,体积从 168K 减少至 56k,为原来的体积的三分之一
firefox 打开图片对比测试,左 PNG,右 WEB

调整质量因素参数测试(参数为 q,0<N<100,默认值为 75,下面示例为 85),体积从 56K 增加至 71K
➜ cwebp -q 85 xray_firefox.png -o xray_firefox.webp
Saving file 'xray_firefox.webp'
File: xray_firefox.png
Dimension: 1398 x 973
Output: 71730 bytes Y-U-V-All-PSNR 48.50 51.31 51.68 49.29 dB
(0.42 bpp)
block count: intra4: 1303 (24.27%)
intra16: 4065 (75.73%)
skipped: 3946 (73.51%)
bytes used: header: 544 (0.8%)
mode-partition: 7375 (10.3%)
Residuals bytes |segment 1|segment 2|segment 3|segment 4| total
macroblocks: | 1%| 9%| 22%| 67%| 5368
quantizer: | 20 | 18 | 16 | 12 |
filter level: | 7 | 4 | 3 | 2 |
➜ iPhone ls -lh xray_firefox*
-rw-rw-r-- 1 mephisto mephisto 168K Jun 3 21:08 xray_firefox.png
-rw-rw-r-- 1 mephisto mephisto 71K Jul 1 16:23 xray_firefox.webp
简单批量转换脚本
➜ cat test.sh
#/bin/bash
for file in *.png;
do
echo $file
cwebp "$file" -o "${file%.png}.webp";
done
执行脚本
➜ ./test.sh
font_result.png
Saving file 'font_result.webp'
File: font_result.png
Dimension: 1335 x 1005
Output: 57624 bytes Y-U-V-All-PSNR 43.96 45.09 45.14 44.31 dB
(0.34 bpp)
block count: intra4: 1396 (26.38%)
intra16: 3896 (73.62%)
skipped: 3630 (68.59%)
bytes used: header: 419 (0.7%)
mode-partition: 7629 (13.2%)
Residuals bytes |segment 1|segment 2|segment 3|segment 4| total
macroblocks: | 2%| 7%| 19%| 72%| 5292
quantizer: | 36 | 35 | 29 | 23 |
filter level: | 11 | 7 | 38 | 30 |
github_hook_result.png
Saving file 'github_hook_result.webp'
File: github_hook_result.png
Dimension: 1664 x 634
Output: 33674 bytes Y-U-V-All-PSNR 45.81 45.92 46.16 45.89 dB
(0.26 bpp)
block count: intra4: 643 (15.46%)
intra16: 3517 (84.54%)
skipped: 3258 (78.32%)
bytes used: header: 388 (1.2%)
mode-partition: 4412 (13.1%)
Residuals bytes |segment 1|segment 2|segment 3|segment 4| total
macroblocks: | 1%| 4%| 10%| 85%| 4160
quantizer: | 36 | 36 | 31 | 24 |
filter level: | 11 | 8 | 6 | 4 |
github_webhook.png
Saving file 'github_webhook.webp'
File: github_webhook.png
Dimension: 1085 x 687
Output: 35696 bytes Y-U-V-All-PSNR 44.19 44.32 44.53 44.27 dB
(0.38 bpp)
block count: intra4: 658 (22.50%)
intra16: 2266 (77.50%)
skipped: 2141 (73.22%)
bytes used: header: 380 (1.1%)
mode-partition: 3715 (10.4%)
Residuals bytes |segment 1|segment 2|segment 3|segment 4| total
macroblocks: | 2%| 7%| 11%| 80%| 2924
quantizer: | 36 | 36 | 30 | 24 |
filter level: | 11 | 8 | 5 | 5 |
......
查看结果,体积越大的图片,效果越明显
➜ ls -lh
total 1.9M
-rw-rw-r-- 1 mephisto mephisto 43K May 29 12:53 404.jpg
-rw-rw-r-- 1 mephisto mephisto 166K Jun 8 13:59 font_result.png
-rw-rw-r-- 1 mephisto mephisto 57K Jul 1 16:29 font_result.webp
-rw-rw-r-- 1 mephisto mephisto 96K Jun 6 18:24 github_hook_result.png
-rw-rw-r-- 1 mephisto mephisto 33K Jul 1 16:29 github_hook_result.webp
-rw-rw-r-- 1 mephisto mephisto 93K Jun 6 18:18 github_webhook.png
-rw-rw-r-- 1 mephisto mephisto 35K Jul 1 16:29 github_webhook.webp
-rw-rw-r-- 1 mephisto mephisto 184K Jun 7 18:01 google_fonts.png
-rw-rw-r-- 1 mephisto mephisto 74K Jul 1 16:29 google_fonts.webp
-rw-rw-r-- 1 mephisto mephisto 114K Jun 4 16:03 haha.png
-rw-rw-r-- 1 mephisto mephisto 52K Jul 1 16:29 haha.webp
-rw-rw-r-- 1 mephisto mephisto 79K Jun 7 18:07 libre_baskerville_font.png
-rw-rw-r-- 1 mephisto mephisto 28K Jul 1 16:29 libre_baskerville_font.webp
-rw-rw-r-- 1 mephisto mephisto 67K Jun 21 17:27 rime_clover.png
-rw-rw-r-- 1 mephisto mephisto 17K Jul 1 16:29 rime_clover.webp
-rw-rw-r-- 1 mephisto mephisto 403K Jun 21 17:48 rime_example.png
-rw-rw-r-- 1 mephisto mephisto 50K Jul 1 16:29 rime_example.webp
-rwxrwxr-x 1 mephisto mephisto 89 Jul 1 16:29 test.sh
-rw-rw-r-- 1 mephisto mephisto 168K Jun 3 21:08 xray_firefox.png
-rw-rw-r-- 1 mephisto mephisto 56K Jul 1 16:29 xray_firefox.webp
如今 webp 的支持已经比较完善了,本站绝大部分的图片都已更改为 webp 格式,包括 ico 图标文件,目测无明显图片品质损失,加载速度的确较大幅度提升,毕竟小破站,想改就该。
大型站点,请君酌情处理。
2025 年 12 月 14 日更新:
使用 imagemagick 的相关工具转换也非常方便,推荐使用
1sudo pacman -S imagemagick
1magick input.png output.webp
1 mogrify -format webp \*.png