All articles
9 min read抠图Matting教程WebGPU

在浏览器中抠图:这些模型到底是怎么工作的

两个分割模型、固定的 512×512 计算图,以及一个多数工具从不提及的授权决定。浏览器抠图如何工作、该选哪个质量档、以及如何处理头发、毛发和玻璃的边缘。

抠图看起来像魔法,实际上是一个边界清晰、研究得很透的问题:对每一个像素, 判断它应该有多不透明。这个输出就是 alpha 遮罩——一张灰度图, 白色代表「保留」,黑色代表「删除」。遮罩做对了,抠图自然就对了;遮罩稍微 做错,就会出现廉价抠图的三个典型破绽:灰色光晕、被啃过的头发,以及把半透明 玻璃杯渲染成一块实心色块。

理解模型究竟在做什么——尤其是它在什么分辨率下工作——决定了你是和工具较劲, 还是一次就拿到可用的成品。

两个模型,两件事

工具提供两个质量档,背后是两个不同的分割网络;第三个档位其实是第二个模型 跑在更快的硬件上。

档位模型下载量擅长
快速MODNet约 26 MB人像。体积小、速度快,跑在 WebGPU 上。头像的默认正确选择。
均衡BiRefNet Lite约 183 MB(fp32)通用主体——商品、物件、动物,任何不是人脸的东西。通过 WebAssembly 在 CPU 上运行,兼容性最好。
高画质BiRefNet Lite约 183 MB(fp32)与均衡档相同的引擎,但跑在 WebGPU 上。输出完全一致,在有硬件的机器上 明显更快。

注意第三个档位不是什么:它不是更大的模型。均衡档和高画质档加载的 是同一份权重,产生的是同一份遮罩。唯一的区别是矩阵乘法跑在你的 GPU 上还是 CPU 上。如果你的笔记本没有 WebGPU,选高画质除了触发一次降级之外,什么都 买不到。

那个没人提的授权决定

如果你调研过抠图模型,一定见过各方推荐 BRIA 的 RMBG-1.4 和 RMBG-2.0。 它们确实优秀。但它们以 CC-BY-NC 发布——非商业许可。一个 商业产品在悄悄使用它们的同时,也背上了它大概没有计算过的授权风险。

本工具刻意不使用它们。MODNet 与 MIT 许可的 BiRefNet Lite 再导出版本,都可以 安全地放进任何人可以拿去做任何事(包括商用)的产品里。这是个不够光鲜的选择, 但它是正确的:那个为网店商品图抠图的人,不应该依赖一份非商业的研究许可。

为什么 512×512 决定了一切

下面这个事实,解释了人们觉得困惑的大部分现象:两个模型的输入都是固定的 512×512。不是上限——是固定的计算图。 一张手机拍的 1200 万像素照片,在模型看到它之前就被降采样到大约四分之一 兆像素,像素数量减少约 45 倍。

由此直接推出两个结论:

  • 超大输入不会带来更好的遮罩。喂一张 6000 px 的原图只会多花内存和时间,而模型看到的仍然是同一个 512×512 视图。源码尺寸上限正是为此而设。
  • 细节受限于这个栅格。一根根发丝、自行车辐条之间的空隙、织物的网眼——一旦它们在 512×512 下 小于几个像素,模型就是在猜。它通常猜得挺像,这就是为什么缩略图看着没问题、 100% 放大就发虚。

遮罩随后会被放大回原始分辨率,所以请按实际使用尺寸来判断成品。一张注定要 显示成 160 px 头像的图,是轻松的胜利;一张要铺满 4K 屏的主视觉,是 浏览器抠图模型所能遇到的最难情况。

从 logits 到 alpha

BiRefNet 的导出并不直接给出成品 alpha 通道——它输出的是激活前的 logits。 流程会先用 sigmoid 把它们压缩到 0–1,再量化为 8 位 alpha。这一点很关键, 因为 柔和边缘就来自这里:模型有 60% 把握的像素会变成 60% 不透明,这在合成到新背景上时非常自然,但在硬边背景上看起来就是一圈淡光晕。

