Image Background Remover
Remove image backgrounds directly in your browser using color keying, corner-anchored flood fill algorithms, and adjustable edge feathering. Export cutouts with transparent alpha channels in PNG or WebP formats with zero server upload.
How to use
Upload or drag and drop a PNG, JPG, or WebP image into the dropzone.
Select the background mode: Auto-Detect Background (samples image corners), White Background, Black Background, or Eyedropper color picker.
Adjust the Color Tolerance slider to fine-tune the color distance threshold.
Adjust the Edge Smoothness (feathering) slider to eliminate harsh jagged outlines.
Choose your replacement backdrop (Transparent checkerboard, solid color, or white) and download the processed cutout as a transparent PNG or WebP file.
How client-side background removal works
Background extraction in digital image processing separates foreground objects of interest from their surrounding backdrops. Our browser-based engine combines chroma distance metric calculation with topological boundary flood-fill algorithms using the HTML5 Canvas CanvasRenderingContext2D.getImageData() API.
Color distance metrics and Euclidean color space
To distinguish between foreground subjects and backdrop pixels, the engine calculates the Euclidean distance in RGB color space: $$\Delta E = \sqrt{(R_1 - R_2)^2 + (G_1 - G_2)^2 + (B_1 - B_2)^2}$$ When $\Delta E$ falls within the configured tolerance threshold, candidate pixels are flagged for alpha transparency attenuation.
Contiguous flood fill vs global color removal
A frequent defect in naive color keying is the accidental erasure of matching colors inside the foreground subject (such as white clothing, highlights, or eyes when removing a white backdrop). To prevent this, our engine provides Contiguous Corner Flood-Fill Mode: starting from the four perimeter corners of the image matrix, a Breadth-First Search (BFS) queue traverses strictly connected background pixels, preserving identical colors enclosed within foreground boundaries.
Edge feathering and antialiasing
Binary threshold cutouts produce jagged, pixelated silhouettes (aliasing). Our post-processing pipeline computes a soft alpha gradient along boundary perimeter pixels, generating smoothly blended transparency that composites naturally over new backgrounds and web layouts.
Zero server upload and client privacy
Images uploaded to this tool are decoded and manipulated strictly inside your web browser's local V8 JavaScript runtime using HTML5 Canvas pixel manipulation. No image data or metadata is ever uploaded to or stored on external servers, ensuring complete privacy for personal photographs and unreleased product prototypes.
Frequently asked questions
What image formats are supported for background removal?
You can upload JPG, PNG, WebP, GIF, and SVG images. Processed images can be exported as transparent PNG (optimal for compatibility) or lossless WebP (smaller file size).
Why does my foreground object have transparent holes?
This occurs if your foreground subject contains colors similar to the background. Switch on 'Contiguous Flood-Fill' mode or reduce the Color Tolerance slider so only connected exterior background pixels are removed.
What is the purpose of the edge feathering slider?
Edge feathering applies a soft linear alpha gradient to transition pixels bordering the cutout, eliminating harsh edges and creating smooth outlines.
Can I replace the background with a solid color instead of transparent?
Yes. In the Replacement Backdrop selector, choose 'Solid Color' to set any background color (e.g., pure white for e-commerce listings or corporate blue for headshots).
Are my uploaded photos sent to an external server or cloud AI?
No. The entire background extraction algorithm runs 100% client-side inside your browser using HTML5 Canvas. Your photos never leave your device.