Photo Editing

Cut out hair from a photo without shaving the edges off

A background remover that works by colour asks every pixel a yes or no question, and the honest answer for a pixel that a strand of hair passes through is neither. Matting gives that pixel a fraction instead. Two small networks, both running in your browser, and the grey alpha view that tells you in a second whether the cutout will work.

Cut out hair from a photo without shaving the edges off

Try to cut somebody out of a photograph with a background remover that works by colour and you will meet the same two failures every time. The white of the wall goes, and so does the white of their shirt, the white in their eye and the highlight on their glasses, because the tool is comparing colours and a colour does not know which object it belongs to. Then, wherever the edge runs through hair, the hair is simply gone, shaved off at whatever line the threshold happened to fall on.

Both failures come from the same decision, made before any pixel is examined. A colour key asks a yes or no question of every pixel: is this close enough to the background colour. There are pictures where that question has an answer, chiefly a product on a lit sweep in a studio. For anything else it does not.

The honest answer for a pixel that a strand of hair passes through is not yes and not no. The strand covers perhaps a third of that pixel, so the pixel is one third hair and two thirds whatever was behind it. Any tool that must answer yes or no has to round, and rounding is what destroys the edge.

Coverage instead of membership

The field that takes the fractional answer seriously is called matting, and it has been the standard approach in film compositing for decades. Instead of a selection it produces an alpha channel: one number per pixel between zero and one, saying how much of that pixel belongs to the subject. A network trained with a matting loss learns to output those in between values rather than being punished for them.

The tool below runs two such networks, and it does not choose between them for you, because they answer different questions. Everything happens in this browser tab: the weights come down from this site the first time you press the button, and your picture never goes anywhere.

Cutout with soft edges

A cutout made by colour cannot tell white fur from a white wall, so it punches holes in the subject and shaves the hair off the edge. These two small networks answer a different question: not what colour a pixel is, but whether it belongs to the subject. The portrait model weighs about 4.9 MB, the general one about 4.0 MB, and both share a 3.5 MB runtime with every other model tool on this site. Your picture is read in this browser tab, never uploaded, and there is nowhere for it to be uploaded to.

Picture
Drop a picture here
or press Enter to pick one. JPEG, PNG or WebP.

Sample picture, drawn in this browser.

Anything longer than 2048 pixels on its long edge is scaled down to that before the model sees it. The alpha map the model returns is much coarser than the picture anyway, so the pixels above that size cost time and buy nothing.

What is shown on the right

White is kept, black is dropped, and every grey between them is a pixel the model was not certain about. That grey band is the whole difference between this and a colour key, so it is worth looking at once.

Which model decides

MODNet, trained on photographs of people. It returns a soft alpha channel with genuine in between values along hair and fur, which is the part no threshold can produce. On a chair or a packshot it finds nothing sensible.

The alpha map is pulled through a curve before it is applied: everything below 0.5 minus half the width becomes fully transparent, everything above 0.5 plus half becomes fully opaque, and the rest is stretched between them. At 1.00 nothing changes and the soft gradient survives, which is the setting to start from.

Load the model to begin.
As it came in
The cutout, on a chequerboard where it is transparent

What this deliberately cannot do. Neither model gets glass, smoke or a veil right, because both answer with one number per pixel and those things are not one number. MODNet looks for a person, so on a chair, a bottle or a plate of food it returns something that looks like an answer and is not one. U2-Netp always finds a subject, even in a picture that has none, and it decides at 320 by 320 before the result is stretched back up, so its edge is approximate by construction. And a soft alpha channel is not a promise of a clean edge: it is an estimate, and on fine hair in front of a busy background it is visibly wrong. Comparable tools exist, several of them good. What is different here is the mechanism: the weights come down once and the picture stays in the tab.

Why there are two of them. They were trained to answer different questions. MODNet was trained on people against real backgrounds with a matting loss, so it learns the partial coverage of a pixel that hair passes through, and that is why its output has genuine grey values rather than a hard border. U2-Netp was trained to find whatever is salient in a picture, which is a broader and blunter question, and it is fixed at 320 by 320. Neither of them is a better version of the other, so the tool does not choose for you.

WunderPaint
The Dynamic Design and Automation Studio
WunderPaint is a layered image editor for your WordPress media library. WunderPaint Studio is the same thing in any browser, free and without an account.