如果你看到光晕,解决办法很少是「换个更好的模型」。通常是以下之一:换成与 原图色调更接近的背景、微调边缘处理,或者对该主体接受稍硬一点的边缘。

WebGPU 与 WebAssembly:到底变了什么

质量档位本质上是一张能力阶梯。工具会在模型计算图能装进 GPU 存储缓冲区预算时 申请 WebGPU 会话,装不下或浏览器不支持时自动退回 WebAssembly。

有一个细节值得知道:在 WebAssembly 路径上没有 fp16 执行后端,因此权重保持 fp32。只在 WebGPU 上使用 16 位浮点,意味着要维护两条数值路径和两套可能的输出差异——对一个输出稳定性 比省几毫秒更重要的抠图模型来说,不值得。

实践上:带独显机器上的 Chrome 和 Edge 走快速路径;Firefox、Safari 和较老的硬件走兼容路径。遮罩相同,等待更长。如果你觉得单张图很慢又想知道 原因,最快的诊断是在两个浏览器里跑同一张图做对比。

把成品做完

去掉背景只是上半场。下半场是让结果可用,而大部分实际价值就在下半场:

  • 背景。设计用途用透明;要求纯白的电商平台用纯白;社交媒体 用配色或色调背景。
  • 宽高比。商城网格用 1:1,快拍用 9:16,缩略图用 16:9。 在这里设好比之后裁剪、再丢掉你原本喜欢的构图要好。
  • 阴影。接触阴影是让抠图不像贴纸的关键。柔和的投影读作 「摆在某个平面上拍的」,硬阴影读作「贴上去的」。
  • 裁剪到主体。裁掉透明留白,让商品填满画面——这正是让整个 目录看起来统一的关键,即便原始照片并不统一。
  • 格式。设计用途用带 alpha 的 PNG 或 WebP;需要最小文件且 背景为纯色时用 JPEG。

批处理:本地处理完胜的场景

云端抠图按张计费,还要排队。本地处理两者都没有,这改变了「合理请求」的边界。 丢进去两百张商品图、导出成一个 ZIP,不是滥用工具,而是它的设计用途。

让它成为可能的工程细节:批处理队列每张图只保留一张小缩略图在内存里,而不是 几百个全分辨率画布。你笔记本风扇转起来,就是全部的服务器成本。

实用配方

头像

快速档(MODNet,26 MB)专为人像设计。透明或柔和背景色,1:1,不加阴影 或加极淡的阴影。请按 200 px 而不是 100% 放大来判断。

电商商品图

均衡或高画质档——商品不是人像。白色背景、1:1、裁剪到主体、加一点接触阴影。 如果平台要求纯白底,「裁剪到主体 + 纯白填充」就是恰好对应的流程。

宠物、毛发、羽毛或流苏类主体

均衡档,并把预期调准:模型会把毛发的整体处理得很好,单根毛发只能近似。 条件允许就尽量在纯色背景前拍摄——最大的精度杠杆不在软件里。

玻璃、烟雾、网纱、网格

确实很难。半透明主体违背了「一个像素要么属于主体要么属于背景」的假设。 有时候诚实的答案是刻意去合成,而不是指望一次干净的自动抠图。

隐私,以及值得亲自验证的一件事

自己拍的商品图不敏感。医疗影像、身份证件、客户照片、未发布的设计稿以及 NDA 覆盖的任何东西,都很敏感。把它们上传到抠图服务,就是在别人的基础设施上 留下一份副本——而且图片上传往往带着 EXIF 数据一起走,包括 GPS 坐标,直到 服务器决定把它剥掉为止。

在标签页里处理,这些都不会发生。你可以用大约三十秒亲自验证:打开开发者 工具,切到网络面板,然后抠一张图。除了一次性的模型下载之外,不应该出现 任何包含你的图片的请求。这就是全部的承诺,而且它是可检查的。

抠图工具上试试——先用快速档处理一张人像,再把同一张图切到均衡档,看它的边缘。 这一次对比能教给你的东西,比任何基准测试表格都多。

Try the tools

Everything described here runs for free in your browser — no sign-up, no uploads. Explore the full matrix of on-device AI tools from the homepage, or read the end-to-end workflows.

Back to the matrix