How Image Tracing Actually Works

Stage 0: decode and downscale (the Detail control)

The browser first decodes your file into a raw pixel grid. The Detail control (384–1536px) then resizes the long edge to a fixed working size before anything else happens. This is more consequential than it looks: tracing cost grows superlinearly with pixel count, and more importantly, a low-resolution or pixelated source benefits from upscaling to 1024px+, because edge detector logic (the region splitter) behaves far better on a grid with room to express curves than on an 8-pixel-tall logo where every letter counter is three pixels wide. Higher Detail = more fidelity and slower processing; 1024px is the pragmatic default; 768px handles simple marks.

Stage 1: pixel adjustments (gamma, contrast, hue, saturation)

Before any structural work, the pipeline applies the adjustments you set, in a fixed order: gamma → contrast → saturation → hue. These are direct remap functions on the pixel values, pure ImageData operations. Why bother? Because quantization (Stage 3) groups colors by perceptual distance, and noise-prep is cheaper than noise-repair: pushing gamma darkens midtones, expanding contrast separates a muddy two-tone sketch into clearly distinct values, desaturating an infographic collapses tinted noise into honest grays. Anything you can do to make the geometry cleaner usually beats relying on cleanup.

Stage 2: pre-blur (yes, blurring helps tracing)

Counter-intuitive but true: a small, alpha-aware blur (1–2px radius, always applied, plus extra as Simplify rises) makes traces crisper. The reason is jitter. Pixel-art-style antialiasing leaves 1px transition bands whose exact composition jitters from spot to spot along an edge; without averaging, the tracer follows every natural pixel cluster, producing edges that wobble. Adding a controlled blur turns each transition band into a clean ramp the subsequent stages can reason about consistently. Simplify's slider mostly controls how much extra blur and how aggressive the curve fitter is; the blur does the "make similar places decide alike" work.

Stage 3: palette selection (median-cut quantization, then cleanup ×3)

The heart of controlling the output. A quantizer must pick N representative colors from the (up to 16.7M) distinct values in the image. This converter uses median-cut with a generous budget, then cleans the palette in three passes that matter enormously for tracing quality:

• Near-identical merging: shades within ±3 RGB (almost always antialiasing residue) are collapsed.
• Blend-cluster removal: low-share colors lying (almost) on the RGB line between two dominant colors are recognized as the halos that edge blending generates, and dropped outright rather than traced.
• Agglomeration to target count: if the image still holds more distinct colors than your Colors setting allows, the closest clusters merge until they fit, protecting distinct hues (red stays red) before trimming noise shades near them.

Flat logos are usually auto-detected at their exact true colors: the palette stage recovers the design's original swatches, which is why pixel-exact output on flat art is achievable.

Stage 4: posterization, or make every pixel commit

Now each pixel is assigned to its nearest palette color, using the perceptual "redmean" distance, so red-blue shifts that look tiny to the eye weigh correctly. Pixels below 50% alpha are excluded forever. This is why transparent backgrounds survive as true transparency rather than traced white shapes. The image at this point no longer contains gradients; it is a map from pixel → region index. Two-tone art has become 2 maps, a 24-color photo has become 24 posterized maps, and each one is a candidate SVG layer.

Stage 5: label smoothing (absorbing the last jitter)

A 3×3-majority filter then reassigns stray pixels: a pixel surrounded mostly "by green" adopts green even if it quantized to the halo color at its corner. Single orphan islands (one-pixel regions, defined by the turdSize knob to Potrace) get absorbed or dropped here and below. The output of this stage is a clean region map: every region is connected, every boundary is a closed loop, and the geometry is ready for real curve math.

Stage 6: tracing, Potrace-style curve fitting

For each color, the region map walks the boundary to extract closed paths; then comes the classic Potrace algorithm, executed in reduced form: best-fit polygons approximate each boundary walk; the polygon corners are detected by curvature; surviving segments are fit with smooth cubic Bézier curves; and a final optimization pass (opttolerance) nudges control points to cut paths further while staying visually indistinguishable. Holes inside regions come out as subpaths rendered with fill-rule="evenodd", which is why an "O" is one path with one hole and never two overlapping shapes.

Layer ordering is by descending area: largest color regions sit at the bottom of the SVG stack, so painting order looks natural when layers are toggled individually in design software. The same path data powers both merged output and per-layer exports, so the two are exact geometry matches by construction, which is critical for cut registration.

How the knobs map to the stages

• Detail → Stage 0 working resolution.
• Adjustments → Stage 1 pixel remapping.
• Simplify → Stage 2 extra pre-blur + Stage 6 curve tolerance (turdSize, alphamax, opttolerance); defaults trade minimal path count for maximum fidelity.
• Colors → Stage 3 target palette size before cleanup.
• Merge → Stage 3 rerun with user-chosen target colors.
• Knockout → Stage 4 alpha exclusion by color, not by original transparency.

When results confuse you, work backwards through this list: jagged edges → raise Simplify or Detail; muddy halo fringes → the blend-cluster cleanup should have handled it (tell us via contact if it didn't); missing subtle shades → raise Colors; unwanted shade → merge or knockout. The converter page puts all of these on one screen so the loop from diagnosis to corrected file takes seconds, not minutes.