How to Make Pixel Art Not Blurry: Scaling, Export and Code

If you want to know how to make pixel art not blurry, start with this: something between your canvas and the screen is smoothing pixels that were meant to stay square. Pixel art is built from individual pixels as its only building block, so any step that blends neighboring pixels together turns crisp edges into soft mush. The fix is rarely about drawing differently. It is about finding the one setting that is quietly averaging your colors, and switching it off.

This guide walks through every place blur sneaks in: resizing in your art app, exporting, the browser, and game engines like Phaser, Three.js, Godot and Unity. Then it covers the hardest case, AI-generated “pixel art” that was never on a real grid to begin with.

Why does pixel art look blurry?

Every time an image is drawn at a size other than its native size, software has to decide what color each new pixel should be. That decision is called interpolation (or resampling). There are two broad approaches:

• Smoothing interpolation (bilinear, bicubic): each new pixel is a weighted average of several original pixels. Great for photos, terrible for pixel art, because a hard black outline next to a yellow fill becomes a muddy brown gradient.
• Nearest neighbor: each new pixel copies the single closest original pixel. A 1-pixel dot becomes a clean 3×3 block at 3x scale. No new colors appear.

Almost every image editor, browser and engine defaults to smoothing, because most images are photos. That is why the problem feels random: your art is fine, the defaults are not built for it.

Here are the usual culprits, roughly in the order people run into them:

1. Resizing with bilinear or bicubic in Photoshop, Krita, GIMP or Procreate.
2. Non-integer scale factors, like 2.5x or 150%, which make some pixels wider than others even with nearest neighbor.
3. Saving as JPEG, which compresses in blocks and smears hard edges.
4. Anti-aliasing while drawing: soft brushes and anti-aliased selections add in-between colors along edges.
5. Browser or engine texture filtering, which smooths the image when it is drawn larger than its native size.
6. Sub-pixel positions: a sprite drawn at x = 10.4 instead of 10 gets resampled across two screen pixels.
7. Fake pixel art from AI image models, where the “pixels” are uneven sizes and the colors blend at every edge.

Knowing how to make pixel art not blurry mostly means checking that list from top to bottom until the edges come back.

How to make pixel art not blurry when you resize it

Two rules cover almost every resizing problem:

1. Always use nearest neighbor.
2. Always scale by a whole number (200%, 300%, 400%, never 250%).

The second rule matters as much as the first. Scale a 16-pixel-wide sprite to 40 pixels (2.5x) with nearest neighbor and the result is technically sharp, but half the original pixels become 2 screen pixels wide and half become 3. Lines wobble and circles look lumpy. Scale it to 48 pixels (3x) and every pixel becomes an identical 3×3 block.

Here is where the setting lives in common apps:

App	Where to resize	Setting to choose
Photoshop	Image > Image Size	Resample: Nearest Neighbor (hard edges)
Krita	Image > Scale Image to New Size	Filter: Nearest Neighbour
GIMP	Image > Scale Image	Interpolation: None
Procreate	Transform tool	Interpolation: Nearest Neighbor
Aseprite	Sprite > Sprite Size, or the export resize option	Method: Nearest neighbor

How to make pixel art in Photoshop without blur

Photoshop has three separate traps. First, draw with the Pencil tool, not the Brush tool, because the Pencil paints hard-edged pixels with no soft falloff. Second, untick Anti-alias on the Magic Wand, Lasso and Marquee options, or every fill and selection edge picks up half-transparent pixels. Third, set Edit > Preferences > General > Image Interpolation to Nearest Neighbor, so Free Transform and rotations stop smoothing too. Image Size has its own resample dropdown, so pick Nearest Neighbor there as well.

How to make pixel art in Procreate without blur

Use a hard, non-textured brush at 1-pixel size on a small canvas, and when you move or scale a selection, switch the Transform tool’s interpolation to Nearest Neighbor before you drag. Procreate keeps that choice, but check it whenever a layer suddenly looks soft. When you export for sharing, export as PNG.

A worked example: picking a game resolution

