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

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

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

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

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

使用 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 显示器，全屏来看，感觉没什么区别。确实挺强的，这是压缩后的图片。

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

这样使用的过程中，我觉得有些不方便，因为它需要我输入 -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 一样，保存透明通道，例如这样的图片。

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

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

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

其它参数：

-quiet 不打印任何内容

-short 仅输出文件大小和 PSNR

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

官方文档：cwebp | WebP | Google Developers