22.7.3 的更新：七牛云的坑

昨天更新了 Safari，一看版本 15.0，想起来 Safari 14.0 就已经兼容 webp了。到目前为止，Chrome、Safari、Egde、Firefox、微信/QQ 内置 webview 等主流浏览器都兼容 webp 有一段时间了。

那么，是时候全站使用 webp 了。

另外值得注意的是，gif 也可以转为 webp 格式，所以替换图片链接后缀也是极为方便的，全部转为 webp 即可。

1.方案

其实七牛云自带图片处理的服务（阿里云腾讯云又拍云都支持），还免费，只需配置图片样式即可。但既然打算使用 webp，自然想一步到位，用 webp 储存和分发。

（1）下载所有图床所有图片

• 还好只有 400+，使用七牛云自带的客户端，可以按路径批量下载，很方便。

（2）批量转 webp

• 之前存储的时候也比较杂，文件后缀各种都有，png、PNG、jpg、JPG、jpeg、JPEG、gif、GIF，自己写了一个 shell 脚本，有需要自取。

• 使用脚本之前，需要安装 cwebp、gifwebp 等命令。

• 【注意使用路径】比如需要将 post 文件夹中的所有图片转为 webp 格式，则只需将脚本文件拷贝到 post 文件夹内，./towebp.sh 即可，无需增加参数。

• -q 表示质量，这里使用 90% 的质量，一般来说，80% 质量肉眼基本看不出来。

#! /bin/sh

for FILE in $(ls); do
    FILENAME=$(echo $FILE | cut -d . -f1)
    SAVE=${FILENAME}.webp
    case $FILE in
        *.jpg|*.JPG)
            cwebp -q 90 $FILE -o $SAVE;;
        *.png|*.PNG)
            cwebp -q 90 $FILE -o $SAVE;;
        *.jpeg|*.JPEG) 
            cwebp -q 90 $FILE -o $SAVE;;
        *.gif|*.GIF)
            gif2webp -q 90 $FILE -o $SAVE;;
    esac
done

（3）批量上传

• 使用七牛云客户端，即可上传整个文件夹了。

（4）替换文中的图片链接

• 推荐使用 VSCode 替换字符串，或者 notepad++ 也可以。
• 查找时，开启正则表达式选项，png|PNG|jpg|JPG|jpeg|JPEG|gif|GIF，就可以安心替换了，一步到位。

2.遇到的问题

（1）七牛云客户端批量下载慢

• 不是批量下载慢，是当客户端失去焦点时，就下载速度慢，所以一定要放前台下载。

（2）下载 webp 不包含 gif2webp、vwebp

• mac 使用 brew install webp 即可安装官方的转换脚本，但是 brew 安装的并不包含 gif2webp、vwebp 等命令。

• 可以通过链接下载，👉 webp 的下载链接 ，再将其放入 bin 目录就行。

（3）替换后，无法正确显示图片。

• 我替换之后就直接显示这样，全变成 404-error 了，甚至看起来还有点搞笑。
• 【解决】清除浏览器缓存 + 刷新 CDN 缓存。

3.未解决的问题

我是使用 uPic 进行图片上传的，（优秀 App，推荐），所以现在上传之前，如果原图是 png、jpg，需要手动的先转为 webp，目前还没什么简便的方案。

• 上传前，uPic 自动转为 webp；
• 上传到七牛云，七牛云帮忙转为 webp 存储；

4.更新

4.1 工具

好用的图片转换/压缩工具：squoosh.app

4.2七牛云的坑

我使用了七牛云提供的文字样式服务，会给图片自动添加水印。目前发现的问题是：webp 格式图片，添加水印后大小会暴增 5倍，而其他的格式并不会这样。

全站 webp 本来是为了更小的大小，更快的加载，没想到现在竟然在开倒车。目前已提工单，不知道后续会不会优化这个令人震惊的问题。

（终于知道为什么 CDN 费用翻倍了，卒）

PS：可以使用有的推广链接：https://s.qiniu.com/EnErYb