Kling 4.0 正式登陆 Atlas Cloud —— 原生 30 秒视频

什么是 Alpha 通道?图像透明度究竟如何运作,按格式逐一解析

什么是 Alpha 通道?了解 PNG、WebP、透明 GIF、SVG 和 JPG 如何存储透明度,然后保存一张背景透明且保持清晰的 PNG。

你把一张“透明”PNG拖到深色幻灯片上,结果跟着来了一个白色矩形。文件在编辑器里明明好好的。那到底发生了什么?答案藏在一个很少有人会去看的第四个通道里。图像中的每个像素都带有红、绿、蓝三个值,而在某些格式中,还有第四个数字——alpha 通道,它表示该像素应该显示多少。

本指南将解释这个数字存储了什么,哪些格式会保留它(PNG 和 WebP),哪些格式把它简化成一个开关(GIF),哪些格式会直接丢弃它(JPG),以及为什么 SVG 遵循不同的规则。在此过程中,我们逐像素读取了七张真实抠图的 alpha 通道,所以下面的数字来自文件,而不是理论。

同一张去除背景的运动鞋 PNG 分别放在棋盘格、深灰面板、蓝色面板和暖色渐变上显示了四次,四张图中鞋子周围都没有方框或边缘杂色

一张 PNG,四种背景。这双运动鞋是 AI 生成的测试输入,用 Atlas Cloud 背景移除工具抠出;文件原样放置在各个背景上。

核心要点

  • Alpha 通道是第四个通道,为每个像素存储不透明度,在 8 位图像中从 0(完全透明)到 255(完全不透明)。
  • PNG 和 WebP 保留完整的 alpha 通道。GIF 只能将一种调色板颜色标记为透明。JPG 完全不存储透明度。
  • Atlas Cloud 的 免费 AI 背景移除工具 会按你上传的像素尺寸返回一张透明 PNG,并在你的浏览器内处理。
  • 在七张测量过的抠图中,只有 0.7% 到 2.2% 的像素是半透明的。这一细窄的带状区域正是抗锯齿边缘,让头发和轮廓看起来自然。
  • 如果一张 PNG 在查看器中显示白色或黑色背景,通常并不是丢失了 alpha 通道。在重新导出任何内容之前,先把它放到深色或棋盘格背景上检查一下。

Alpha 通道在每个像素内部存储了什么

问 alpha 通道是什么,你通常会得到一个比喻。这里给出数字。W3C 的 PNG 规范用一句话定义它:“alpha 样本决定像素的不透明程度,其中零表示完全透明,最大值表示完全不透明。”在 8 位图像中,最大值是 255,这就在透明和实心之间给出了 256 个级别。

PNG 也允许 16 位 alpha。该规范允许其两种携带 alpha 的颜色类型——带 alpha 的灰度和带 alpha 的真彩色——使用 8 位或 16 位位深,而 16 位 alpha 通道有 65,536 个级别。在合成流程之外,你遇到的会是 8 位。

所以一个 RGBA 像素是四个数字。三个描述颜色,一个描述覆盖程度。只改变第四个,颜色保持不变,而像素逐渐淡出。这就是柔和发丝边缘、投影,以及能让背景透出来的玻璃背后的全部诀窍。

信息图展示三个 RGBA 像素,它们的红、绿、蓝值相同,均为 46、127 和 224,但 alpha 值分别为 255、128 和 0,另有一个 256 级 alpha 渐变,在棋盘格上从完全透明过渡到完全不透明

“透明”这个词掩盖了一个重要区别。某些格式为每个像素存储完整的 alpha 值,因此一个像素可以是 37% 可见。其他格式存储单个是或否的标记:这个像素绘制,那个像素跳过。两者都被称为透明度,但只有第一种能让边缘淡出。记住这个区别,因为这就是为什么 GIF 贴纸看起来有锯齿,而 PNG 抠图不会。

你在视频和游戏工具中还会遇到另一个术语:预乘 alpha。在直通(或非预乘)文件中,颜色值以完整强度存储,alpha 在显示时对它们进行缩放。在预乘文件中,颜色值已经乘以 alpha,因此一个半可见的红色像素被存储为半强度的红色。PNG 使用直通类型;规范指出颜色值“不会被 alpha 值预乘”。

这个想法有文献可循。Alvy Ray Smith 1995 年关于 alpha 历史的备忘录将这一概念归功于他自己和 Ed Catmull 于 1970 年代在纽约理工学院提出,并将两种约定之间界限的划定归功于 Porter 和 Duff 1984 年的论文。对于日常网页和印刷工作,你可以忽略这一区别;你的编辑器会处理它。

如何保存带透明背景的 PNG

