Skip to content

How to Resize Pixel Art Without Blur

Why normal resizing smears pixel art, and how to scale it with nearest-neighbor and whole-number factors in our tool, in image editors and on the web.

Updated PixelConvertor

Why resizing blurs pixel art

When an image is made larger, the program has to invent the new pixels. Most editors, browsers and phone apps use bilinear or bicubic interpolation, which gives each new pixel a weighted average of the original pixels around it. On a photo that looks smooth and natural. Pixel art is made of hard edges between blocks of flat color, and averaging turns every one of those edges into a soft ramp.

Smooth (bilinear) 4× enlargement

A 64 × 64 pixel mushroom sprite enlarged 4× with smooth bilinear scaling, which blurs the pixel edges

Nearest-neighbor 4× (this tool)

The same 64 × 64 mushroom sprite enlarged 4× with nearest-neighbor scaling: every pixel is a sharp 4 × 4 square
A 64 × 64 sprite enlarged to 256 × 256 two ways. Bilinear scaling (left) blends neighboring pixels into a soft blur. Nearest-neighbor (right) turns each pixel into a sharp 4 × 4 square.

Use nearest-neighbor scaling

Nearest-neighbor interpolation, also called point sampling, gives each new pixel the exact color of the closest original pixel. Nothing is averaged, so no new colors appear and every edge stays hard. Enlarged by 4, each original pixel simply becomes a 4 × 4 square.

Scale by whole numbers

Nearest-neighbor only looks perfect at whole-number factors: 2×, 3×, 4×, 8× and so on. At 1.5× there is no way to split one pixel into one and a half, so some pixels become one pixel wide and others two. The picture stays sharp, but lines that should be even look lumpy. If you need a specific final size, pick the largest whole-number factor that fits and add a border, or crop.

Resize pixel art with our tool

  1. Open Resize Pixel Art and add your sprites or pixel art images.
  2. Leave pixel size at 1 and bit depth at 24-bit, the defaults on that page. Your pixels and colors are then kept exactly as they are.
  3. Pick an Output size of 1×, 2×, 4×, 8× or 16×.
  4. Download the PNG. With several files you get them all in one ZIP.

The result can be up to 8,192 pixels on its longest side. The tool can also make a GIF or a sprite sheet from several images at the same scale.

Resize pixel art in an image editor

Most editors let you choose the resampling method when you resize.

  • In Photoshop, open Image Size and set Resample to Nearest Neighbor (hard edges).
  • In GIMP, open Scale Image and set Interpolation to None.

Enter the new size as an exact multiple of the old one, such as 400% or 800%.

Show pixel art sharply on a website

Even a perfectly scaled file is blurred again if the browser has to stretch it. Tell the browser to use nearest-neighbor for that image:

img.pixel-art {
  image-rendering: pixelated;
}

All current major browsers support image-rendering: pixelated. Display the image at a whole-number multiple of its real size, for example a 32 × 32 sprite at 128 × 128 CSS pixels, so every pixel gets the same number of screen pixels. When you draw pixel art on a canvas, set imageSmoothingEnabled = false on its 2D context before calling drawImage.

Making pixel art smaller

Shrinking pixel art removes pixels, so it always changes the drawing. The one exception is art that was enlarged by a whole number earlier. A sprite saved at 4× can go back to its original size without any loss: convert it with pixel size 4 and 24-bit color in any of our pixel art tools, and each 4 × 4 block becomes one pixel again. The low-res image converter does this kind of downscaling for regular images too.

If you are making new pixel art from a photo, the photo to pixel art guide covers pixel size and output size, and the pixel art sizes guide lists common sprite and canvas sizes.

Scale pixel art

Frequently Asked Questions

How do I enlarge pixel art without it getting blurry?

Use nearest-neighbor scaling and a whole-number factor such as 2×, 4× or 8×. Nearest-neighbor copies each pixel into a square of identical pixels instead of blending neighbors, so the edges stay hard. The Resize Pixel Art tool does both in your browser.

Why does my pixel art look blurry when I resize it?

Most editors, browsers and apps resize with bilinear or bicubic interpolation, which averages neighboring pixels. That smooths photos nicely but turns the hard edges of pixel art into soft gradients.

Why should the scale factor be a whole number?

At 2×, 3× or 4× every original pixel becomes a square of the same size. At a factor like 1.5× some pixels become one pixel wide and others two, so lines look uneven even though nothing is blurred.

How do I stop a browser from blurring pixel art on a website?

Add the CSS property image-rendering: pixelated to the image. The browser then uses nearest-neighbor when it shows the image larger than its real size. For a canvas, set imageSmoothingEnabled to false on the 2D context.

Can I make pixel art smaller without ruining it?

Shrinking removes pixels, so the drawing changes. The exception is art that was enlarged by a whole number: a sprite saved at 4× can go back to 1× exactly with pixel size 4 in our converters, because every 4 × 4 block is one solid color.