一个反复出现的求助截图场景几乎每次都一样手里一个带透明背景的 Logo 或者图标PNG 格式在网页/文档里显示正常。为了塞进某个只收 JPG 的系统表单上传、打印店、老旧的 CMS转了一下。结果两种结局透明区变成了黑底或者白底原本浮在背景上的图形被一圈硬色块框住边缘发毛细线条变粗、文字像糊了一层放大看还有一圈浅灰色的回声。这两个现象是完全不相关的两个原因造成的但经常同时出现所以容易被当成一个问题。分开看就清楚了。原因一JPG 根本没有透明这个概念JPGJPEG的像素结构里只有三个通道Y、Cb、Cr全部都是描述颜色的没有任何位置存放这个像素有多不透明。而 PNG 有 alpha 通道。所以当转换器面对一张带透明区的 PNG 时它必须做一个决定这些没有颜色的像素到底该填成什么颜色这个决定不是转换器发现的是它编出来的。不同工具的默认值不一样有的填白色有的填黑色有的填灰色有的干脆保留 RGB 值但丢弃 alpha结果是原图透明区原本的隐藏颜色暴露出来——这一种最阴险因为预览时你看到的可能是随机杂色这就是为什么同一个 PNG 用两个工具转出来不一样。正确做法转换前显式合成底色不要依赖默认值。转换之前先主动把透明区拍平flatten到目标底色上目标是浅色背景白纸、白色网页→ 填白目标是深色背景深色主题、黑色展板→ 填深灰或黑但注意别填成和图形线条一样的颜色会把图形吃掉目标背景未知→ 这不叫还没决定这叫不该转 JPG请保留 PNG第三种情况值得强调很多人的 Logo 是白色线条 透明底用在深色页面上。转 JPG 时若填白底白线白底直接隐身若填黑底深色页面上又多出一个黑方块。这种图形从根本上就不适合 JPG。原因二锐利边缘遇到有损压缩第二个问题是画质和透明无关。JPG 用 DCT离散余弦变换把图像切成 8×8 的小块用频率成分表示。它的假设是图像内容是平滑连续的——这对照片完全成立对文字、线稿、Logo 完全不成立。当画面里出现高频的锐利边缘黑色线条压在白色背景上时DCT 无法用有限的系数精确表达这种突变只能尽力逼近。逼近的代价就是在边缘两侧产生一圈振荡行话叫振铃效应ringing肉眼看到的就是发毛和回声。质量参数越低能用的系数越少振铃越明显。经验值是质量 90 以上文字边缘基本看不出问题体积也还能接受质量 80–85细文字开始发虚5px 以下的字号明显受影响质量 80 以下文字糊成一团不建议用于任何含文字的图还有一个很多人不知道的因素色度抽样chroma subsampling。JPG 默认常用4:2:0意思是亮度通道保留全部信息两个色度通道各砍掉一半分辨率。对照片没影响人眼对色度分辨率不敏感但对彩色小字是灾难——例如红底白字、蓝色按钮上的文字边缘会出现彩色镶边。需要处理含文字的图时把抽样改成4:4:4不抽样画质会有肉眼可见的提升。顺带一个意外因素转换器的自作聪明除了上面两个根本原因还有一些工具会额外动手脚重新采样输出尺寸和原图不一致等于做了一次缩放锐利边缘先被插值模糊一遍再压缩。自动色彩转换把带 ICC 配置的图强制转到 sRGB处理不当会整体发灰。元数据处理有的工具会顺手丢掉 EXIF有的会保留——后者可能把原图里的定位信息一起带出去。这些都不是转换这个动作必需的属于工具的实现选择。用之前先确认它会不会改尺寸、会不会处理色彩。转换后必看的三个位置转换完成别只看整体。放大到 100% 看这三个地方问题基本都会暴露原来的透明区颜色对不对有没有硬边最细的文字或线条有没有发虚、有没有彩色镶边渐变区域有没有出现色带banding这是低质量压缩的典型症状。批量场景底色必须提前指定如果是一批图一起转默认底色就不是一个可以随便的值了——因为批量意味着你没有机会一张张调整。正确顺序是先拿 3 张有代表性的图含透明、含文字、含渐变各一张试转确认底色和参数参数固定下来再跑全量转完按上面的三个位置抽查几张然后做数量校验。拿不准底色时最稳的选择是填白色——因为绝大多数接收 JPG 的系统表单、打印、Office背后都是白底。小结PNG 转 JPG 之后的异常基本可以归到两条线上透明区有问题是设计缺陷——JPG 没有 alpha转换器只能编你必须显式指定底色边缘发毛是压缩物理——有损压缩表达不了锐利边缘抬高质量、关掉色度抽样能明显改善。判断自己该不该转问一句就行这张图在目标场景里需不需要透明、有没有细文字两个都是是那就别转保留 PNG 才是正确选择。真需要转的时候操作路径这份教程有说明PNG 转 JPG 教程。