透明素材要给深色和浅色页面共用，PNG/WebP 怎么验边缘？

透明素材最容易在交付时露馅：白色预览里看着干净，放到深色网页上却有一圈白边；换成浅色背景，又发现主体边缘发黑。问题通常不在“PNG 一定好”或“WebP 一定差”，而在边缘像素、转换步骤和实际使用背景没有一起验。

要分清原因，就把两个变量拆开：同一种格式分别放在深浅背景上看；同一种背景再比较 PNG 和 WebP。不要拿深色页面的 PNG 与浅色页面的 WebP 直接做像素差异，背景本身的变化就会淹没边缘问题。

先把格式判断和边缘判断分开

PNG 可以保存透明通道，WebP 也可以携带透明信息；JPG 没有透明通道。可是“支持透明”只说明格式有这个能力，不代表文件里的半透明边缘就干净。抠图时混入的墙面颜色、白底高光，都会跟着素材一起导出。

因此先保留一份未转换的透明母版，再从它分别导出 PNG 和 WebP。两份文件不要同时改尺寸、裁切或锐化，否则后面看到差异时，无法判断是编码造成的，还是画布变了。关于格式边界，可先阅读图片转格式后透明背景没了：PNG、JPG、WebP 的选择与检查。

要确认的事	合格的判断	常见误判
是否真的有透明	放到有颜色的底板上，底色能透过透明区域	看到棋盘格就认定所有边缘都干净
两份文件是否可比	画布尺寸、主体位置和缩放比例相同	一份被裁切或缩放后再比较
格式是否适合交付	接收端能打开，透明仍被保留	只改扩展名，不检查实际编码

建立四格对照，只改格式或背景中的一项

从目标页面选定深色和浅色背景，把两份文件分别放进去。四格里的显示宽高、位置、浏览器缩放和截图范围保持一致；页面本身有阴影、滤镜或描边时，先关闭这些效果，避免把页面样式误算到素材上。

对照位置	PNG	WebP
同一个深色背景	保存深底 PNG 预览	保存深底 WebP 预览
同一个浅色背景	保存浅底 PNG 预览	保存浅底 WebP 预览

横向比较回答“换格式后变了什么”，纵向观察回答“换背景后暴露了什么”。这四份是验收预览，不是重新抠出的四版素材。不要针对每块底色各修一份，再声称原文件可以通用。

深色底重点找浅色光晕、白边和过亮的半透明像素；浅色底重点找黑边、暗色锯齿和原背景残留。头发、毛绒、玻璃和细线要回到母版看：这类区域本来就可能半透明，不能把“边缘全部不透明”当成修好。检查自然过渡是否连续，比把外圈一刀裁掉更重要。

如果目标页面的背景不是纯黑或纯白，直接用实际颜色。纯黑、纯白可用来放大问题，但不能代替使用场景。需要检查原背景色残留时，可补看黑、白、彩色三底分别暴露哪些抠图边缘问题；本文的四格对照则用于把背景变量与格式变量分开。

图片对比工具要放入同背景的预览，而非直接叠透明源图

先在实际页面截图，或在设计软件里把素材与底板合成，保存四份不再透明的对照预览。建议统一保存为 PNG，保持同样的截图或导出方式；这些预览只用于看效果，原始透明交付文件另外保留。

打开图片对比工具，第一轮放入深底 PNG 预览和深底 WebP 预览；第二轮换成两张浅底预览。工具一次比较两张图，不会自动生成四格，也没有深浅背景切换控件。

为什么不直接丢入透明文件？当前滑块与叠加视图是把第二张绘制结果放在第一张上方。第二张的透明区域仍可能透出下层内容，加上预览区自身的底色，并不等于目标网页的实际背景。先把每个使用场景保存成不透明预览，才能让滑块两边各代表一份完整、独立的显示结果。

优先让两张预览尺寸完全相同。工具虽可选择“取两图最大画布，等比居中”“以第一张尺寸为准”或“以第二张尺寸为准”，这些规则统一的是画布，不会替你识别并对齐主体。主体在原画布里的位置或留白不同，比较时仍可能错位。

先用滑块看轮廓位置，再用透明叠加找重影；重影明显时先排除位置和比例问题。最后看像素差异图，深底、浅底两轮保持同一阈值。生成结果和导出需要登录；文件比较在浏览器中完成，图片不上传到处理服务器。

看到差异后，回到最早出现问题的那一步

两种格式在深底都出现相同白边，母版在深底也有白边，就先修母版边缘。继续换格式不会自动清除原有污染。

母版干净，只有某个导出版变色，再回看那一次导出的设置：有没有铺背景、改变像素尺寸，或使用更强的压缩。一次只改一项，再替换四格里对应的文件。不能仅凭 WebP 出问题，就推断 WebP 格式不适合透明。

本地四格都正常，实际网页却异常，则核对网页实际加载的文件、显示尺寸和样式。不要先把本地母版再抠一遍。若上传流程还生成了缩略图，应分别检查原文件与实际加载的衍生图，找出第一处变化。

差异像素数量只能帮你定位，不能自动给边缘评分。阈值较低时会标出更多细小变化；而当前比较实现不把检测到的抗锯齿像素计为差异。因此“没有标红”不等于透明边缘全部通过。超大图还可能先缩小到工具允许的画布内，需要检查细发丝或窄光晕时，应从两份预览中取同一位置、同一大小的局部再比较。

用目标页面决定交付，不用扩展名投票

四格检查通过后，再恢复网页实际需要的阴影、描边等样式，按最终显示大小复看。原尺寸放大检查用于找原因，实际显示大小用于决定能否交付，两者各有用途。

交付说明保留文件名、像素尺寸、目标深浅背景和检查过的显示大小即可。两种格式都通过，就按接收端支持情况和实际文件体积选择；一份通过、一份没通过，就交通过的版本并记录另一份的问题，不必为了凑齐格式继续压缩。

真正要保住的是同一份素材换背景后仍然自然。四张对照预览是这个结论的检查记录，不应拿来替换仍需透明的交付文件。