很多“我导出的不是透明”的问题,在保存对话框打开之前就已经决定了。三条规则涵盖它。背景图层必须被隐藏或删除,这样画布在编辑器中会显示棋盘格。格式必须是有 alpha 通道的格式,实际上就是 PNG 或 WebP。

而且 PNG 选项应该是每通道 8 位的那种,通常标为 PNG-24 或 32 位,而不是某些导出器会缩减为开/关透明度的调色板版本。PNG 规范确实允许索引图像携带“将 alpha 样本与每个调色板条目关联的 alpha 表”,但你不能指望每个工具都会使用它。

下面的菜单路径来自各厂商自己的文档。

软件透明 PNG 导出的位置
Atlas Cloud 背景移除工具点击 Download;alpha 通道已经就位,所以没有格式设置会出错
PhotoshopFile > Export > Export As,选择 PNG 作为格式,并在格式设置中允许透明度
GIMP 3.0File > Export As,将文件命名为 .png;“Save color values from transparent pixels”选项仅适用于单图层图像
Figma选择画框,在右侧边栏添加 PNG 导出;如果画框有填充,请在 Fill 部分取消勾选 Show in exports
PowerPointPicture Format > Remove Background,然后右键单击图片,Save as Picture,并在 Save as type 列表中选择 PNG

无论你使用哪个工具,在下载前都要在棋盘格背景上查看结果。Atlas 的结果面板正是这样显示的,所以文件到达你的磁盘之前,你就能看到 alpha 通道在工作。

Atlas Cloud 背景移除工具结果面板,显示棋盘格预览上的抠图,Output Format 字段设置为 PNG (transparent background),并有一个 Download 按钮

一键将任意图像转换为透明 PNG

获得带真实 alpha 通道文件的最快方法,就是让分割模型生成一个。Atlas Cloud 在浏览器标签页内运行一个背景移除工具,它是网站上少数无需账户的免费 AI 工具之一。你拖入一张照片,点击 Run Free,然后下载结果。

并排对比:一张放在木桌上的 AI 生成运动鞋照片,以及同一双运动鞋抠出为透明 PNG 后放在深灰色背景上,鞋带和鞋底边缘完好无损

该模型通过 WebGPU 在本地运行,在没有 WebGPU 的机器上回退到 WASM,我们在断网情况下完成了一次抠图。没有水印,也无需注册。

主体不限于人像。在测试中,一张合影、一只长毛狗、一双白色运动鞋、一个手写签名、一个线稿 logo,以及一件在白墙前拍摄的白衬衫,都返回了可用的抠图,logo 的负空间也保持镂空。如果你需要的抠图将用于大幅面印刷,请搭配我们做过对比的免费图像放大器,因为 alpha 通道会随图像一起缩放。

深入一张真实抠图:柔和像素在哪里

我们用 Python 打开了其中七个输出,并按 alpha 值统计了每个像素。七个文件中的模式完全相同。根据主体占画面的比例不同,60.6% 到 98.4% 的像素是完全透明的。

半透明像素——alpha 在 8 到 250 之间的那些——占图像的 0.7% 到 2.2%。这是一条宽 1 到 3 像素、环绕轮廓的带状区域,承担了所有抗锯齿工作。

七张背景移除图像中 alpha 值的堆叠条形图:完全透明像素范围为 60.61% 到 98.38%,半透明边缘像素为 0.71% 到 2.16%,其余为实心主体像素

那层薄纱教会了我们仅凭定义无法得知的东西。alpha 通道可以存储半透明,但薄纱返回时只有 0.73% 的半透明像素,与运动鞋一样是细窄的轮廓。布料本身被写成了实心,其背后的绿植被烘焙进了它的颜色。形状保留了,半透明却丢失了。一个文件拥有 alpha 通道,并不能说明模型是否选择使用范围的中间部分。

给好奇者的一个小技术观察:在全部七个文件中,实心主体像素的 alpha 是 254,而不是 255,这种差异任何显示器都无法显示。在我们检查的完整尺寸 PNG 中,每个完全透明像素都带有相同的颜色值——纯黑色,因此文件没有存储任何可能作为边缘杂色泄漏回来的隐藏背景。

哪些图像格式支持透明度

五种格式几乎涵盖了你可能收到的所有文件。它们以四种不同方式存储透明度,而这种差异决定了边缘能否淡出、文件能否动画化,以及最终文件有多大。

格式透明度如何存储级别柔和边缘动画
PNG每像素 8 位或 16 位 alpha,或用于索引和单色透明度的 tRNS 块256 或 65,536是是(APNG,现已成为 PNG 规范的一部分)
WebP每像素 8 位 alpha,在有损和无损模式下均如此256是是
GIF将一个调色板索引标记为透明2(开或关)否是
SVG无背景的矢量形状;按元素设置不透明度连续是是
JPG无1否否

JPG 支持透明度吗?

