User Rating 0.0 ★★★★★

Total Usage 0 times

Category Image Converters

Drop a bitmap image here or click to browse PNG, GIF, JPG, BMP, WebP • Max 2048×2048 px

Is this tool helpful?

Your feedback helps us improve.

★ ★ ★ ★ ★

About

Scaling bitmap pixel art in browsers produces blurry results. CSS image-rendering: pixelated remains inconsistent across engines. SVG is the only static format that guarantees crisp pixel boundaries at arbitrary scale factors. This tool reads raw RGBA data from any raster image via the Canvas API, quantizes colors within a configurable Euclidean distance threshold d = √Δr² + Δg² + Δb², then emits optimized SVG paths. The edge-tracing algorithm merges adjacent same-color pixels into minimal rectangles or contour paths, reducing output file size by 60 - 90% compared to naive one-rect-per-pixel approaches.

Limitations: this tool approximates transparency as a binary threshold (α < 128 is transparent). Anti-aliased edges in source bitmaps will produce extra quantized color bands. For best results, use source images with hard pixel edges and no anti-aliasing. Maximum supported input is 2048 × 2048 px. Processing time scales with pixel count and unique color count.

Formulas

Color distance between two pixels is computed using Euclidean distance in RGB space. Pixels with distance below the tolerance threshold are quantized to the same color.

d = √(r₁ − r₂)² + (g₁ − g₂)² + (b₁ − b₂)²

Where r, g, b are the red, green, and blue channel values in the range [0, 255]. Maximum possible distance is √3 × 255² ≈ 441.67.

Transparency is determined by alpha threshold:

{

opaque if α ≥ 128transparent if α < 128

SVG viewBox is set to native pixel dimensions. Each pixel maps to a 1 × 1 unit in SVG coordinate space. Scaling is handled by the SVG viewport, preserving crispness at any display size.

The greedy rectangle merge algorithm scans each row left-to-right, creating horizontal runs of identical color. Adjacent rows with identical run patterns are merged vertically. Complexity is O(W × H) per color.

The path trace algorithm builds a binary grid per color, then traces the outer contour using direction vectors. It produces a single <path> d attribute with M, h, v, and Z commands. Interior holes are traced as separate sub-paths with reversed winding.

Reference Data

Optimization Mode	Method	SVG Elements	File Size	Best For
None (1:1 Rects)	One <rect> per pixel	W × H	Largest	Debugging, exact fidelity
Row Merge	Merge horizontal runs	≈ 30−50% reduction	Medium	Simple sprites
Rect Merge (Greedy)	Merge rows then columns	≈ 60−80% reduction	Small	Pixel art, icons
Path Trace	Contour tracing per color	1 <path> per color	Smallest	Few-color pixel art

Input Format	MIME Type	Alpha Support	Animation	Notes
PNG	image/png	Yes (8-bit)	No (APNG ignored)	Best input format
GIF	image/gif	1-bit only	First frame only	Classic pixel art format
JPEG	image/jpeg	No	No	Lossy artifacts add colors
BMP	image/bmp	Varies	No	Uncompressed, large files
WebP	image/webp	Yes	First frame only	Browser support varies

Preset	Scale	Optimization	Color Tolerance	Use Case
Pixel Art 1×	1	Rect Merge	0	Exact reproduction
Retro Icon 2×	2	Path Trace	10	Favicons, small icons
Favicon 4×	4	Path Trace	5	Browser tab icons
Sprite Sheet	1	Path Trace	0	Game sprite export
Logo 8×	8	Rect Merge	15	Large display logos

Frequently Asked Questions

JPEG uses lossy DCT compression which introduces color artifacts around edges. A solid red pixel next to a blue one may have intermediate tones after JPEG encoding. Increase the color tolerance slider to merge these artifact colors. A tolerance of 15-25 is typical for JPEG sources. For pixel-perfect results, always use PNG or GIF as the source format.

A 16×16 pixel art icon with 4 colors would produce 256 elements in naive mode. The greedy rect merge reduces this to roughly 40-80 rectangles by combining horizontal and vertical runs. Path tracing further reduces it to exactly 4 elements (one per color), each defined by a compact series of h (horizontal) and v (vertical) line commands. Real-world reduction is typically 60-90% in file size.

The converter uses a binary alpha threshold: pixels with alpha ≥ 128 are treated as fully opaque (their RGB values are used as-is), and pixels with alpha < 128 are treated as fully transparent (omitted from the SVG). Partial transparency is not preserved because SVG rect/path elements at integer coordinates cannot represent sub-pixel blending without anti-aliasing artifacts. Pre-flatten your image onto a solid background if you need to preserve semi-transparent regions.

Only the first frame is extracted. The Canvas API's drawImage() renders the initial frame of animated formats. For animated pixel art, you would need to extract each frame separately and combine the resulting SVGs with CSS or SMIL animations, which is beyond the scope of a single-pass converter.

A 2048×2048 image contains 4,194,304 pixels. At 4 bytes per pixel (RGBA), that is 16 MB of raw pixel data. The edge-tracing algorithm must iterate this data once per unique color. With 100 unique colors, that is 1.6 billion comparisons. Browsers have practical memory limits on Canvas ImageData and the resulting SVG string. Exceeding 2048×2048 risks tab crashes on mobile devices.

In RGB Euclidean space, a distance of 0 means exact match only. A distance of 10 merges colors that are nearly indistinguishable to the human eye (e.g., #FF0000 and #FF0505). A distance of 30 begins merging visibly different shades. A distance of 50+ aggressively reduces the palette and may merge distinct colors. For pixel art with a clean palette, use 0. For photographs or JPEG sources, use 15-30.