Hugo 网站优化(5)： 穷的还剩 8 分钱， 还是再压缩一下图片节约流量吧

大家好， 我是老麦 欢迎 关注公众号 Go与云原生 或 订阅网站 https://tangx.in/ 第一时间看后续精彩文章。 觉得好的话，请猛击文章右下角「在看」 一键三连， 是对我的最大支持。

我很穷， 穷的来只剩账户只有 8 分钱了。

所以我每天都在想怎么能继续降低成本， 毕竟我的 CDN 只有 10G 免费流量。

这次我狙击的目标是 图片。 由于 MacBook 的高分辨率， 截图的大小还真挺费流量的。 然后我用的截图工具并不支持 压缩并保存， 习惯了快捷键并不想换新的。

pngquant 压缩工具

天无绝人之路， 所幸在 google的 pagespeed tools 中提供了图片的优化建议 中找到了一个 pngquant 压缩工具。

经过测试， 图片默认参数压缩率在 50% - 70% 左右， 效果拔群。

可惜的是， 没有找到命令参数覆盖原文件。

图片引用

为了保证我的写作不被图片压缩打断， 也就是不需要单独去执行压缩操作， 同时也保留了原始图像的高分辨率。

我修改 Github Action 和 图片地址渲染， 在编译过程中， 完成 压缩工作 。

1. 压缩： 很简单， 执行简单命令即可

1
2

# 压缩
find ./ -type f -name "*.png" -not -name "*-fs8.png" |xargs pngquant -f

2. 图片地址渲染： 在 render-image.html 中， 添加了图片是否为 .png 结尾判断， 如果是则替换为新后缀。

核心代码逻辑如下

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<!-- render-image.html -->

    <!-- 4. 图片压缩后缀 -->
    {{ if $image_handler.compress_png_suffix }}
        {{ if not (hasPrefix $img_destination "http") }}
            {{ if (strings.HasSuffix $img_destination ".png") }}
                {{ $img_destination = (replace $img_destination ".png" $image_handler.compress_png_suffix) }}
            {{ end }}
        {{ end }}
    {{ end }}

3. 当然， 为了可以自定义压缩图片的后缀， 我在 config.toml 配置文件中新增了控制变量。

1
2
3
4

# config.toml
[params.image_handler]
    # 是否替换为压缩图片
    compress_png_suffix = "-fs8.png"

运行后效果如下

效果很理想。