How to convert an image to pixel art with crisp edges

Choose a pixel grid, palette and export scale for a crisp result. Learn how image resizing, dithering and display settings affect pixel-art edges.

By ToolsNow · Published 31 July 2026

For crisp pixel-art edges, use a small working grid and enlarge the result by a whole-number scale without smoothing. A clear subject and a limited palette also make the picture easier to recognise.

In the pixel art converter, try a 64 × 64 grid and 16 colours as a starting point, then adjust for your image. Check both the saved file and the app where it will be displayed.

The blur has three possible sources

Interpolation during the downscale. When you shrink an image the software has to decide what colour each new pixel should be. Bilinear and Lanczos resampling average the source pixels falling into each destination pixel, which is exactly right for photographs and exactly wrong here. Averaging across an edge invents a colour that was on neither side of it. Nearest neighbour picks one source pixel and copies it, so every output colour existed in the source.

Interpolation during the upscale. This is the one that catches people out, because the file is fine and it’s the display doing the blurring. A 64 × 64 PNG shown at 512 px in a browser, a chat app or a store listing gets smoothed on the way up unless something explicitly says not to. Your image is sharp. Nobody ever sees it that way.

Anti-aliasing carried over from the source. Text and graphics in the original already have carefully blended edge pixels. Shrink them and those half-tones survive as isolated muddy pixels belonging to neither shape.

Nearest neighbour, and the half-pixel detail

Nearest-neighbour sampling means: for each destination pixel, work out where its centre lands in the source image and copy whatever pixel is sitting there.

That word centre is doing real work. It’s tempting to sample at each destination pixel’s top-left corner, which is a line of code shorter. What you get is an image shifted up and to the left by half a destination pixel. Invisible at photographic sizes; at 16 × 16, a shift of about 3% of the whole picture, which is enough to lose a row of an eye or a highlight.

For upscaling, stick to whole-number multiples. At 4× every source pixel becomes a clean 4 × 4 block and the operation is exactly lossless. At 3.7× some source pixels become 4 pixels wide and others 3, so a regular grid picks up an irregular one. That’s the wobble that makes an otherwise clean sprite look wrong without it being obvious why.

Palette reduction is where the style comes from

Resolution is only half of it. What makes pixel art read as pixel art is a small, deliberate palette, and it’s the part most conversions skip.

Reducing colours means choosing a set and mapping every pixel to its nearest member. Two questions decide the quality.

How is the set chosen? Median cut, introduced by Paul Heckbert in 1982, repeatedly splits the colour space along its widest axis at the median, so each final box holds a similar number of pixels. It’s deterministic, meaning the same image always gives you the same palette, which matters when you re-run a job expecting your previous result back.

How is “nearest” measured? Straight-line distance in RGB looks obvious and disagrees with the eye, because RGB isn’t perceptually uniform: a distance of 30 in one region is a barely visible shift and in another it’s an obvious one. Comparing in CIELAB, which was designed so equal distances look roughly equally different, gives noticeably better matches. It’s why two tools with the same palette size can produce visibly different pictures.

A practical range is 8 to 32 colours. Below 8, photographs turn to mush. Above 32, you lose the graphic quality you reduced the palette for in the first place.

Dithering, and when to leave it off

Cut a gradient to 8 colours and you get bands. Dithering trades those bands for texture, spreading each pixel’s rounding error into its neighbours so a region between two palette colours becomes a fine mixture of both.

Floyd–Steinberg conserves all the error and keeps the most gradient detail. Best default for photographs.
Atkinson discards a quarter of the error outright, so you get crisper, higher-contrast output with blown highlights. The early Macintosh look.
Bayer (ordered) adds a fixed repeating pattern instead of diffusing, so the texture is a regular crosshatch that reads as unmistakably retro.

Leave dithering off for logos, icons and line art, where flat colour is the point and dithering just adds speckle. Turn it on for photographs, skies and skin.

There’s a genuine trade-off here: dithering fights compression. Flat regions compress extremely well in PNG, while a dithered region is high-frequency noise, and files can come out several times larger.

Transparency should be all or nothing

Pixel art has no use for partial transparency. A pixel that’s 40% opaque is anti-aliasing, which is the thing you’re trying to remove. Force alpha fully on or fully off at a mid-point threshold. Otherwise a sprite composited onto a different background shows a halo of half-transparent pixels still carrying the old background’s colour.

Why your photo still doesn’t look like pixel art

Now the part that isn’t a settings problem.

Hand-drawn pixel art is placed. An artist decides each pixel, cleans outlines so they read as continuous lines, exaggerates features that would otherwise disappear, and picks colours that stay distinguishable at a tiny size. A lot of the craft is deciding what to leave out.

Conversion can’t do any of that. It faithfully samples what’s there, including all the detail that no longer fits. A face at 32 × 32 has about a dozen pixels for the eyes, nose and mouth combined. An artist would drop the nose entirely and enlarge the eyes; the algorithm keeps a fair share of all three and hands you a smudge.

So use it for what it’s good at:

a base to paint over, which is how plenty of artists do start
palette studies, to see how an image survives a given colour set
avatars and textures, where suggestion is enough
backgrounds and tiles, which tolerate detail loss far better than characters do

And help it along. Crop tightly to one subject, raise contrast before converting, and start larger than you think you need (64 or 128), dropping down only once you can see what’s being lost.

A workable procedure

Crop to the subject, hard. Empty background is wasted resolution.
Raise contrast and saturation a little, since palette reduction flattens both.
Convert at 64 × 64 with nearest neighbour and see what survives.
Reduce to 16 colours. Try the image’s own palette before a fixed one.
Add Floyd–Steinberg only if you can see banding.
Drop to 32 × 32 only if the subject still reads at that size.
Export at 8× or 16× for anywhere you can’t control the display.

What “export at 8×” is really fixing

Almost every “my pixel art is blurry when I post it” problem is this one. The file is correct. The platform resizes it with smoothing.

You can’t control the smoothing, so remove the need for it: export at a size close to how it’ll actually be displayed. A 64 × 64 image exported at 8× is a 512 × 512 PNG made of hard-edged 8 × 8 blocks, and scaling that by a few percent does no visible damage. On your own web pages the direct fix is the CSS image-rendering: pixelated, which tells the browser to use nearest neighbour when it scales up.

Sources and further reading

Last reviewed 31 July 2026.