省流好助手,WebP 格式是真的强👍🏻

WebP 是 Google 推出的图片格式,优势是图片体积小。在博客中使用 WebP 格式,可以使加载速度更快。兼容性方面我觉得应该不用怎么担心了,毕竟现在 Safari 都支持了。

所以我目前会把博客中一些图片,转换为 WebP 格式,主要是针对 png 格式的。而原本那些 jpg 图片就没必要去动它了,反正本来就很小。

接下来介绍我是怎么处理 WebP 图片的。

我有一张用相机拍的照片,分辨率是 5472×3080,在电脑上显示它的大小是 1.7MB(Mac 上显示的大小)

image-20230324103524483

使用 identify 获取它的信息(安装 imagemagick 后有这个命令)

# identify DSC00097.JPG
DSC00097.JPG JPEG 5472x3080 5472x3080+0+0 8-bit sRGB 1.57485MiB

如果我把它压缩为 WebP 格式(我电脑已经装好了 cwebp)

❯ cwebp DSC00097.JPG -o vr.webp
Saving file 'vr.webp'
File: DSC00097.JPG
Dimension: 5472 x 3080
Output: 89162 bytes Y-U-V-All-PSNR 47.24 54.85 53.47 48.58 dB
(0.04 bpp)
block count: intra4: 12209 (18.50%)
intra16: 53797 (81.50%)
skipped: 44832 (67.92%)
bytes used: header: 171 (0.2%)
mode-partition: 41743 (46.8%)
Residuals bytes |segment 1|segment 2|segment 3|segment 4| total
macroblocks: | 0%| 1%| 2%| 98%| 66006
quantizer: | 36 | 36 | 34 | 25 |
filter level: | 11 | 9 | 36 | 33 |

执行过程中会输出这些信息。完成后我们再来看看压缩后的图片。

❯ identify vr.webp
vr.webp WEBP 5472x3080 5472x3080+0+0 8-bit sRGB 89162B 0.100u 0:00.097

只有 89162B,那么除以 1024 的话,89162/1024=87.07226562,差不多 87KB。分辨率依然还是 5472x3080,而且我在电脑上用 4k 显示器,全屏来看,感觉没什么区别。确实挺强的,这是压缩后的图片。

qiyu-vr

不过可能是因为我这张图片,画面相对来说比较简单吧,很多地方都是白色的,所以压缩比才能做到这么高。

这样使用的过程中,我觉得有些不方便,因为它需要我输入 -o new-filename.webp

我想要当我输入 webp test.png 的时候,shell 中执行的是 cwebp test.png -o test.webp,所以我写了个 shell 函数,来达到这个目的。

function webp() {
cwebp "$1" -o "${1%.*}.webp"
}

而且还能这么用,先在终端输入 WebP 空格,然后再把图片的拖进来,再按回车。此时原图片旁边,就会多出一张同名的 WebP 图片。

WebP 格式,除了图片体积小之外,另外一个优势就是,它可以和 png 一样,保存透明通道,例如这样的图片。

QuickTime-player-camera

这种图片需要在 Mac 上,使用 command + shift + 4,然后按一下空格键,点击想要的窗口,就可以截图得到。

而默认得到的是 png 格式,还是比较大的。把它转为为 jpg 的话,虽然能缩小,但是透明通道就没了。

现在我把它转换为 WebP,就可以既保持小体积,又保留透明通道。

其它参数:

-quiet 不打印任何内容

-short 仅输出文件大小和 PSNR

cwebp DSC00097.JPG -o t.webp -short
89162 48.58

官方文档:cwebp | WebP | Google Developers