企业官网建设流程全解析

一个反复出现的求助截图

场景几乎每次都一样：手里一个带透明背景的 Logo 或者图标，PNG 格式，在网页/文档里显示正常。为了塞进某个只收 JPG 的系统（表单上传、打印店、老旧的 CMS），转了一下。

结果两种结局：

• 透明区变成了黑底（或者白底），原本"浮在背景上"的图形被一圈硬色块框住；
• 边缘发毛，细线条变粗、文字像糊了一层，放大看还有一圈浅灰色的"回声"。

这两个现象是完全不相关的两个原因造成的，但经常同时出现，所以容易被当成一个问题。分开看就清楚了。

原因一：JPG 根本没有"透明"这个概念

JPG（JPEG）的像素结构里只有三个通道：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% 看这三个地方，问题基本都会暴露：

1. 原来的透明区：颜色对不对，有没有硬边；
2. 最细的文字或线条：有没有发虚、有没有彩色镶边；
3. 渐变区域：有没有出现色带（banding），这是低质量压缩的典型症状。

批量场景：底色必须提前指定

如果是一批图一起转，"默认底色"就不是一个可以随便的值了——因为批量意味着你没有机会一张张调整。正确顺序是：

1. 先拿 3 张有代表性的图（含透明、含文字、含渐变各一张）试转，确认底色和参数；
2. 参数固定下来，再跑全量；
3. 转完按上面的三个位置抽查几张，然后做数量校验。

拿不准底色时，最稳的选择是填白色——因为绝大多数接收 JPG 的系统（表单、打印、Office）背后都是白底。

小结

PNG 转 JPG 之后的异常，基本可以归到两条线上：

• 透明区有问题是"设计缺陷"——JPG 没有 alpha，转换器只能编，你必须显式指定底色；
• 边缘发毛是"压缩物理"——有损压缩表达不了锐利边缘，抬高质量、关掉色度抽样能明显改善。

判断自己该不该转，问一句就行：这张图在目标场景里，需不需要透明、有没有细文字？两个都是"是"，那就别转，保留 PNG 才是正确选择。真需要转的时候，操作路径这份教程有说明：PNG 转 JPG 教程。