type
Post
status
Published
date
Feb 6, 2026
slug
webstack-2
summary
仅供列表展示、文章无内容，仅供列表展示、文章无内容，仅供列表展示、文章无内容。
tags
开发
建站
category
技术分享
icon
password
前情提要：在[上一集]里，我搭建了 WebStack 的架子，但为了填充内容，我搞了一堆乱七八糟的图标。现在的logos文件夹简直就是个万国博览会：有 2MB 的高清 PNG，有古老的 ICO，甚至还有不知道哪来的 BMP...
看着项目体积越来越大，每次部署 GitHub Pages 都要卡半天，我的强迫症彻底发作了。
一个导航站的图标，显示尺寸撑死也就 64x64，我存一张 2000x2000 的高清大图在本地是为了当传家宝吗？
不行，必须给项目“抽脂”！
我的目标很明确：统一格式、极致压缩、自动化处理。
🎯 选型：为什么是 WebP？
在图片格式界，JPG 不支持透明，PNG 体积太大，SVG 兼容性有时候闹脾气。
只有 WebP 才是永远的神：
- 体积极小：同画质下，比 PNG 小 40%-80%。
- 支持透明：完美适配导航站的卡片设计。
- 加载极快：对于包含几百张图片的网页，这能极大减少带宽压力。
🐍 编写“降维打击”脚本
手洗几百张图？那是不可能的。
我祭出了 Python 的
Pillow 库，写了一个批处理脚本。它的工作流程极其残暴：- 遍历：扫描
static/assets/images/logos下的所有图片。
- 重塑：不管你原来是圆的扁的、jpg 还是 png，统统读进来。
- 压缩：统一调整尺寸（比如限制在 128px 以内），并转换为 WebP 格式。
- 替换：修改
webstack.yml配置文件，把原来的xxx.png引用全改成xxx.webp。
- 清理：删掉原来的旧图。
核心代码展示
(这是我折腾一下午的成果，建议全文背诵)
Python
📉 效果：这是减肥？这是截肢！
脚本跑完的那一刻，我甚至怀疑它是不是把文件都删光了。
看一眼属性：
- 处理前：文件夹总大小 24 MB（有很多没压缩的截图）。
- 处理后：文件夹总大小 1.2 MB。
- 瘦身幅度：95% ！！
打开网页，以前加载时图标是一个个“蹦”出来的，现在是一瞬间全屏刷出。
而且因为文件名统一了（全是
.webp），治好了我的强迫症。webstack.yml 看起来整整齐齐：YAML
🤔 既然这么爽，为什么还需要 Part 3？
虽然本地 WebP 化极其舒适，但我发现了一个新的问题：
我变懒了。
以后我每加一个新网站，难道都要：
- 下载图标
- 运行 Python 脚本转 WebP
- 上传到 GitHub
- 等待部署？
这一套流程太繁琐了！Geek 的终极目标是不干活。
能不能有一种方案，既不用我手动下载转格式，又能保持 WebP 的高速度，甚至不需要我存本地文件？
下集预告：
我决定把这套逻辑搬到云端。下一篇，我们将挑战 Cloudflare Workers，让 CF 的服务器变成我的“自动图标转换工厂”，实现真正的填个链接就自动有图！
(未完待续)
- 作者:Leisurelywolf
- 链接:https://blog.869669.xyz//technology/webstack-2
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。
相关文章