The same whole-number rule applies to whole games. Say your art is drawn for a 320×180 base resolution. On a 1920×1080 monitor that is exactly 6x, so every art pixel becomes a crisp 6×6 block. On a 1366×768 laptop it is about 4.27x, which cannot be crisp. The clean answer is to render at 4x (1280×720) and fill the leftover space with black bars, rather than stretching to fill the screen. Base resolutions like 320×180 and 640×360 work well because they divide evenly into the most common 16:9 screens.

Is PNG or JPEG better for pixel art?

PNG, every time. PNG is lossless: each pixel keeps its exact color, so hard edges stay hard. JPEG is lossy and designed for photos. It splits the image into small blocks and discards detail the eye supposedly will not miss, which on pixel art shows up as smudges, color speckles and faint halos around outlines.

Practical export rules:

• Game assets: export PNG at native size (1x). Let the engine scale it with nearest-neighbor filtering. Shipping a pre-scaled 8x sprite wastes memory and makes collision maths awkward.
• Animations for sharing: GIF works because pixel art usually fits within its color limit. Lossless WebP is fine too.
• Posting online: upscale to a large whole-number size (for example 8x or 10x) with nearest neighbor before uploading. Social sites and chat apps often resize and recompress small images with smoothing, so a 64×64 upload can arrive blurry. A 640×640 upload survives much better.

A note on so-called “HD pixel art” upscalers: algorithms like hqx and xBR are filters built to enhance the look of hand-drawn 2D pixel art by guessing smooth curves between pixels. They are useful for emulators, but the result is a different style, not a sharper version of your art. If what you want is crisp, blocky pixels, nearest neighbor is the correct tool.

Fixing blur in the browser and in game engines

Your PNG can be perfect and still look soft on screen, because the renderer smooths it when it draws a sprite, the 2D bitmap composited into a game scene, at a larger size. This is the part of how to make pixel art not blurry that trips up most game developers, and the fix is usually one line.

Plain HTML and canvas

// CSS: stop the browser smoothing scaled images and canvases
// img.pixel, canvas { image-rendering: pixelated; }

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

// Turn off smoothing for drawImage calls
ctx.imageSmoothingEnabled = false;

const hero = new Image();
hero.src = "hero.png"; // 16x16 sprite
hero.onload = () => {
  const scale = 4; // whole number only
  const x = Math.round(50.4); // snap to whole pixels
  const y = Math.round(30.7);
  ctx.drawImage(hero, x, y, 16 * scale, 16 * scale);
};

Set imageSmoothingEnabled again after you resize the canvas, because changing a canvas’s width or height resets the context state.

Phaser

const config = {
  type: Phaser.AUTO,
  width: 320,
  height: 180,
  pixelArt: true,      // nearest-neighbor filtering, rounded pixels
  scale: {
    mode: Phaser.Scale.FIT,
    autoCenter: Phaser.Scale.CENTER_BOTH
  },
  scene: { preload, create }
};

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

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

new Phaser.Game(config);

pixelArt: true switches off antialiasing and rounds sprite positions, which fixes both filtering and sub-pixel blur. Note that FIT can still land on a non-integer scale; if you see uneven pixels, size the game container to an exact multiple of 320×180.

Three.js

import * as THREE from "three";

const texture = new THREE.TextureLoader().load("hero.png");
texture.magFilter = THREE.NearestFilter;
texture.minFilter = THREE.NearestFilter;
texture.generateMipmaps = false;
texture.colorSpace = THREE.SRGBColorSpace;

const material = new THREE.SpriteMaterial({ map: texture });
const sprite = new THREE.Sprite(material);

Godot (GDScript)

In Project Settings, set Rendering > Textures > Canvas Textures > Default Texture Filter to Nearest. Under Display > Window, set the stretch mode to viewport so the game renders at its base resolution and scales up as one image. For a single node, you can set it in code:

extends Sprite2D

func _ready() -> void:
    texture_filter = CanvasItem.TEXTURE_FILTER_NEAREST
    position = position.round()  # avoid sub-pixel placement

Unity

Select the sprite and, in the import settings, set Filter Mode to Point (no filter) and Compression to None, then click Apply. Use the same Pixels Per Unit value on every sprite so they share one pixel size, and add the Pixel Perfect Camera component so the camera snaps to whole pixels at an integer scale.