不支持。MDN 的图像格式指南说得很明确:“JPEG 不支持 alpha 通道。”该格式只存储三个颜色通道,别的什么都没有,所以当你把分层图像保存为 JPG 时,编辑器必须先把它压平到某种颜色上,通常是白色。那个白色随后就成了普通像素,并随着主体去到文件所到的任何地方。

同一张运动鞋抠图以两种方式保存在深色页面上:JPG 版本在鞋子后面带有白色矩形,PNG 版本则通过其 alpha 通道显示出深色页面颜色

这也是为什么“透明 JPG”下载并不像它声称的那样。要么该文件实际上是扩展名错误的 PNG,要么你看到的棋盘格是画进像素里的。把 .jpg 重命名为 .png 改变的是盒子上的标签,而不是内容。如果你需要透明度,就必须打开 JPG、移除背景,并将结果保存为能够容纳 alpha 通道的格式。

透明 GIF:一种颜色,硬边缘

GIF 的透明度来自该格式的 89a 修订版,其年代感也随之显露。GIF89a 规范添加了一个带 Transparency Index 的 Graphic Control Extension,描述如下:“Transparency Index 的作用是,当遇到它时,显示设备的对应像素不被修改,处理继续到下一个像素。”颜色表中的一个条目被声明为可透视。其他每个像素都以完整强度绘制。

这使得 GIF 透明度成为 1 位的事情。一个像素要么被跳过,要么被绘制,而调色板最多只有 256 种颜色,没有空间容纳半可见的边缘。把 GIF 抠图放到与其制作时不同的背景上,轮廓就会像楼梯一样出现台阶,通常还会在抗锯齿像素被强行吸附为实心的地方出现浅色边缘。

同一块 200 x 112 像素运动鞋鞋带区域的两次放大视图:PNG 边缘在几个像素内平滑淡出,而 GIF 边缘在深色背景上显示出坚硬的阶梯

我们用 128 的 alpha 阈值(通常的默认值)将运动鞋抠图转换为 GIF,并把鞋带的同一区域放大了三倍。8 位那一侧在两三个像素内淡出。GIF 那一侧全是直角。如果你需要一张透明 GIF 给只接受这种格式的客户,请把它建立在其将要放置的背景颜色上,这样边缘就会匹配,而不是发光。

WebP 有损和无损文件中的透明度

WebP 是最终让有损压缩拥有 alpha 通道的格式。Google 的压缩文档描述了“另一种 WebP 模式,允许 RGB 通道有损编码,alpha 通道无损编码”,其 cwebp 参考将 alpha 质量默认值设为 100,这意味着除非你另有要求,alpha 平面会无损存储。

Google 的概览页面称无损 WebP 比 PNG 小 26%,并称透明度大约增加 22% 的字节数,而有损 WebP 配合透明度通常比 PNG 小 3 倍。

我们自己的数字也在这个范围附近。我们直接从背景移除工具取了一张 2048 x 1152 的抠图,PNG 大小为 1,211 KB,然后用 Pillow 以默认设置重新保存。

一张 2048 x 1152 抠图保存为五种格式的水平条形图:PNG 1,211 KB,无损 WebP 660 KB,GIF 401 KB,质量 90 的 JPG 161 KB,质量 80 的有损 WebP 124 KB,标签标明 alpha 通道对 PNG 和两个 WebP 文件保持完整,对 GIF 仅为 1 位,对 JPG 则已丢失

无损 WebP 结果为 660 KB,小了 46%,并且每个 alpha 值都与 PNG 完全匹配。质量 80 的有损 WebP 结果为 124 KB,其 alpha 平面仍与原始文件逐字节完全相同。唯一改变的是颜色数据。对于抠图的网络交付,这通常就是你想要的文件。对于你打算继续编辑的主副本,请保留 PNG 或无损 WebP。

SVG 透明背景:没有背景需要移除

SVG 没有需要变为透明的背景,因为它从来没有背景。一个 SVG 文件是一系列绘图指令:在这里画这个圆,用这个颜色填充它。除非你添加一个覆盖画布的矩形,否则列表中的任何内容都不会绘制画布。当 SVG 看起来有白色背景时,你看到的是它后面的页面或查看器。

三个面板显示同一个 SVG 圆环:在浅色页面上它看起来有白色背景,在深色页面上深色会透过圆环显示出来,而添加了白色 rect 元素的第三版则带有一个可见的白色方框

SVG 内部的透明度是按元素设置的。MDN 的参考文档将 fill 值 none 描述为不绘制填充,因此形状内部保持透明。fill-opacity 属性只让形状内部的颜料淡出,而 opacity 会让整个元素淡出,包括描边。

