I wanted to turn some photos into pixel art for a side project, and every online tool I found either watermarked the output, required signup, or uploaded my images to a server. So I built my own: https://imagetopixelart.top
How it works (no backend at all):
-
Downsampling — draw the image onto a small canvas (
drawImagewith smoothing), where each cell becomes one "pixel". A slider controls block size from 2 to 64px. - Color quantization — median-cut over the RGB space for the "Auto" palette, or nearest-color mapping against fixed retro palettes: Game Boy's 4 greens, the NES hardware palette, PICO-8's 16 colors.
-
Nearest-neighbor upscale —
imageSmoothingEnabled = falsekeeps every pixel a perfect sharp square at any export size.
The whole thing is a single HTML file. No build step, no framework, no dependencies. Images never leave the device, which makes it instant and private by default.
Things that surprised me:
- A
Mapcache keyed on packed RGB ((r<<16)|(g<<8)|b) made nearest-color mapping ~10x faster on photos. - Weighting the distance metric (2/4/3 for R/G/B) noticeably improves how "right" the palette mapping feels vs plain Euclidean.
- Median-cut in ~30 lines of JS is good enough — no need for k-means.
Try it and tell me what palette I should add next: https://imagetopixelart.top
Top comments (0)