How to Make Pixel Art Bigger Without Blurring in Any App

Every pixel artist hits this wall eventually: you go looking for how to make pixel art bigger without blurry edges because you hit “Image Size”, typed 400 percent, and your crisp 32 × 32 knight came out looking like a soft watercolour. The software is not broken. It is doing exactly what it was built to do for photographs, and pixel art needs a different set of rules. This guide explains why the blur happens, gives the exact settings in the editors most indie developers use, shows how to keep sprites sharp inside a game engine, and covers what to do when the art is already smeared.

Why pixel art goes blurry when you scale it

Pixel art is an image built deliberately, one pixel at a time, where each square is a design decision. When you make an image bigger, the editor has to invent new pixels to fill the extra space. The method it uses to invent them is called interpolation (or resampling).

Most editors default to bilinear or bicubic interpolation. Both look at neighbouring pixels and calculate blended, in-between colours, so a black outline next to a red cape becomes a band of dark reds and browns. On a photo that blending hides jagged edges and looks natural. On pixel art it destroys the one thing that makes the style work: hard, intentional edges and a tight palette.

The fix is nearest-neighbor interpolation. Instead of blending, it copies the colour of the closest original pixel. Scale a sprite up 4x with nearest neighbor and every original pixel becomes a clean 4 × 4 block of exactly the same colour. No new colours, no soft edges.

There is a second, quieter cause of ugly scaling: non-integer scale factors. If you scale by 2.5x, some original pixels become 2 pixels wide and others become 3 pixels wide, because a screen cannot draw half a pixel. The art does not look blurry exactly, but it looks lumpy and uneven, and in motion it shimmers.

How to make pixel art bigger without blurry results

Every editor and engine uses different menus, but the rules are the same everywhere. Follow these four and your art stays sharp at any size.

1. Use nearest-neighbor interpolation. It may be labelled “Nearest Neighbor”, “Nearest-neighbour”, “Hard edges”, “None” or “Point” depending on the app.
2. Scale by whole numbers. 2x, 3x, 4x, 5x, 10x. A 32 × 32 sprite should become 64, 96, 128 or 320 pixels wide, never 100.
3. Scale once, from the original. Keep your small master file and export enlarged copies from it. Repeatedly resizing an already-resized file stacks small errors.
4. Save as PNG. PNG is lossless. JPEG compression adds noise and colour fringing around hard edges, which undoes all the care you just took.

A quick way to check the maths: divide your target size by the original size. If the answer is a whole number, you are fine. If it is not, either change the target size or scale to the nearest whole multiple and pad the rest of the canvas with a background colour.

Resizing pixel art in Photoshop, Procreate, Aseprite, GIMP and others

Here are the settings in the editors that come up most often. In every case, start from your original small file.

Photoshop

Open Image > Image Size. Tick Resample, then change the dropdown to Nearest Neighbor (hard edges). Switch the units to Percent and enter 200, 300, 400 and so on. If you scale layers with Free Transform instead, Photoshop uses the default interpolation set in Preferences > General > Image Interpolation, so set that to Nearest Neighbor too, or transforms will quietly blur your sprites.

If you are learning how to make pixel art in Photoshop from scratch, also switch your brush to the Pencil tool, which paints hard-edged pixels without anti-aliasing.

Procreate

Select the layer, tap the Transform tool, and in the bottom toolbar set Interpolation to Nearest Neighbor before you resize. Type an exact percentage rather than dragging, so you land on a whole-number scale. Export with Share > PNG.

Aseprite

Use Sprite > Sprite Size and make sure the method is set to Nearest-neighbor. For one-off exports you do not even need to resize the file: the export dialog has a resize option, so you can keep working at native size and export a 4x copy. If you still see blur, check that the sprite is not being converted through a colour profile on the way out; setting the profile to none before resizing clears up most odd results.

GIMP

Go to Image > Scale Image and set Interpolation to None. That is GIMP’s name for nearest neighbor.

Paint.NET and Affinity Photo

