DEV Community

longan_dev
longan_dev

Posted on

I built a free image-to-pixel-art converter that runs 100% in the browser

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):

  1. Downsampling — draw the image onto a small canvas (drawImage with smoothing), where each cell becomes one "pixel". A slider controls block size from 2 to 64px.
  2. 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.
  3. Nearest-neighbor upscaleimageSmoothingEnabled = false keeps 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 Map cache 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)