I built a pixelation method optimized for human perception

taesoon jang — Sat, 18 Apr 2026 16:22:04 +0000

0. What is pixelation?

Pixelation is the process of converting an image into a grid of large pixels.

It’s commonly used in pixel art, games, or image compression.

Original

Pixelated

1. Problem: Pixelation looks worse than it should

Most pixelation algorithms try to preserve as much information as possible.

But at very low resolutions — like 10×10 or 15×15 or 20x20 — this approach breaks down.

Original

15x15 pixelated

At small sizes, these images stop looking like objects and start looking like noise.

At this scale, preserving information actually hurts readability.

2. Context: This started from a nonogram problem

I ran into this while building a color nonogram game.
I wanted to automatically generate nonogram puzzles from AI-generated images.

Nonograms have unusually strict constraints:

resolution: 10×10 ~ 15×15
colors: 2–3 max
must be immediately recognizable

I tried a few standard approaches, but they all produced similar noisy results

3. Key idea: Optimize for perception, not fidelity

So I stopped trying to preserve the original image.

Instead, I focused on one question:

“What makes a tiny image recognizable?”

4. Color Quantization (Perceptual-first)

Lab color space

Instead of RGB, I used Lab color space for distance calculation.

RGB distance doesn’t align well with human perception.
Two colors that look similar to us can be far apart in RGB space.

Lab space fixes this by aligning distance with perception.

Over-segmentation

If I want k colors, I don’t cluster into k.

Instead:

cluster into k × 5 colors
pick the most frequent → main color
choose k colors that are far from the main color and from each other

This creates a palette with strong contrast instead of subtle variation.

Representative color selection

Most approaches use cluster centroids (average color).

But averages often produce “muddy” colors.

Instead, I select the most frequent color inside each cluster.

This keeps colors sharp and recognizable.

Contrast pruning

After selecting k colors:

remove colors that are too similar
allow palette size to shrink

This further improves readability.

5. Downscaling (Winner-takes-all)

Traditional resizing blends colors.

Example: 51% red + 49% blue → purple

This makes the result harder to recognize.

Block majority voting

Instead, for each pixel:

take the region
select the most frequent label

Example: 51% red + 49% blue → red

This preserves structure instead of mixing it.

Accent color boosting

Small but important features often get lost.

To fix this, non-main colors get extra weight

This ensures details survive.

6. Result

With this approach:

fewer colors
sharper edges
clearer shapes

Let’s look at some results.
Original / traditional pixelation / limited palette / perception-optimized

Using this approach, I generated over 2,000 nonogram puzzles from AI-generated images.
Most of them were immediately recognizable without manual adjustment.

I used this in my nonogram project (playable demo, web version):

nonokingdom.taemon.us

7. Possible applications

This approach could be useful for:

ultra-low resolution icons
fast-loading web images
AI-generated asset cleanup
puzzle generation pipelines

8. Closing

This came out of trying to make small images more readable.
It turns out that preserving less can sometimes work better.

DEV Community: taesoon jang