In Paint.NET, use Image > Resize and pick Nearest Neighbor under Resampling. In Affinity Photo, open the document resize dialog and choose Nearest Neighbour as the resampling method.

Editor	Where to resize	Setting to choose
Photoshop	Image > Image Size	Nearest Neighbor (hard edges)
Procreate	Transform tool toolbar	Interpolation: Nearest Neighbor
Aseprite	Sprite > Sprite Size, or export resize	Nearest-neighbor
GIMP	Image > Scale Image	Interpolation: None
Paint.NET	Image > Resize	Nearest Neighbor
Affinity Photo	Resize Document	Nearest Neighbour

A worked example

Say you have a 48 × 48 character sprite and you need a 384 × 384 version for a store page. 384 ÷ 48 = 8, a whole number, so scale by 800 percent with nearest neighbor. Now say the store wants 400 × 400. 400 ÷ 48 is about 8.33, which would produce uneven pixels. The clean answer is to scale 8x to 384 × 384, then enlarge the canvas (not the image) to 400 × 400 and fill the 8-pixel border with your background colour. The character stays perfectly crisp and the file still meets the size requirement.

Keeping pixel art sharp inside your game

Getting a clean PNG is only half the job. Game engines and browsers scale textures again when they draw them, and most default to smooth filtering. In game development you usually keep sprites at their native size, often packed into a sprite sheet or texture atlas (one image holding many smaller frames), and let the renderer enlarge them. That renderer needs to use nearest filtering too.

Browsers and plain HTML canvas

For images or a canvas element on a web page, one CSS property does the work:

img.pixel, canvas#game {
  image-rendering: pixelated;
}

If you draw to a 2D canvas with JavaScript, also turn off smoothing on the context:

const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");
ctx.imageSmoothingEnabled = false;

const sprite = new Image();
sprite.src = "knight.png"; // 32x32 original
sprite.onload = () => {
  // Draw at 4x: 128x128, every pixel a crisp 4x4 block
  ctx.drawImage(sprite, 0, 0, 128, 128);
};

Phaser

Phaser has a single config flag that switches the renderer to pixel-friendly defaults, including nearest filtering and rounding sprite positions to whole pixels:

const config = {
  type: Phaser.AUTO,
  width: 320,
  height: 180,
  pixelArt: true,
  scale: {
    mode: Phaser.Scale.FIT,
    autoCenter: Phaser.Scale.CENTER_BOTH
  },
  scene: { preload, create }
};

function preload() {
  this.load.image("knight", "knight.png");
}

function create() {
  this.add.image(160, 90, "knight");
}

new Phaser.Game(config);

Godot

In Godot 4, open Project Settings > Rendering > Textures and set Canvas Textures > Default Texture Filter to Nearest. You can also override it per node:

extends Sprite2D

func _ready():
    texture_filter = CanvasItem.TEXTURE_FILTER_NEAREST
    scale = Vector2(4, 4)  # whole-number scale keeps pixels square

Pick a base resolution that divides cleanly

The same whole-number rule applies to the whole screen. A 320 × 180 game scales exactly 6x to 1920 × 1080 and 4x to 1280 × 720. Stretch it to 1366 × 768 and you get a factor of about 4.27, which forces uneven pixels. Monitors behave the same way: as the Wikipedia article on LCDs notes, running a flat panel at a non-native resolution introduces blurriness and jagged edges, while 1:1 mapping keeps things sharp but may not fill the screen. Many pixel-art games solve this by scaling to the largest whole multiple that fits and letterboxing the rest.

Fixing pixel art that is already blurry

Everything above assumes your source file is clean. Often it is not. Maybe someone resized it with bilinear filtering years ago and the original is gone, or the art came out of an AI image model. Image generators can produce something that looks like pixel art at a glance but has “pixels” of slightly different sizes, soft anti-aliased edges, dozens of near-identical colours and no consistent grid. Scaling that with nearest neighbor just gives you a bigger mess.

