Pixel Lab
Pixelate any image in your browser. 9 palettes, Floyd–Steinberg dithering.
A browser-based image pixelator with palette presets, Floyd–Steinberg dithering, and quick recipes. Everything runs client-side — no server, no upload. Built to turn photos into pixel art with intent, not just texture.
The problem
Most pixelators are hard-coded — they either give you a preset look or expose raw sliders with no framework for using them. Designers want both: palette constraints that feel intentional AND the ability to tune. And most designers don't want to upload images to a random server to do it.
The approach
Build the whole pipeline client-side — Canvas API, no server, nothing leaves the browser. Expose a few understandable controls (pixel size, color levels, palette picker, dithering toggle) with preset "recipes" for the most-wanted looks. Optimize for the first-thirty-seconds, not the twelve-hour power user.
What I designed and built
End-to-end: the pixelation pipeline (downsample → color quantize → palette snap → optional Floyd–Steinberg dithering), 9 palette presets, 6 quick recipes, drag-drop/click/paste file handling, compare-original toggle, grid overlay. The whole tool ships as a single static route. Bundle is small because there are no dependencies beyond React.
Behind the build
The sunflower test: take a photo with rich color gradients and see whether each palette preset feels right. Game Boy greens had to actually look like Game Boy — not just reduce to green. PICO-8 had to feel like a pixel game, not a gradient approximation. Getting each preset to its own specific rightness is where the time went. The biggest engineering decision was client-side everything. No server, no upload, no "give us your image and we'll send it back" trust friction. A few hundred lines of quantization and dithering math running in the browser — the tool belongs to the user the whole time.
Craft decisions I care about
Dithering is the biggest UX bet — most users won't know what Floyd–Steinberg does, but they'll feel the difference instantly. The compare-original toggle lets them verify before they commit. Color levels pre-quantize before palette snap — non-obvious but it changes what gets mapped where. Grid overlay uses CSS difference blend mode so lines stay visible on any pixel color.