Why there are two models and not one

The first is MODNet, trained on photographs of people against real backgrounds. It is the one that produces genuine grey values through hair and fur, and it is the reason this tool exists at all. It is also, and this matters, a portrait model. Shown a chair, a bottle or a plate of food it returns something that looks like an answer and is not one, because it was never taught what those are.

The second is U2-Netp, a saliency model. Its question is broader and blunter: which part of this picture is the subject, whatever the subject happens to be. It will find something in almost any photograph, which is useful when the subject is not a person and misleading when the photograph has no clear subject at all. It also works at a fixed 320 by 320 and its map is stretched back up afterwards, so its edge is approximate by construction.

Comparison table of the two cutout models: the portrait model is trained on people, produces a soft per pixel coverage edge, works at the picture's own size, returns nonsense on a chair and weighs 4.9 MB, while the general model finds whatever stands out, has an approximate edge, works at a fixed 320 by 320, is usable on a chair and weighs 4.0 MB.

Neither is a better version of the other. If the subject is a person, use the portrait model and you get an edge no threshold can produce. If it is anything else, use the general one and accept a coarser boundary. The tool leaves that decision where it belongs.

What the models are actually shown

Neither network sees your picture at the size you dropped in. The portrait model is fed at a fixed short edge of 512 pixels with both dimensions rounded up to a multiple of 32, and its pixel values are shifted from the usual range of nought to one into minus one to one before it sees them. The general model is fed at exactly 320 by 320, normalised with the same per channel means and deviations that most models trained on ImageNet expect.

Those are not arbitrary choices and they are not this tool’s inventions: they are the conditions each network was trained under, and feeding a model normalised differently from its training produces output that looks broadly plausible and is quietly wrong. It is one of the more common ways a working model produces bad results in a new setting, and it leaves no error message behind.

What comes back in both cases is a single channel map at the size the model worked at, which is then stretched back up to the picture. That is the second reason the general model’s edge is coarse: a 320 pixel map spread across a 2000 pixel photograph has one model value for every six or so pixels of yours, and the smoothness between them is the browser’s interpolation rather than the model’s opinion.

Look at the alpha channel

The single most useful control in the tool is the one that looks least useful: the checkbox that shows the alpha channel as a grey image. White is kept, black is dropped, and everything in between is a pixel the model was not certain about.

Do that once on a portrait and the whole idea becomes obvious. The body is solid white. The background is solid black. Around the hairline there is a band of grey twenty or thirty pixels deep, and that band is the entire difference between this and a colour key. A colour key produces an image with no grey band at all, which is why its results have that cut out look even when the selection was accurate.

It is also the fastest way to tell whether a cutout is going to work before you spend any time on it. If the grey band is thin and follows the subject, the result will be good. If there are grey patches out in the background, or a hole of grey inside the subject, the model is uncertain about something and no amount of adjustment downstream will fix it.

What the edge dial actually does

The alpha map is pulled through a curve before it is applied. At the default of 1.00 nothing happens: the soft gradient survives exactly as the model produced it, and that is the setting to start from and mostly to stay at.

Turning it down narrows the band in which values are allowed to be uncertain. Everything below the lower bound is forced to fully transparent, everything above the upper bound to fully opaque, and only what lies between them is stretched across the range.

width  = the dial, from 1.00 down to 0.05
low    = 0.5 - width / 2
high   = 0.5 + width / 2
alpha' = clamp((alpha - low) / width, 0, 1)

At the bottom of the range you have reinvented a threshold, deliberately. That is occasionally what you want: a hard graphic edge for a logo, or a subject you intend to place on a flat colour where a soft edge would look like a halo. Most of the time turning this dial down is throwing away the thing you came for.

Table of the edge dial: at 1.00 nothing is forced and the model's answer survives untouched, at 0.60 values below 0.20 become transparent and above 0.80 opaque, at 0.30 the surviving fringe is narrow, and at 0.05 only values between 0.475 and 0.525 remain soft, which is effectively a hard cut.

Putting the cutout onto something

A cutout with a real alpha channel has to be saved as PNG or WebP. JPEG has no alpha channel at all, so exporting a cutout as JPEG silently fills the transparency with black, which is a surprisingly common way to lose an afternoon. If you are unsure which of the formats to reach for here, PNG is the safe answer and WebP the smaller one.

