返回作品集
图片宽高随文件写入，列表滚动时不会因为加载而跳动
工具 维护中 2025
图片压缩流水线
给站点图片做统一压缩与响应式输出的本地脚本：WebP 优先、按宽出多档、宽高随图写入，构建前自动跑。
角色：自用工具 技术栈：Node.js · Sharp · PowerShell
- 单图体积
- ≤ 60 KB
- 输出档位
- 3
- 布局位移
- 0
背景
每次往文章里塞一张截图，都要手动改尺寸、转格式、算宽高比，既慢又容易忘。
做法
- 输入的原始截图放到
_tmp/img/，脚本按 640 / 1280 / 1920 三档输出 WebP。 - 生成时同步写入宽高，前端用
width/height占位，避免图片加载导致的布局跳动。 - 发布前在 CI 与本地各跑一次，超过 200 KB 的产物直接报警。
踩坑记录
- 透明底 PNG 会带着「半透明黑」：一张角色立绘的角落是
(0,0,0,153)，按纯黑键出会把深色外套一起抠掉，容差只能压到 26 左右再人工确认。 - 缩略图不能只缩一次：1280 的图在 390px 设备上仍然白下载 40 KB，最后还是出了三档，让浏览器自己挑。
结果
站点图片基本都在 60 KB 以内，落地页几乎没有因为图片产生的位移，CLS 长期稳定在 0。
截图