AI image generators can produce artwork that looks like pixel art from a distance, while its cell sizes, outlines, and colors fall apart under zoom. This post explains how I built Pixel Maker , a browser-only converter that detects a logical grid, samples one color per cell, reduces palettes in Oklab, preserves small accents, and exports clean nearest-neighbor PNGs.
Try the tool: https://holometer.net/pixel-maker/en/
This post explains the parts that mattered most: grid detection, representative-color sampling, perceptual palette reduction, rare accent preservation, and clean export.
Why isn't nearest-neighbor resizing enough?
My first version did what many quick converters do:
shrink the source image;
enlarge it again with nearest-neighbor interpolation.
That produces visible squares, but it does not repair the source. A blurred edge becomes a larger blurred-looking block. JPEG noise becomes a collection of unrelated colors. If the generated image uses different implied pixel sizes in the hair, face, and background, resizing simply compresses those inconsistencies into a smaller canvas.
The problem was not “how do I make the pixels larger?” It was “how do I infer a useful logical grid, then choose one intentional color for every cell?”
How does the browser-only pipeline work?
Pixel Maker runs entirely in the browser with Canvas and a Web Worker. The selected image is not uploaded to a server.
The conversion pipeline is roughly:
source image
-> optional grid estimation
-> cell-level color sampling
-> palette extraction and perceptual merging
-> accent and skin-tone preservation
-> small-cluster cleanup
-> logical-size PNG export
-> optional 1x–10x nearest-neighbor enlargement
Keeping these stages separate made the tool easier to tune. A single resize or quantization pass could not handle both AI-generated pseudo-pixel art and smooth illustrations well.
How do you detect a hidden pixel grid?
AI-generated pixel-art-style images often contain a weak periodic structure. Some edges line up every 6, 8, or 10 source pixels, while other regions drift away from that rhythm.
I estimate candidate cell sizes from repeated vertical and horizontal color boundaries, then compare several signals instead of trusting one peak. The detected value is only a suggestion: users can switch to a fixed logical width when the source does not contain a reliable grid.
That fallback matters. A portrait with soft gradients may not have a meaningful source grid at all, while a generated game sprite often does.
How do you choose one color per cell?
Once the logical cells are known, each cell needs a single color. A simple average tends to create muddy colors around outlines, so the default is dominant-color sampling : choose the most frequent color family inside the cell.
The tool also exposes median, mean, and center sampling because no single strategy wins for every image:
Dominant color is strongest against AI noise and JPEG artifacts.
Median is stable when a cell contains a few extreme pixels.
Mean preserves smooth photographic lighting, but can soften edges.
Center is predictable for already-clean sprites.
This choice made a larger difference than I expected. On character faces, averaging often washed out the skin and weakened the eyes; dominant sampling kept the main color planes intact.
Why reduce colors in Oklab instead of RGB?
RGB distance is a poor approximation of visual similarity. Pixel Maker converts palette candidates to Oklab , measures perceptual distance there, and merges nearby colors while weighting each cluster by how much of the image it occupies.
Large regions are protected from being collapsed too aggressively. Small colors can be merged more freely unless they qualify as important accents.
The default hand-crafted mode currently uses 16 colors, while the grid-repair mode starts at 64 colors. Users can increase the count when faces or tiny details disappear.
How do you preserve tiny accents without keeping noise?
The hard part of palette reduction is distinguishing a useful rare color from random noise. A one-pixel highlight in an eye may be important; a one-pixel compression artifact is not.
I score rare candidates using a combination of:
distance from the retained palette;
chroma;
local population;
whether nearby cells support the same color family.
This keeps small stars, eye highlights, and interface accents more reliably. A separate skin-tone safeguard can reserve a representative warm color when palette reduction would otherwise make a face too pale or gray.
What gets cleaned before PNG export?
After quantization, isolated color fragments are compared with their neighbors. A cell is replaced only when a strong local majority exists, so cleanup removes speckle without erasing every deliberate single-pixel detail.
The final PNG is rendered from the requested logical dimensions—anywhere from 16 to 512 pixels on the long side. If a larger display asset is needed, the logical image is enlarged up to 10× with nearest-neighbor interpolation.
That distinction is important: the tool resamples the source for the selected logical size instead of stretching one previously generated thumbnail.
Which conversion mode should you use?
The stricter correction mode prioritizes a consistent grid and compact palette. It works well for game assets and sprites.
The color-preserving mode keeps more of the original gradients and atmosphere. It is better when visual resemblance matters more than strict pixel-art construction.
There is no universal best conversion. The useful workflow is to start with the hand-crafted preset, inspect the eyes and outline at high zoom, then adjust logical size and palette count before editing individual pixels.
What the tool still cannot solve
This is image processing, not semantic redrawing. It cannot infer the artist’s intended eye shape or reconstruct a hand that was malformed in the generated source. Lines thinner than one logical cell may disappear. Images with no repeated structure can also produce unreliable automatic grid estimates.
For those cases, Pixel Maker includes a one-pixel editor so the last few decisions stay human.
Try it
Pixel Maker is free, requires no account, and processes images locally in the browser:
https://holometer.net/pixel-maker/en/
If you test it with an especially difficult image, I would like to know which part breaks first: grid detection, palette reduction, outlines, or small details. Those failures are the most useful input for the next version.
Disclosure: This article was edited with AI assistance from my implementation notes and verified against the live tool.
Top comments (0)