Compositing onto a colour is arithmetic rather than magic, and the tool does it for you when you pick a background, but it is worth knowing the line because it explains the halo problem:

result = subject * alpha + background * (1 - alpha)

A pixel that is half covered contributes half its own colour and half the new background. That is why a subject cut from a photograph taken against a dark wall looks slightly wrong on white: the partially covered pixels along the edge still carry some of the dark wall, and they always will, because that colour is genuinely in them. Nothing here can remove it. What helps is picking a background of a similar brightness, or, if you are placing the subject on a page, giving it a shadow that makes the join plausible rather than trying to make the join invisible.

A cutout is rarely the last step

The moment a subject is free of its background, a second problem appears that the cutout cannot solve. The lighting on the subject came from the scene it was photographed in, and the new background it lands on has its own implied light. A person lit from the left, placed on a background whose light clearly comes from the right, reads as wrong long before anyone can say why.

That is worth knowing before you spend an hour perfecting an edge. If the composite is going to fail on lighting, the edge quality will not save it, and the fix is to choose a different source photograph rather than a different cutout tool. The same reasoning runs through product shots that look assembled rather than photographed, where the giveaway is almost never the outline.

What this deliberately cannot do

Glass, smoke and a veil defeat both models, and they defeat them for a structural reason rather than a quality one. Each model answers with a single number per pixel, and a pixel showing a red shirt through a green bottle is not describable by one number. Proper handling of that needs colour unmixing, which is a different problem with a different shape of answer.

The portrait model finds people, so on a product shot it returns confident nonsense rather than an error. The general model finds a subject even in a picture that has none, and decides at 320 by 320 before its answer is stretched back up. And a soft alpha channel is an estimate, not a guarantee: on fine hair in front of a busy background it is visibly wrong, and the grey view will show you that it is wrong before you notice it in the result.

Anything longer than 2048 pixels on its long edge is scaled down before the model sees it. The alpha map is much coarser than the picture anyway, so the pixels above that size cost time and buy nothing.

Where this fits

Comparable tools exist and several of them are good. The mechanical difference here is that the weights come down to your browser once and the photograph stays in the tab, which matters more for some pictures than others. There is also a real limit to what any single model does: this is one step in a process that also includes deciding what your selection should even contain, and for a shop the answer is usually shaped by the sizes the platform is going to generate rather than by the cutout itself.

The lesson worth carrying away is not that a model beats a threshold. It is that the threshold was answering the wrong question. Once you accept that the correct answer for an edge pixel is a fraction, most of what looks like magic in a good cutout turns out to be arithmetic, and most of what looks like failure in a bad one turns out to be a model that was asked about something it had never seen. Looking at the grey image tells you which of the two you have, every time, in about a second.

Cut out hair from a photo without shaving the edges off

Table of Contents

Learn it by building something

Every week one thing you can make the same afternoon, from dynamic templates to 3D type. Written down step by step.

One mail a week, and then it ends.
Unsubscribe in one click.

Photo Editing

Turn a phone photo of a document into something that looks scanned

A photographed page is tilted, tapered, grey and shadowed, and all three faults are completely determined. Four corners give eight equations, a heavy blur estimates the lighting so it can be divided out, and Otsu picks the threshold. No model, no download, and it finishes before you let go of the button.

Photo Editing

Repair a photo that messengers and re-saves have turned to blocks

JPEG damage is not random. It is made in blocks of eight by eight pixels, in a known order, which is why a model trained on compressed images beats any amount of sharpening. It runs in your browser, repairs at four times the size and hands the result back clean.

WordPress Development

functions.php Explained: What It Is and How Not to Break Your Site With It

functions.php is a normal PHP file that ships with your WordPress theme and runs on every page load, which makes it powerful, easy to misuse, and the wrong place for anything you want to keep. Here's what it actually does, and how to edit it without taking your site down.

Troubleshooting

WordPress Maximum Upload Size: Where the Limit Really Lives

The media library says 8 MB, the file is 12 MB, and nothing you edit in WordPress moves the number. It is not a WordPress setting at all: core reads two PHP directives and prints the smaller one. Which limit is really stopping the upload, why post_max_size is usually the culprit, how to raise the limits in the order that works, and why a photograph almost never needs a bigger ceiling.

Print & Craft

QR and Barcode Generator: The Codes People Actually Need