If you know the original was upscaled by a whole number and nothing else touched it, you can recover it: downscale by the same factor with nearest neighbor, check that the result looks right, and save that as your new master. If the art was blurred or never had a real grid, you need to rebuild the grid.

Some people reach for pixel-art scaling algorithms such as the hqx and xBR families, filters designed to smooth hand-drawn pixel art when enlarging it. They are useful for emulators and for a soft, rounded look, but they produce a different style, not a sharper version of your original, and they still expect clean input.

Using Pixel Snap to rebuild the pixel grid

This is the job Pixel Snap exists for in Sorceress. It converts AI-generated images or videos into crisp, real pixel art: it snaps the art to a true square-pixel grid, locks the palette, and cleans the background. Once the art sits on a real grid with a fixed palette, every rule in this article works on it, and you can scale it 2x, 4x or 8x with nearest neighbor and get perfectly hard edges.

The workflow follows three steps:

1. Start with AI art or video. Generate a character, upload existing art, or pull frames from a video clip.
2. Clean and snap. Remove the background, choose palette limits, and force true pixel-grid output.
3. Preview and export. Align animation frames, test the loop, then download sprite sheets and individual frames.

The frame alignment step matters more than it sounds. When each frame of an animation is snapped separately, a character can drift a pixel left or right between frames and appear to jitter in-game. Aligning the frames before export keeps the loop steady. You can read more on the Pixel Snap overview. It needs a paid Sorceress membership (Pro).

Converting regular images with True Pixel

If your starting point is not pixel art at all, say a painted character, a photo reference or a video clip, True Pixel converts any image or video into pixel-art sprites and sprite sheets. It has chroma keying (removing a solid-colour background such as a green screen), clean outlines, edge cleanup and batch processing built in, so you can push a whole folder of frames through the same settings. True Pixel is also a Pro tool.

Both tools fit at the front of a wider pipeline: generate a character in AI Image Gen, or animate one with Auto-Sprite v2, then turn the output into grid-true pixel art you can scale freely. The Sorceress tools guide shows how the rest of the suite connects.

Common mistakes that bring the blur back

• Fixing the resize but not the transform tool. In Photoshop especially, Image Size and Free Transform use separate interpolation settings. Set both.
• Saving as JPEG. Even at high quality, JPEG smudges hard pixel edges. Use PNG for every sprite, tile and screenshot of pixel art.
• Uploading to sites that recompress. Some social platforms convert or shrink images. Upload a version scaled 4x or more so any resizing on their end has less effect.
• Scaling in the editor and the engine. If you export a 4x sprite and then scale it again in the engine with filtering on, you get blur on top of your clean blocks. Choose one place to scale, usually the engine, and keep assets at native size.
• Odd camera zoom or sub-pixel movement. A camera zoom of 2.5 or a sprite at x = 10.4 makes pixels uneven. Use whole-number zoom levels and enable pixel rounding (Phaser’s pixelArt flag does this).
• Editing a scaled copy. If you paint on the 4x version, your new strokes will not line up with the 4 × 4 blocks. Always edit the small master.
• Confusing DPI with size. Changing the DPI field without resampling changes print metadata, not the number of pixels. For screens and games, only pixel dimensions matter.

The workflow at a glance

1. Keep a native-size master file (for example 32 × 32 per character) and never edit scaled copies.
2. When you need a bigger image, resize with nearest neighbor at a whole-number factor: 2x, 3x, 4x and up.
3. If the target size is not a clean multiple, scale to the nearest multiple below it and pad the canvas.
4. Save everything as PNG.
5. In the game, set texture filtering to nearest (pixelArt: true in Phaser, Nearest in Godot, image-rendering: pixelated on the web) and choose a base resolution that divides evenly into common screens.
6. If the art is already blurry or came from an AI model with no real grid, rebuild it first with Pixel Snap or convert it with True Pixel, then scale.

Get these steps right once, set them as defaults in your editor and engine, and you will never have to think about blurry sprites again. The pixels you placed are the pixels your players see, just bigger.