{
  "$type": "site.standard.document",
  "bskyPostRef": {
    "cid": "bafyreifvuv7y4oftx247fc5c3dlkyzkscmw42s7ys4es3fc6b5ent6ozjq",
    "uri": "at://did:plc:25rdn5elo5izoxrmtis34zuk/app.bsky.feed.post/3mpv4ejb7bkf2"
  },
  "coverImage": {
    "$type": "blob",
    "ref": {
      "$link": "bafkreibdrzn5hdqwg37a7uxfwfqcrz4tkigabyznhapuxxq33t65chlwhq"
    },
    "mimeType": "image/webp",
    "size": 61404
  },
  "path": "/longan_dev_2854250b0856e1/i-built-a-free-image-to-pixel-art-converter-that-runs-100-in-the-browser-4fc9",
  "publishedAt": "2026-07-05T07:18:37.000Z",
  "site": "https://dev.to",
  "tags": [
    "javascript",
    "webdev",
    "showdev",
    "powerapps",
    "https://imagetopixelart.top"
  ],
  "textContent": "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\n\n**How it works (no backend at all):**\n\n  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.\n  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.\n  3. **Nearest-neighbor upscale** — `imageSmoothingEnabled = false` keeps every pixel a perfect sharp square at any export size.\n\n\n\nThe 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.\n\nThings that surprised me:\n\n  * A `Map` cache keyed on packed RGB (`(r<<16)|(g<<8)|b`) made nearest-color mapping ~10x faster on photos.\n  * Weighting the distance metric (2/4/3 for R/G/B) noticeably improves how \"right\" the palette mapping feels vs plain Euclidean.\n  * Median-cut in ~30 lines of JS is good enough — no need for k-means.\n\n\n\nTry it and tell me what palette I should add next: https://imagetopixelart.top",
  "title": "I built a free image-to-pixel-art converter that runs 100% in the browser"
}