一个特别常见的误会

下面两件事,在没有棋盘格背景的情况下长得一模一样:

  • 一个 logo,背景区域是透明的,你导出 PNG 后想贴在网页的深色导航栏上
  • 一个 logo,背景区域被填成了白色,导出时也存成了 PNG

在白色背景的看图软件里,它们看起来都是“白色背景的 logo”。

直到你把第一种贴到深色网页上——它完美融入;把第二种贴上去——它是一块突兀的白方块,四角还带着锯齿。

这个错误在导出环节极其常见,因为大多数修图软件的默认画布背景就是白色,稍不注意保存时就把背景合进去了。

棋盘格背景是干嘛的

答案很朴素:给“透明”一个可见的样子。

这个做法来自 Photoshop 等修图软件的传统——用两种很浅的灰白方块交替铺满,透明区域就显示成一片棋盘格。它同时满足两个要求:

  • 足够中性——浅灰接近无色,不会干扰你对图像本身颜色、明度的判断
  • 足够明显——图案化的纹理和图片内容天然区分,“这一块是透明”一眼就能看出来

另外,棋盘格还能透露更多信息:如果某个区域显示的是半明半暗的浅棋盘格,说明那里的 alpha 值是介于 0 和 1 之间的半透明(比如柔和的投影、发光边缘、抠图的羽化过渡),而不是全透明。

imgview 的三种背景:按一下 T 就够了

棋盘格适合看透明,但有些场景需要别的背景。imgview 里按 T 键,背景会在三种之间循环切换:

  1. 棋盘格(默认)——检查透明通道、检查抠图边缘
  2. 深色——看浅色元素、白色描边、发光效果、深色主题素材
  3. 白色——看印刷效果、白底展示、浅色细节

同一个透明图形,在这三种背景下的样子:

同一个带透明的图形:棋盘格(左)、深色(中)、白色(右)

三种背景下的图形本身没有变化,变的是你对它的判断。这也是为什么“看图时能一键换背景”比看起来重要——同一张图,在不同背景上的观感差别可以很大。

什么时候需要认真看透明

  • 导出 logo / 图标前后——确认背景真的透明,而不是白底
  • 检查抠图边缘——发丝、毛绒、玻璃、烟雾这些柔和的边缘,放大后看有没有残留的原背景色(最常见的“白边”和“黑边”)
  • 做深色模式适配——很多素材在浅色页面上很好看,放到深色界面上就消失了(白色描边的图标尤其明显)
  • 交付给别人的素材——给同事的 PNG 如果带了白底,对方可能要重新做一遍
  • 印刷前确认——在印刷里,“透明”和“白色”是完全不同的两件事

怎么在 imgview 里检查一张图的透明通道

  1. 双击打开图片(或把图拖进窗口)
  2. T 切到棋盘格背景——如果整张图都被棋盘格包围,说明背景确实是透明的
  3. 1 切到原始尺寸(1:1),这样看到的是像素的真实样子,不会因为缩放掩盖锯齿
  4. 拖动图片到边缘区域,逐个角落检查:有没有残留的白边、灰边、杂色像素
  5. 要不要再看深色/白色效果,再按 T 循环切换

小技巧:判断“白边”还是“透明边缘”,来回按 T 切换背景最快——白边在任何背景下都是白的一条,而透明边缘会跟着背景变。

这些操作都只影响屏幕显示,imgview 是纯查看器,不会修改也不会写回文件——你随时关掉窗口就行。

顺带说说:各格式对透明的支持

格式透明支持说明
PNG完整 alpha支持 0~255 的连续透明度,抠图的柔和边缘也能保留;无损,但体积偏大
WebP完整 alpha同样的透明能力,体积通常比 PNG 小很多
AVIF完整 alpha新一代格式,压缩率更高,编码稍慢
GIF仅 1 位透明每个像素只有“全透明”或“不透明”两种状态,所以抠图边缘一定会带锯齿
JPEG不支持根本没有透明通道,透明区域保存时会被填成某种颜色(通常是白)
SVG矢量没有像素,透明由图形本身决定,放大不会失真

所以当有人问“为什么我的透明图存成 JPG 之后变白底了”,答案是:JPG 存不了透明,这不是软件的问题,是格式的能力边界。

imgview 支持的九类格式里(jpg / jpeg / png / gif / webp / bmp / svg / ico / avif),除了 JPEG 和 BMP 之外基本都带透明能力,SVG 更是矢量渲染——按 1、滚轮放大到很大也不会糊。

小结

透明是“负空间”,它自己看不见,只能靠背景衬托出来。

能一键切换棋盘格 / 深色 / 白色背景的看图工具,才算是真的能看清一张透明图。

如果你的工作里经常和透明素材打交道,可以试试 imgview:默认就是棋盘格背景,T 键循环切换,纯本地运行、图片不上传。