Sprite sheets and edge bleeding

A sprite sheet is a single image holding many frames or sprites, also called a texture atlas. If frames sit edge to edge with no gap and any filtering or mipmapping is active, the renderer can sample a sliver of the neighboring frame, which shows up as flickering lines or colored fringes. Keep point filtering on, and leave 1-2 pixels of padding between frames when you pack the sheet.

Turning blurry AI pixel art into real pixel art with Pixel Snap

Everything above assumes your source art is real pixel art: every pixel on a grid, a limited set of colors. AI image models usually do not give you that. They produce images that look pixelated from a distance, but zoom in and the “pixels” are different sizes, edges blend through dozens of in-between colors, and the background is a soft gradient. Nearest-neighbor scaling cannot rescue that, because the blur is baked into the pixels themselves. When the source is AI art, how to make pixel art not blurry becomes a conversion problem, not a scaling problem.

Pixel Snap is the Sorceress tool built for exactly this. It converts AI-generated images or videos into crisp, real pixel art: it cleans backgrounds, extracts video frames, snaps art to a true square-pixel grid, locks palettes, aligns animation frames, previews the result and exports game-ready sprite sheets. It needs a paid Sorceress membership (Pro). The Pixel Snap overview describes the workflow in three steps:

1. Start with AI art or video. Generate a character, upload art you already have, or pull frames from a video clip.
2. Clean and snap. Remove the background, choose palette limits, and force true pixel-grid output. Palette limits matter for crispness: fewer colors means no muddy in-between shades along edges.
3. Preview and export. Align frames, test the animation loop, then download sprite sheets and individual frames.

The output is native-size pixel art, so it drops straight into the engine settings from the previous section: point filtering, whole-number scale, PNG. If you need source art first, AI Image Gen puts the major image models in one panel.

For broader conversion jobs, True Pixel (also Pro) turns any image or video into pixel-art sprites and sprite sheets, with chroma keying, clean outlines, edge cleanup and batch processing built in. Batch processing helps when you have a whole folder of soft-edged assets to fix at once. You can compare both tools, and the rest of the suite, in the Sorceress tools guide.

Mistakes that bring the blur back

Once you know how to make pixel art not blurry, these are the slip-ups that undo it:

• Fixing the editor but not the engine. A perfect nearest-neighbor PNG still blurs if the texture import uses bilinear filtering. Check both ends.
• Resizing twice. Scaling 2x, then 1.5x, compounds errors. Always resize once, from the original 1x file, by a whole number.
• Editing the upscaled copy. Keep a 1x master file. Draw and fix there, and treat any enlarged version as a disposable export.
• Rotating sprites in-engine. Rotating pixel art by anything other than 90-degree steps resamples it. Draw rotated frames by hand or accept the jagged look on purpose.
• Smooth camera movement. Lerping a camera to fractional positions makes the whole scene shimmer. Round the camera position, or use your engine’s pixel-perfect camera option.
• Mixed pixel sizes. A 16×16 character beside a background drawn at a different density looks wrong even when both are sharp. Pick one pixel scale for the entire game.
• Screenshots in JPEG. Your game can be crisp and your store page blurry. Capture and upload screenshots as PNG.

If you are still learning the basics of drawing on a grid, the guide to making pixel art in Microsoft Paint covers the fundamentals with the simplest possible tool.

The workflow at a glance

Here is the whole answer to how to make pixel art not blurry, as a checklist you can run every time:

1. Draw hard-edged: pencil tool, anti-aliasing off on brushes and selections.
2. Keep a 1x master file at native resolution.
3. Resize with nearest neighbor, by whole numbers only.
4. Save as PNG, never JPEG.
5. Set point or nearest filtering in the browser or engine: image-rendering: pixelated, pixelArt: true, NearestFilter, Godot’s Nearest filter or Unity’s Point (no filter).
6. Snap positions and camera to whole pixels.
7. Pad your sprite sheets by a pixel or two.
8. For AI art, convert first: snap it to a true grid with a locked palette using Pixel Snap or True Pixel before it ever reaches the engine.

Work through that list in order and the blur has nowhere left to hide. Most of the time it is step 3 or step 5, and the fix takes seconds.