最近开始写公众号，本地写 Markdown 图片都是用相对路径，复制粘贴到微信公众号编辑器就跪了，手动上传图片的过程中想到了 WebP，就思考是不是可以尝试把图片后缀都统一成 WebP呢？当然现实是公众号不支持上传 WebP 后缀的图片，即使公众号后台会把你上传的 PNG/JPEG 转成 WebP 🐶 。

1. 了解 WebP

WebP 是 Google 研发的具有先进有损无损压缩算法的图片格式，主要的特点有：高压缩率、支持透明通道、支持动图。据 WebP 官网的描述，在图片质量等同的条件下，WebP 无损压缩后的图片文件大小比对应的 PNG 图片小 26%，有损压缩图片比对应 JPEG 图片小 25～34%。

Png WebP

目前主流浏览器，如 Google Chrome、FireFox、Edge 以及 Opera (macOS Big Sur Safari 实测支持 WebP)等，都原生支持 WebP 了。虽然 WebP 是面向 Web 推出的解决方案，但是凭借其优越压缩比，其它平台、工具也逐渐加入了支持 WebP 的队伍。

2. 使用 WebP

虽然主流浏览器原生支持 WebP，但 macOS 直到 Big Sur 才原生支持预览 WebP 图片，所以想要查看 WebP 图片，可能还需要额外安装一些软件才行（VSCode 支持查看 WebP）。

WebP 包含了一套轻量的编解码库 libwebp，同时提供了开箱即用的命令行工具：

  • cwebp，将其它图片格式转成 WebP，不支持 Gif；
  • dwebp，将 WebP 格式转成其它图片格式；
  • vwebp，预览 WebP 图片，作用不是很大；
  • gif2webp，将 Gif 图转成 WebP 格式；
  • webpmux，将静态 WebP 图片组合成动态 WebP 图片，或从动态 WebP 中抽帧。

这些工具的使用可以看官网文档或者doc，这里不赘述。

2.1. 安装

借助这些工具就能完成 WebP 与其它格式之间的相互转换（程序员表示好评），macOS 可以通过 brew install webp 安装，但是 brew 默认的安装脚本禁用了 gif2webp，所以需要修改安装脚本：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 执行 brew edit webp 打开 webp 的安装脚本
class Webp < Formula
    def install
      system "./autogen.sh" if build.head?
      system "./configure", "--prefix=#{prefix}",
                            "--disable-dependency-tracking",
                            "--disable-gl",
                            # 删除下面一行
                            "--disable-gif",
                            "--enable-libwebpdecoder",
                            "--enable-libwebpdemux",
                            "--enable-libwebpmux"
      system "make", "install"
    end
end

修改好脚本后重新安装：

1
$ brew reinstall webp

2.2. 批量转换

这些工具怎么使用可以看 man doc，描述得很清楚了。

为了方便批量转换，定义一个shell函数，指定后缀批量（递归）转换当前目录下的图片：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function webp_cvr() {
    local suffix=${1}
    if [ -z ${suffix} ]; then
        echo "Invlaid suffix: ${suffix}"
        return 1
    fi

    local lower_suffix=$(echo "${suffix}" | awk '{print tolower($0)}')
    for img in $(find ./ -iname "*.${suffix}"); do
        if [ ${lower_suffix} = "gif" ]; then
            gif2webp -v -q 100 ${img} -o ${img%.*}.webp
        elif [ ${lower_suffix} = "png" ] || [ ${lower_suffix} = "jpg" ] || [ ${lower_suffix} = "jpeg" ]; then
            cwebp -v -progress -q 100 ${img} -o ${img%.*}.webp
        else
            echo "${img} not supported"
        fi
    done

}

3. 参考文档

WebP

WebP Wikipedia

探究WebP一些事儿