主题加载优化：把背景图体积压下来
2026-10-03
Codex 主题加载优化，本质上是个背景图问题。theme.json 是一份几 KB 的文本，背景图通常是它的四十到两百倍。如果你打开 Codex 之后界面先出来、壁纸慢半拍才浮现，或者拖动窗口时背景有一下迟滞，要改的几乎一定是那张图，而不是主题本身。
Codex Skin Studio 通过本机 CDP 在运行时注入主题，不写入官方安装目录，所以加载快慢跟官方文件无关，只跟你塞进主题包的东西有关。这条约束反而让优化变得好判断：变量就两个，格式和体积。
体积都花在哪了
把主题包拆开称一下，结论很直观。CSS 和 theme.json 是文本，浏览器解析几乎不花时间；背景图是二进制，体积和解码时间一起涨。
- theme.json：2 到 8 KB，解析瞬间完成
- 2560×1440 的 JPEG 壁纸：1.5 到 4 MB
- 1920×1080 的 WebP，质量 80：150 到 400 KB
- 1920×1080 的 AVIF：90 到 250 KB
- 同一张图存成 PNG：通常比 JPEG 大 3 到 6 倍，而且没有画质收益
背景图压缩：先改这四件事
压缩不是把质量滑块往左拉到底。按顺序做这四步，每一步的收益都比上一步小，所以停在第三步通常就够了。
- 裁到实际显示尺寸：多数显示器是 1920×1080 或 2560×1440，存一张 4K 的图只是让解码器白干活
- 换格式：JPEG 换 WebP，同等观感下体积通常掉六到七成；能接受编码慢一点就换 AVIF
- 质量定在 78 到 82：这个区间以下，渐变会开始出带状；以上，肉眼看不出差别
- 清掉元数据：拍摄信息、色彩配置和缩略图可能占掉几十 KB
还有一步比上面四步都省：如果背景只是渐变或者单色加噪点，别用图片。CSS 渐变是几十字节的文本，加载时间等于零，而且在任何分辨率下都不会糊。
一份能照着做的体积预算
给团队或个人定一个数，比每次凭感觉判断省事。下面这组数值在暗色和亮色主题上都适用。
- 单张壁纸目标：400 KB 以内
- 单张壁纸上限：1 MB，超过就该回到上一步重压
- theme.json 与 CSS：不用管，几十 KB 以内都是正常的
- 整个主题包：控制在 500 KB 以内
- 多显示器各用一张壁纸时：总量按上面数字乘以屏幕数，但每张仍要单独达标
压缩会牺牲掉什么
压得过头会在三个地方露出来。渐变区域出现色带，尤其是大面积的天空或光晕；暗部出现块状噪点，深色主题最容易中招；以及文字可读性下降——壁纸变糊反而让上面的字更难读，而这不是画质问题，是对比度问题。
判断方法很土但有效：把压好的图设成壁纸，打开一个同时有代码、注释和长段落的窗口，在正常亮度下读三十秒。眼睛累就往回加质量。主观感受在这个环节比数值可靠。
上线前过一遍
- 用真实显示尺寸导出，不要直接存原图
- 格式为 WebP 或 AVIF，不要留 PNG
- 在最低亮度下看一次暗部，确认没有块状噪点
- 确认壁纸上的文字仍然达到 4.5:1 对比度
- 换台机器冷启动一次，看壁纸是否和界面同时出现
常见问题
背景图压到 400 KB 以内，画质会明显下降吗？
在 1920×1080 或 2560×1440 下基本看不出。壁纸是衬在界面底下的，观看距离和叠加的文字都掩盖了细节损失；真正会露馅的是大面积纯渐变，那种情况建议改用 CSS 渐变而不是压图。
背景图该用 WebP 还是 AVIF？
WebP 兼容性更好、编码更快，够用。AVIF 在同一观感下还能再小三到四成，但编码时间明显更长，适合一次压好长期不动的壁纸。
主题加载慢会不会是 CDP 注入本身的问题？
不会。注入走的是本机 localhost 连接，传的是几 KB 的 CSS，耗时在毫秒级。冷启动时能感觉到的延迟几乎全部来自图片解码。
多显示器要各配一张壁纸吗？
可以，但要按屏幕实际分辨率分别导出，而不是把一张图拉伸到两块屏。每张单独遵守 400 KB 的目标，总量自然可控。
主题加载优化不需要改工具，只要换个导出习惯：按屏幕尺寸导出、用 WebP、质量定在 80 左右。做一次，之后每次换壁纸都照这个流程走。