DEV Community

AsyncMonk
AsyncMonk

Posted on

Removing the white fringe from a cutout punched a hole in a variegated leaf

I build small sites for clients and run a couple of my own, and more of the product pages people ask for now use dark backgrounds. Dark backgrounds are unforgiving with cutouts, so before quoting that kind of job I ran a small trial with two white-background photos from Wikimedia Commons: a puppy by George Hodan (CC0) and a rooted cutting in a glass bottle by Biusch (CC BY-SA 3.0). No client, no incident, just me checking what breaks. The short version: the white fringe comes from the old white background baked into semi-transparent pixels, and the one switch that removes it also changes transparency inside the subject.

Where the fringe comes from

I used ImgIng (https://imging.ai/) for the cutout, fast mode with the ISNet INT8 model, on those two white-background photos, then composited the exports onto black to look at the edges. The cutout runs in the browser; across six exports of the two images I saw zero non-GET requests in the network panel. The refine panel says that by default it uses the AI output pixel by pixel, without touching transparency or edge color. So what I got was the raw model edge.

Puppy cutout, default export, composited on black

This is the default export of the puppy (source image CC0) placed on black. Look at the outline of the ears and front legs: the fur is dark brown, but there is a greyish light rim hugging it.

I measured it. I treated alpha 1 to 254 as semi-transparent and used opaque pixels within 3 px of the edge as the subject's real color. The puppy's 113,438 semi-transparent pixels have an average stored luminance of 160.1, while the fur just inside the edge sits at 108.6. For the plant it's 200.8 against 123.6. On black, the puppy edge measures 75.4 where the subject color predicts about 64.3, and the plant measures 52.5 against 40.9. Both are roughly 11 luminance units too bright. That "expected" value is an approximation from nearby pixels, so I only use it to compare versions.

My first guess was the export format, since WEBP is preselected. A PNG export had exactly the same number of semi-transparent pixels, and luminance differed by 0.2 at most. The format isn't it. The size is a different story: the puppy PNG is 1,338,889 bytes versus 109,722 bytes as WebP. For someone paying for bandwidth, that settled the format question on its own.

The toggle that fixes it, and what it costs

There is a toggle to remove the background color fringe. It's off by default and marked as optional and as changing the original AI edge. On the puppy it works: the edge on black drops to 76.0 against an expected 75.6, and the only visible side effect is a small jagged patch where the front leg meets the belly.

On the plant it went wrong. The original is from Wikimedia Commons by Biusch, CC BY-SA 3.0; the image below is a cutout composite and is likewise provided under CC BY-SA 3.0.

Variegated leaf: original, default export on black, decontaminated on black

Left is the original, middle is the default export on black, right is the same leaf with the toggle on. In the right panel the upper half of the leaf goes dark and the black background shows through it. I counted the leaf area: 208,058 pixels that aren't fully transparent, of which 151,728 were already semi-transparent in the default export. With the toggle on, 41,644 of them became fully transparent. Not a single opaque pixel changed color by more than 30. It rewrites alpha, not color, so pale parts of the subject that look like the old background get faded out with it.

The two sliders didn't rescue anything. Shrinking the edge by +1 brought the puppy's excess from 11.1 down to 8.4, expanding it made things whiter, and 3 px of feathering was roughly a no-op. The glass bottle keeps its halo of about 20 px either way, and with the toggle on its outline turns into steps.

What I'm doing about it

I now sort cutouts by subject before touching the toggle. Dark, solid subjects get it, followed by a zoomed check of the joints. Anything with pale areas close to the old background, like variegated leaves, white packaging or labels, keeps the default export and its slight fringe. Glass I haven't solved; I'd rather give it a lighter panel. I only tested fast mode and white backgrounds, so other modes and grey or colored backdrops are open questions. If a batch of yours is headed for a dark page, pull out the images with pale parts first, and keep in mind there's a button to restore the original AI alpha if the toggle eats something.

Top comments (0)