灵感来自https://www.v2ex.com/t/648915

WebP 的有损压缩算法是基于 VP8 视频格式的帧内编码[17],并以 RIFF 作为容器格式。[2] 因此,它是一个具有八位色彩深度和以 1:2 的比例进行色度子采样的亮度-色度模型( YCbCr 4:2:0 )的基于块的转换方案。[18] 不含内容的情况下,RIFF 容器要求只需 20 字节的开销,依然能保存额外的 元数据(metadata)。[2] WebP 图像的边长限制为 16383 像素。

简单来说,WebP 图片格式的存在,让我们在 WebP 上展示的图片体积可以有较大幅度的缩小,也就带来了加载性能的提升。

在 Cloudflare 中,Pro 用户可以使用到一个功能——Polish,功能描述如下:

如果选择了 Serve WebP Image 的话,通过 Cloudflare 的图片请求会被无缝地转换为 WebP 格式输出,同时请求头部中,会多一个名为 cf-polished 的 Header,用来 debug 转换情况。有兴趣的读者可以看一下 Cloudflare 的博文「Using Cloudflare Polish to compress images」来了解更多相关信息。


于是乎我实现了一个基于Caddy2的webp转换插件,能做到不影响现有部署的内容,不修改(甚至不改变用户获取的url)的前提下将所有图片转换为webp格式。

https://github.com/zhshch2002/caddy-webp

参考了 https://github.com/webp-sh/webp_server_go 的代码,包括对 Safari 的处理。

最重要的一点是——我们访问的 URL 可以完全不用改变,访客访问的依然是 https://image.nova.moe/tsuki/tsuki.jpg ,但是得到的图片格式为:image/webp,而且体积减少了不少。

让站点图片加载速度更快 | 无感Webp自动转换Caddy插件

这一点也实现了,只需要在 Caddyfile 里加一个webp指令,就可以截取root下的文件来自动转换。(如果把顺序提升到 proxy 之前,是不是也可处理以反代后端相应的图片,待会试试)

本质上插件是截取的正常 Handler 的响应,识别 content type,然后换成 webp,大功告成!

by the way,这只是个实验性的插件,没有特别完善

最后修改:2020 年 03 月 30 日 03 : 47 PM