有两点容易让人困惑。通过 image 元素嵌入 SVG 的栅格照片会保留该照片原有的 alpha 通道,所以 SVG 内的 JPG 仍然带着它的白色方框。而把照片通过栅格转 SVG 转换器处理并不会移除背景;它会把背景连同其他所有内容一起描摹成形状。

为什么我的 PNG 不是透明的?

按顺序运行这些检查。通过第一项的文件根本不需要修复。

**查看器绘制了背景。**图像查看器必须在透明像素后面放点东西,很多查看器会选择白色或黑色。文件没有改变;只是显示如此。在同一张 PNG 放到设计应用、深色页面的浏览器标签页,或带深色填充的幻灯片中打开。如果方框消失了,就到此为止。

Windows 11 照片应用显示一张透明运动鞋 PNG,应用自身的背景颜色填充了透明区域

**文件没有 alpha 通道。**一张被重命名为 .png 的 JPG、一张透明图像的截图,或者经过消息应用或 CMS 重新编码的文件,看起来都会是不透明的,因为它们确实是不透明的。检查图像模式。在 Photoshop 中,Channels 面板应列出 Alpha 通道;在 Windows 中,Properties > Details 对 RGBA PNG 显示的位深应为 32,而不是 24;在 Python 中,Image.open("file.png").mode 返回 RGBA。如果缺少 alpha,请回到分层原始文件并重新导出。

**边缘生硬或有杂色。**阶梯状轮廓指向 1 位透明度,而浅色或带色边缘则指向仍带有旧背景颜色的边缘像素。我们的红墙测试展示了这是如何发生的:白衬衫放在饱和红墙前时,69% 的半透明边缘像素偏红,而在新背景上,这条带状区域就会读作杂色。修复方法是重新导出为 8 位 alpha 且无遮罩色;对于抠图,可在原始照片中使用中性背景,或将蒙版收缩 1 像素。

**棋盘格被烘焙进去了。**缩放图像。如果灰白方格随着图片一起放大缩小,它们就是像素。图库网站的预览图经常这样发布。下载真实文件,或者重新把背景抠掉。

针对不透明 PNG 的四步排查流程:在深色背景上测试,确认文件有 alpha 通道,放大边缘查看硬台阶或杂色,并缩放图像以查看棋盘格是否被烘焙进像素中

常见问题

Alpha 通道和图层蒙版是一样的吗?

它们是表亲。Adobe 的 Photoshop 帮助文档将 alpha 通道描述为在 Channels 面板中存储为可编辑灰度蒙版的选择区域,而图层蒙版在编辑器内部的工作方式相同。区别在于导出后什么会保留下来。图层蒙版是存在于 PSD 中的编辑工具。写入 PNG 或 WebP 的 alpha 通道是所有蒙版压平后的结果,也是其他应用真正读取的透明度。

8 位 alpha 通道有多少级透明度?

256 级,从 0(完全透明)到 255(完全不透明)。PNG 也支持的 16 位 alpha 通道有 65,536 级。GIF 有两级:绘制或跳过。

我能给 JPG 添加 alpha 通道吗?

只要它仍是 JPG 就不能,因为该格式没有地方存储 alpha 通道。打开文件,将主体与背景分离,然后将结果保存为 PNG 或 WebP。Atlas Cloud 上的基于浏览器的抠图工具可一步完成转换:输入 JPG,输出透明 PNG,免费使用且无需登录。

WebP 透明度在所有浏览器中都能用吗?

当前版本的主流浏览器都能渲染带 alpha 的 WebP,而 MDN 的该格式兼容性表是确认你仍需支持的旧版本是否兼容的地方。如果旧版受众很重要,请通过 picture 元素以 PNG 作为回退。

为什么我的透明 PNG 有白色光晕?

边缘处的像素是半透明的,它们的颜色仍然带有被抠出时的背景。在白色原图上,一旦你把抠图放到深色物体上,那条带状区域看起来就像白色光晕。重新导出为 8 位 alpha 且遮罩设为 none,或在保存前将选区收缩一个像素。

结论

透明度是一个数字。RGBA PNG 或 WebP 中的每个像素都带有 0 到 255 的 alpha 值,一旦明白这一点,其他格式就会自行理清:GIF 只有一个开/关标记,JPG 什么都没有,而 SVG 从一开始就没有背景需要移除。我们测量过的七张抠图把所有抗锯齿边缘都放在占图像 0.7% 到 2.2% 的带状区域内,而这正是 1 位格式会丢弃的部分。

如果你来这里问 alpha 通道是什么,是因为某个文件不肯变成透明,请先检查查看器,再检查文件的模式,然后检查边缘。而如果你需要干净的 alpha 通道又不想打开编辑器,基于浏览器的背景移除工具会用一张 PNG 交给你,且像素尺寸与你开始时相同。

最新模型

一个 API,畅享全模态 AI。

探索全部模型