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):
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.
Top comments (0)