Skip to content

How to Turn a Photo Into Pixel Art

A mosaic filter makes a photograph look blocky. Pixel art is something else — a picture that genuinely has very few pixels, each one carrying real weight. Getting there means throwing resolution away on purpose.

Updated September 2026

The short answer: Shrink the image to a small grid so the browser averages fine detail into single pixels, reduce the number of colours, then scale it back up with smoothing turned off so every pixel stays a hard-edged square. Start at a grid 64 pixels wide, crop tightly to one subject first, and save as PNG — JPEG destroys hard edges.

The three steps that make it work

Skip step one and you get a mosaic filter. Skip step three and you get a tiny image. Skip step two and you get blocky pixels with modern colour — a legitimate look, but not a retro one.

  1. Downscale. Shrink the picture to the grid size you want — 64 pixels wide, say. The averaging is what turns detail into single meaningful pixels.
  2. Quantise. Reduce how many colours are allowed. This is what makes the result read as retro rather than as a small photo.
  3. Upscale with smoothing off. Blow it back up to a usable size using nearest-neighbour scaling so each pixel becomes a crisp square rather than a blur.

Choosing the grid size

At 64 pixels wide you have roughly 4,000 pixels in total to tell the whole story. That is about what a postage stamp shows at arm's length, and it is why the choice of photo matters more than any setting.

Grid widthReads asWorks for
16-24Extremely abstractIcons, logos, one bold shape
32Classic chunky spriteSimple subjects with strong silhouettes
48-64Recognisable but clearly pixelatedPortraits, pets, most photos — start here
96Detailed pixel artScenes with more than one element
128+A slightly blocky photographWhen you want a hint of the style, not the style

Pick a photo that can survive it

Crop before converting, not after. A tight crop is the single most effective thing you can do, because it changes how much of the tiny pixel budget lands on what you actually care about.

  • One clear subject. Two competing subjects at 64 pixels become one blur.
  • A simple background. Every pixel spent on clutter is a pixel not spent on the subject.
  • Strong contrast between subject and background — in brightness, not just colour.
  • Side or back lighting, so the shape reads when the detail has gone.
  • No fine repeating patterns. Stripes and small textures alias badly at low resolution.

Why the colour limit is the retro part

Old hardware could not show many colours at once, and artists built a whole visual language inside that constraint. The original Game Boy managed four shades of green. The NES could display 25 colours on screen from a fixed palette of 54. Sprites were built from three or four carefully chosen shades per object, with dithering used to fake anything in between.

Dropping the colours-per-channel setting to four or six reproduces a lot of that feeling, because it forces the same kind of hard tonal steps. Leaving it high gives you blocky pixels in full colour, which looks modern rather than nostalgic.

Raise the contrast and saturation

Both survive downscaling better than fine texture does, and both help the subject separate from the background once detail is gone. Pushing saturation somewhat past natural is normal for this style — the quantisation step then snaps those pushed colours to distinct palette entries rather than muddy neighbours.

Always save as PNG

Pixel art is the worst possible input for JPEG. JPEG compresses by discarding high-frequency detail, and an image made entirely of hard edges between flat colours is nothing but high-frequency detail. You get grey ringing around every single square, immediately visible and impossible to remove.

PNG stores every pixel exactly, and because the image is large blocks of identical colour its compression works extremely well. A pixel-art PNG is frequently smaller than the JPG would have been.

Where it is useful beyond the aesthetic

  • Placeholder art while a game is prototyped.
  • Avatars and profile pictures that stay legible at tiny sizes.
  • Anonymising a face in a photograph — though for genuine privacy, crop or black out rather than pixelate, because heavy pixelation can sometimes be reversed.
  • Cross-stitch and bead patterns, where each pixel becomes one stitch or bead.
  • Reducing a photo to a palette before turning it into a physical craft.

Frequently asked questions

What grid size should I use for a face?

Start at 64 pixels wide. A face stays recognisable at 48 and clearly readable at 64 to 96. Below 32 you are into pure abstraction, which can be a deliberate choice but will not look like the person.

Why does my pixel art look like mush?

Too much in the frame for the number of pixels available. Crop tightly to one subject, raise the contrast, and prefer photos where the subject is clearly brighter or darker than the background. If it still fails, the photo is too busy for the style.

Is pixelating a face enough to anonymise it?

Not reliably. Heavy pixelation can sometimes be partially reversed, particularly when there is other footage to compare against. If the point is privacy rather than style, crop the face out or cover it with a solid block.

Should I save pixel art as PNG or JPG?

PNG, always. Pixel art is nothing but hard edges between flat colours, which is exactly what JPEG handles worst — you get grey ringing around every square. PNG stores it exactly and compresses flat blocks extremely well, so the file is usually smaller anyway.

What is the difference between pixel art and a mosaic filter?

A mosaic filter leaves the image at full resolution and draws big squares over it. Pixel art genuinely reduces the resolution first, so each pixel is a real, deliberate decision, and then scales up without smoothing. The second looks like pixel art; the first looks like a filter.

Can I use this for cross-stitch or bead patterns?

Yes, and it is a good fit — each pixel becomes one stitch or bead. Use a small grid matching your intended stitch count and a low colour limit matching the thread colours you actually have.

Keep reading

Image Optimization Tips

Get weekly tips on image formats, compression, and web performance.

No spam, unsubscribe anytime. We respect your privacy.