megrxu

使用 CDN 分发静态博客中的图片

Aug 15, 2021  「Web」  
由于在图片较多时,编译时间非常久,本页面内容已经失效。目前使用的方案是 Imagio

博客中的数据一般分为文本数据和二进制数据两种。在静态博客盛行的当下,使用 CI,即持续集成(Continuous Integration),来从 Git 仓库构建 HTML 文件是一个非常常用的选择。然而这也要求要么使用图床等技术,要么必须将图片等二进制数据也存储在同样的仓库中。

曾经因为并不信任图床的稳定性,以及毕竟数据会持有在别人手中,我将图片存储在同一个仓库中。然而图片越积越多,导致仓库体积不断变大。并且由于 EXIF 信息泄露等问题,直接在博客中使用未经处理的图片也有一些隐患。同时,为了图片的高分辨率和图片质量,也不断在牺牲访问速度。

使用 Hugo 来进行图像处理

Hugo 静态博客生成器很早就支持了图像处理这个功能,能够对图片进行裁剪,转换大小,高斯模糊等一系列操作,配合一些 JS 库更能做到非常好的 Lazy Load 体验。

使用 v0.80 版本的 Hugo 中新的 Overlay Filter,更能为图片添加水印,非常方便。

从另一个仓库收集图片链接

我并不是很喜欢将这个图片链接的处理交给 JS 完成,同时为了完成二进制数据和文本数据的分离,我也将图片存储在了另一个仓库中,就要求原始仓库有能力获取到处理后图片的链接。

这一点可以通过 Hugo 的 getJSON 函数和 Hugo 本身的页面模板来完成。在图片仓库编写 JSON 模板,生成处理后的图片和 JSON 索引文件,在文本仓库通过 getJSON 函数获取索引,并索引相应图片的链接,即可在编译 HTML 时得到不同分辨率以及不同类型的图片的链接,并嵌入到页面中。

使用 Cloudflare Pages

最后,将图片这个仓库使用 Cloudflare Pages 进行构建,直接部署到对应的 Cloudflare CDN 上,就可以使用 CDN 进行加速了。

效果

例如,这个链接 指向一个有水印并且 4096x 的照片,而这个链接 指向一个无水印的 1024x 的照片。