A WiFi QR code generator that runs entirely in your tab, plus the payload syntax, error correction maths and print sizes that decide whether a code scans.

Photo Editing

Get a depth map from any photo and use it for real lens blur

A cutout blur draws a line and blurs one side of it, which is a thing no lens has ever done. A depth model gives every pixel a distance instead, so sharpness can fall away gradually the way it does optically. The map is a downloadable asset in its own right, and none of it leaves your browser.

Download the free WunderPaint Plugin for WordPress

The WunderPaint workspace with the layers panel, adjustment sliders, text style presets and the asset library along the bottom

The Image Editor & Design Studio

Everything described here can be done in the browser, on your own site. The live demo runs the full editor with nothing to install.

Free

Chaos Art

Autonomous painters make one-of-a-kind abstract art in 3D space - gestures, art movements, painterly media, and embeds that paint a new original for every visitor.

Pro

Particle Strokes

Paint with swarms of light: twenty-two movements, a stamp you draw yourself, and curves that give a stroke a shape - the swarm keeps painting for a few seconds after you let go.

Pro

City Diorama

Any place on earth as a miniature you could hold: real streets, water and building footprints raised into a 3D diorama - or wrapped around a sphere as your own tiny planet.

Free

Papercut Art

Layered paper pictures with real depth - a photo sliced along its actual depth into up to twenty layers, parametric landscapes, animals and clouds you can shape, letters with real counters, and a look that runs on three dials.

Pro

3D Earth Studio

A hyperrealistic globe - day and night with city lights, live clouds, atmosphere halo, country borders and highlights, click-to-place markers with flight-route arcs, satellite orbits, seamless rotation video and a live website embed.

Free

Mystic Studio

Turn a birth date into wall art - a real natal chart with houses and aspects, the moon of that night, zodiac and Chinese zodiac posters, numerology cards and a synastry wheel for two, in eight artful themes.

Free

Marble Bath

Marble paper on a virtual water bath - drop, rake and comb real Ebru patterns with gestures, flowers and classic recipes, razor-sharp at any size and re-editable as a layer.

Free

Day Ring

Turn a day into a beautiful circular schedule - colour-coded time blocks as arcs around a 24-hour clock, with concentric rings for overlaps, emoji, templates and a legend.

Free

Code Shot

Turn code into a gorgeous, share-ready image - syntax highlighting, editor themes, window frames and diff highlighting - then drop it into your design as a re-editable layer.

Pro

3D Solar System Studio

Build a date-accurate 3D solar system - real planet positions for any date, photoreal textures and one slider from artistic to true scale - then drop it into your design as an editable layer.

Pro

3D Molecule Studio

Build a real 3D molecule - from a curated library, the periodic table or a SMILES string - then style it, measure it and drop it into your design as an editable layer.

Pro

3D Textile Studio

Drop your design onto cloth that behaves like the material you pick: silk falls soft, felt holds its shape, flag fabric snaps in the wind. Hang it, blow it and drape it, then lay the finished drape back into your document as a picture.

Pro

3D Particle Studio

Point the engine at any layer and it becomes a cloud of particles that keeps its colours, flowing through a sphere, a galaxy or your own outline. Keep the frame you like as a still, or embed the running engine so it keeps moving on your page.

Free

Origami

Put your own picture on the paper and watch that very sheet fold itself into a crane or a box. Every step is a station you can stop at and turn around in 3D, which is exactly where printed diagrams leave you alone.

Pro

3D Flip Studio

A hardcover you can leaf through, a limp magazine, a strewn pile of sheets, a sticker peeling off its backing. The curl is real geometry, so the print never slides across the paper.

Free

Handwriting Fonts

Draw the alphabet here or fill in a printed sheet and photograph it. What comes out is a genuine font family, installed into your site and available in every picker.

Pro

Step Guides

Turn any picture into an instruction. Every mark is pinned to a place in the image, so arrows still point at the right thing after the callout has been dragged somewhere else.

Free

Text Art

One studio, sixteen art types: ASCII and emoji art, brick, dice, cube, sticky-note, LED, ceramic and keycap mosaics, word portraits, text flows, silhouettes, element tiles and more.

Free

Photo Mosaic

The classic photomosaic, computed in your browser: your main image emerges from many media-library photos via true structure matching - never a cheap overlay.