独立游戏开发效率4 分钟阅读

无损 WebP 也会变像素?验证全透明区域的 RGB

用两次 cwebp 导出区分透明度和隐藏 RGB,决定无损 WebP 能否代替交付用 PNG。

无损 WebP 也会变像素?验证全透明区域的 RGB
半透明宝石边缘的放大切面展示完全透明像素中的隐藏颜色
概念示意图

同一张 PNG 转成无损 WebP,普通预览完全一样,逐像素比对却报错。先把差异按 alpha 分组:完全透明的像素可以携带 RGB,预览看不到这些颜色,但某些后续处理会检查或修改它们。本文只讨论静态 RGBA 素材及 libwebp 的 cwebp 选项。

制作一张保留隐藏颜色的测试图

建立一张小的 RGBA PNG:放一个不透明蓝像素、一个半透明青像素,以及两个完全透明但分别含红色和绿色 RGB 的像素。用能读原始 RGBA 的工具先检查 PNG,因为有的编辑器在导出时已经清空隐藏颜色。直接在棋盘格上看不出这两个像素有什么不同。

从同一张 PNG 导出两次

cwebp -lossless fixture.png -o normal.webp
cwebp -lossless -exact fixture.png -o exact.webp

解码成未预乘的 RGBA 后逐像素对比,记录差异是否只在 alpha=0 的 RGB。默认无损编码允许改写这些不可见颜色,具体哪几个像素变化不能预先保证;加 -exact 用来保留它们。不要用浏览器画布显示或截图代替原始数据比对,因为预乘与反预乘会使零 alpha 下的颜色不可恢复。

按素材用途验收

直接用于展示的静态图片,先用 Tooliva 资源压缩工具 比较体积与浅色、深色背景下的边缘;这里不假设网页工具提供 -exact 选项。进入素材加工链、像素哈希校验或会重新设定 alpha 的源文件,则额外检查隐藏 RGB。需要位级一致时保留原 PNG,或在目标编码器与解码器上通过完整 RGBA 对照后再替换。不要把文件体积、预览一致和通道数据一致当作同一个结果。

准备好实践「无损 WebP 也会变像素?验证全透明区域的 RGB」了吗?

使用本站在线工具,将教程中的步骤立刻应用到你的独立游戏项目。