全站 webp 最佳实践

本文最后更新于:3 天前

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

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

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

一、方案

其实七牛云自带图片处理的服务(阿里云腾讯云又拍云都支持),还免费,只需配置图片样式即可。但既然打算使用 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% 质量肉眼基本看不出来。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#! /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,就可以安心替换了,一步到位。

二、遇到的问题

(1)七牛云客户端批量下载慢
  • 不是批量下载慢,是当客户端失去焦点时,就下载速度慢,所以一定要放前台下载。
(2)下载 webp 不包含 gif2webp、vwebp
  • mac 使用 brew install webp 即可安装官方的转换脚本,但是 brew 安装的并不包含 gif2webp、vwebp 等命令。

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

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

三、未解决的问题

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

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

本博客所有文章均个人原创,除特别声明外均采用 CC BY-SA 4.0协议,转载请注明出处!