PNG 元数据与色彩配置出错会让前端与运营各解各图。面向设计师、前端、运营物料,用表格说清何时剥离、何时保留标准色域嵌入,区分无损重压缩、仅清元数据与调色板有损,附远程苹果芯片批处理命令骨架与体积透明跨屏阈值。
① 痛点
- 体积隐私:扩展块里拍摄信息、地理位置、软件版本涨体积触合规。
- 色彩分叉:剥离与未剥离混目录时浏览器解释不一易偏色。
- 无损名实不符:调色板量化动像素与半透明,须与真无损书面分家。
导出先对齐色域验收清单。
② 色彩配置策略表
| 场景 | 建议 | 备注 |
|---|---|---|
| 网页小程序界面切图、设计令牌素材 | 保留嵌入标准色域描述并与前端约定解释 | 剥离须全项目同步加载策略 |
| 游戏纹理、原生内嵌包 | 按引擎管线剥离或统一色彩管理 | 技术设计写死避免扯皮 |
| 电商白底、活动头图极致体积 | 整站锁定标准色域后可剥离并跨端抽样 | 配合白底批量质检 |
原则:剥离是产品决策;变更须同步前端、运营规范与质检脚本。法务母版另库保留完整元数据。
③ 工具路线对照
oxipng类为无损重打包;pngquant类为调色板有损,对应下表第三行。
| 路线 | 像素不变 | 体积从哪来 | 适用 |
|---|---|---|---|
| 仅清元数据与辅助块 | 是 | 删扩展文本、缩略图、冗余块 | 脱敏、低风险上线包 |
| 无损重压缩 | 是 | 更优策略与块排列、不改采样 | 图标与精修切图、需像素签字 |
| 调色板有损 | 否 | 减色、半透明易损 | 仅预览或远距离位图 |
④ 参数与命令模板
远程只读配置:追体积多轮滤波;追速度单次默认出报表;剥辅助数据须无损前后各清并比对像素。
- 无损一批:
find ./dist_png -name '*.png' -print0 | xargs -0 你的无损命令 -o4 --strip safe - 有损仅预览目录:
find ./preview_only -name '*.png' -print0 | xargs -0 你的量化命令 --quality 75-85 - 体积排序:
find ./dist_png -name '*.png' -exec stat -f '%z %N' {} \; | sort -n
⑤ 远程批处理步骤
- 冻结文档:嵌入或剥离、目录树、有损目录隔离规则写进交付说明。
- 只读进可写出:源卷只读、输出新目录便于回滚。
- 黄金集:十张渐变细线半透明,前后像素对比加跨屏看。
- 全量流水线:夜间错峰可参考远程批量与夜间任务。
- 清单 manifest:路径、宽高、字节、是否透明、策略版本号。
- 联签:三方抽检,异常重跑。帮助中心看接入。
⑥ 验收阈值
| 维度 | 阈值思路 | 要点 |
|---|---|---|
| 体积 | 同品类较基线无损常降约百分之五至二十五;体积翻倍须拦 | 按排序抓离群值 |
| 透明 | 透明区无杂色、深浅底边缘可接受 | 脚本透明统计阈值一并开 |
| 跨屏抽样 | 每批不少于百分之三且至少二十张,含主色与细线 | 浅深网页底对照色彩清单 |
可引用:目录绑色彩策略版本;保留工具小版本与命令行;抽样不低于上表。