个人网站无缝切换图片到webp

咱都知道，webp是一种非常优秀的图片格式，相比较png/jpg，webp的图片体积要小，图像质量却基本没有什么下降。网站如果使用webp，那么自然也会减少图片文件的加载时间。

大部分发行版里都应该有个工具叫做cwebp，咱可以用cwebp转换下看下具体效果

~/Downloads/test cwebp yui.png -q 80 -o result.webp
# 省略若干提示信息
~/Downloads/test ls -lh
total 8160
-rw-r--r-- 1 benny staff 335K Mar 1 20:06 result.webp
-rw-r--r--@ 1 benny staff 3.7M May 2 2019 yui.png

新文件大概是原来的8%左右，是不是很优秀！

但是如果一个一个转……聪明的你可能想要写个脚本递归转换，然后还要相应的修改数据库什么的，这样可是有点麻烦呢。那么有没有什么直接的方式呢？这就好像是，开飞机没油了，只能找个机场落地加油，然后再起飞。能不能像下面这张图这样子?？

这种技术呢，叫做空中加油。你看，咱都不用落地就能加油。On-the-fly哦

那么我们的……答案当然是有的啦??那就是本文的重点，这个工具就是由Nova童鞋、muzi、cocoa以及Benny小盆友一起鼓捣的webp_server_go啦！

不如先看看这里吧??

https://webp.sh/#/ 

放心，从caniuse的统计来看，主流浏览器都支持webp了，如果遇到Safari这样的奇葩，咱直接返回了原图

使用方法

使用方法很简单哦，从这里下载binary（或者自己build也行，deb和rpm也会稍后提供），创建如下json配置文件

{
"HOST": "127.0.0.1",
"PORT": "3333",
"QUALITY": "80",
"IMG_PATH": "/path/to/pics",
"ALLOWED_TYPES": ["jpg","png","jpeg"]
}

每一个配置项都很容易懂懂吧！如果不需要监听公网，那HOST就写127，藏在nginx后面。ALLOWED_TYPES是转换的图片类型，实际上目前最多用的也就是jpg和png了，暂时还未添加对bmp对支持。

我用WordPress，那么IMG_PATH就可以写/var/www/html这种，不用写到wp-content/uploads哦。

然后

./webp-server -config /path/to/config.json

Ok! 你的3333端口已经被我接管了。接下来配置下nginx什么的，比如WordPress可以这么配置，在server段中哦

location ^~ /wp-content/uploads/ {
    proxy_pass http://127.0.0.1:3333;
}

然后就可以起飞啦！

哦对了，不用担心，一张图片只会被转换一次，除非原图片变了，才会重新转换。

持久运行

都知道，session和shell是绑定的，所以总不能一直开着终端吧？那么简单的话，我们可以用screen来解决这个问题

screen -S webp
./webp-server --config /path/to/config.json

甚至我们可以使用systemd

cp init/webps.service /lib/systemd/system/
systemctl daemon-reload
systemctl enable webps.service
systemctl start webps.service

预缓存功能

咱可能是有很多图片的，如果收到请求的时候去转换，那么其实会慢的，那怎么办！

./webp-server --prefetch，这样就会帮你预先转换图片哦！到时候请求来了直接返回，经济方便又实惠。

批量转换进行中

臣妾无法转换php文件为webp呀?️

转换时，你的CPU处于被支配的痛苦中……

使用效果图

benchmark

用老婆照片做benchmark

179张，各式各样的壁纸

这个是原图

这个是转换之后的大小，大概只有原来的13%

1-4M

（感谢muzi提供的图片）

压缩比为9.3%

4-32M

压缩比为6.7%

500K-1M

14.68%

500K

23.3%

手机拍摄的人像

小部分是Pixel 3拍摄的，剩下是其他手机/相机拍摄的人像。

16%

所以基本上，大概图片大小会变为原来的20%左右。

嗯哼？

欢迎star、fork！欢迎提出建议，功能优化等等，不过建议使用英文哦！

相关链接

开源地址： https://github.com/webp-sh/webp_server_go
官方网站：https://webp.sh/

参考阅读

让站点图片加载速度更快——引入 WebP Server 无缝转换图片为 WebP ??‍♂️

WebP Server in Rust、记 Golang 下遇到的一回「毫无由头」的内存更改