Hugo 网站优化(5): 账户只剩 8 分钱, 压缩一下图片还能再省一点
网站 优化 图片 压缩 账户 一下 一点 hugo
2023-06-13 09:17:20 时间
Hugo 网站优化(5):账户只剩 8 分钱, 压缩一下图片还能再省一点
大家好, 我是老麦 欢迎 关注公众号
maitalking
或 订阅网站https://tangx.in/
。第一时间看后续精彩文章。觉得好的话,请猛击文章右下角「在看」,感谢支持。
我很穷, 穷的来只剩账户只有 8 分钱了。
qcloud-balance
所以我每天都在想怎么能继续降低成本, 毕竟我的 CDN 只有 10G 免费流量。
这次我狙击的目标是 图片。由于 MacBook 的高分辨率, 截图的大小还真挺费流量的。然后我用的截图工具并不支持 压缩并保存, 习惯了快捷键并不想换新的。
pngquant
压缩工具
天无绝人之路, 所幸在 google的 pagespeed tools 中提供了图片的优化建议 中找到了一个 pngquant
压缩工具。
经过测试, 图片默认参数压缩率在 50% - 70%
左右, 效果拔群。
pngquant-compress-result
可惜的是, 没有找到命令参数覆盖原文件。
图片引用
为了保证我的写作不被图片压缩打断, 也就是不需要单独去执行压缩操作, 同时也保留了原始图像的高分辨率。
我修改 Github Action 和 图片地址渲染, 在编译过程中, 完成 压缩工作 。
- 压缩:很简单, 执行简单命令即可
# 压缩
find ./ -type f -name "*.png" -not -name "*-fs8.png" |xargs pngquant -f
- 图片地址渲染:在
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 }}
- 当然, 为了可以自定义压缩图片的后缀, 我在
config.toml
配置文件中新增了控制变量。
# config.toml
[params.image_handler]
# 是否替换为压缩图片
compress_png_suffix = "-fs8.png"
运行后效果如下
blog-png-name-suffix
效果很理想。
相关文章
- 【说站】WordPress网站文章ID不连续如何解决?
- 虚拟主机绑定多个网站htaccess写法
- java英文参考文献最新_外文文献网站
- 优化企业网站不能仅靠SEO
- 使用dropbox同步备份网站和数据库
- 客服系统即时通讯IM开发(一)基于WebSocket实现实时获取消息【唯一客服】网站在线客服系统
- Wordpress网站加载速度优化
- 网站完整的 SEO 优化方案 ?
- Hugo 网站优化(3): 我用 dnspod 给网站实现了全球加速
- [网站优化]低配置服务器nginx性能调整设置
- 【SEO优化】分析为什么网站优化一年比一年难做的10个原因
- 使用 BIGDUMP 对网站数据进行迁移日志
- Nginx网站架构实战从入门到掌握
- windows配置Apache+PHP+MySQL动态网站环境
- Linux服务器性能优化,让你的网站飞快启动!(linux服务器性能优化)
- windows配置Apache+PHP+MySQL动态网站环境
- 优化网站性能表数据缓冲到Redis中(表数据缓冲到redis)
- 使用Redis优化网站性能修改缓存路径(redis 缓存路径修改)
- 利用Redis加速网站性能优化(redis缓存 格式)
- 专访 HackerOne COO 王宁:尊重规则是漏洞平台成功的秘诀,欢迎更多成人网站进驻 | 宅客
- PHP网站基础优化方法小结
- 用PHP制作静态网站的模板框架(四)
- Asp.Net网站优化系列之数据库的优化措施与索引优化方法
- Asp.Net网站优化系列之数据库优化分字诀上分库
- 部分网站允许空白referer的防盗链图片的js破解代码
- Nginx中禁止使用IP访问网站的配置实例