老麦麦大爷

V1

2022/12/27阅读:16主题:姹紫

Hugo 网站优化(5): 穷的还剩 8 分钱, 看我怎么节约成本


title: "Hugo 网站优化(5): 穷的还剩 8 分钱, 看我怎么节约成本" subtitle: Hugo Image Compress categories:

  • blog tags:
  • hugo
  • cdn date: "2022-12-27T16:15:12+08:00" lastmod: "2022-12-27T16:15:12+08:00" toc: true draft: false hiddenFromHomePage: false

Hugo 网站优化(5): 穷的还剩 8 分钱, 看我怎么节约成本

大家好, 我是老麦 欢迎 关注公众号 maitalking订阅网站 https://tangx.in/ 。 第一时间看后续精彩文章。觉得好的话,请猛击文章右下角「在看」,感谢支持。

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

qcloud-balance
qcloud-balance

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

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

pngquant 压缩工具

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

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

pngquant-compress-result
pngquant-compress-result

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

图片引用

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

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

  1. 压缩: 很简单, 执行简单命令即可
# 压缩
find ./ -type f -name "*.png" -not -name "*-fs8.png" |xargs pngquant -f
  1. 图片地址渲染: 在 render-image.html 中, 添加了图片是否为 .png 结尾判断, 如果是则替换为新后缀。

核心代码逻辑如下

<!-- 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 }}
  1. 当然, 为了可以自定义压缩图片的后缀, 我在 config.toml 配置文件中新增了控制变量。
# config.toml
[params.image_handler]
    # 是否替换为压缩图片
    compress_png_suffix = "-fs8.png"

运行后效果如下

blog-png-name-suffix
blog-png-name-suffix

效果很理想。

分类:

后端

标签:

后端

作者介绍

老麦麦大爷
V1