How to Make Pixel Art From an Image: 3 Methods for Sprites

Learning how to make pixel art from an image comes down to three moves: shrink the picture onto a small grid, cut its colours down to a tight palette, and clean up what the shrink got wrong. Quick filters do the first move and skip the rest, which is why so many converted images look like blurry mosaics rather than game sprites. This guide covers the theory in plain language, then gives you three working methods: an image editor like Photoshop, a free browser script you can run yourself, and the Sorceress tools built for turning images into sprite sheets.

What “pixel art from an image” actually means

Pixel art is digital art where every pixel is a deliberate building block, usually at a low resolution and with a small colour count. The Wikipedia entry on pixel art makes a useful distinction: a low-resolution photo is made of pixels too, but it only counts as pixel art when the pixels are placed with intent. That is the whole challenge of converting an image. A converter can give you visible pixels in seconds. Intent is what you add afterwards.

A few terms you will see throughout:

• Sprite: a 2D image, like a character or item, drawn on top of a game scene.
• Sprite sheet: one image that holds many sprites or animation frames in a grid, so the game loads a single file. In 3D graphics the same idea is called a texture atlas.
• Palette: the fixed list of colours your art is allowed to use, often 4 to 32 colours.
• Nearest-neighbour resampling: a resize method that copies the closest pixel instead of blending neighbours, so edges stay hard instead of going soft.
• Mixels: pixels of different sizes in the same image, the most common sign of a sloppy conversion.

Why do quick filters disappoint? A photo has thousands of colours and soft gradients. When you shrink it, the resize blends colours together, so you get muddy in-between shades along every edge. A good conversion fights that blending with palette limits and manual cleanup.

How to make pixel art from an image in five steps

Every method in this guide, from a free script to a dedicated sprite tool, runs the same pipeline. Understand it once and you can make pixel art from an image in any software.

1. Pick and crop the source. Simple subjects with clear silhouettes convert best: a character on a plain background, a single object, a face with strong lighting. Crop tight. Busy backgrounds turn into noise at low resolution, so remove them first if you can.
2. Downscale to your target size. Decide how big the final sprite is in real pixels: 16, 32, 48 or 64 pixels wide is typical for game characters. A 1,000-pixel photo becomes a 64-pixel image, so most fine detail disappears. That is expected.
3. Limit the palette. Reduce the image to a small set of colours. Fewer colours means cleaner clusters and less noise. Retro palettes like the four greens of early handhelds give a strong look instantly.
4. Clean up by hand. Fix the eyes, the outline, and any single stray pixels. Remove “jaggies” (stair-step lines with uneven steps) and add a one-pixel outline if the sprite needs to read against busy backgrounds.
5. Upscale by a whole number for display. Scale up 4x, 8x or 10x with nearest-neighbour so each art pixel becomes a crisp square block. Never upscale by odd amounts like 3.5x, which creates mixels.

Step 4 is the one that separates real pixel art from a pixelate filter. Even with automation, plan to spend a few minutes on the face and silhouette of every character.

Method 1: convert an image in Photoshop or another editor

If you already own an image editor, this is the most hands-on way to make pixel art from an image. Here is how to make pixel art in Photoshop specifically, with notes for other apps.

Photoshop steps

1. Open the image and crop to your subject with the Crop tool.
2. Go to Image > Image Size. Set the width to your target, such as 64 pixels, keep proportions linked, and set Resample to Nearest Neighbor (hard edges). If the result looks too harsh, undo and try Bicubic for the shrink only, then rely on the palette step to sharpen colours.
3. Go to Image > Mode > Indexed Color. Choose a local palette with a small number of colours (start with 16) and turn dithering off for a clean look, or set it to a low amount if you want a retro texture.
4. Zoom in to 800% or more. Use the Pencil tool (not the Brush, which anti-aliases) at 1 pixel to fix outlines and features. Use the Eraser in Pencil mode for the same reason.
5. Switch back to RGB Color if you need layers or transparency, then export a PNG. For a preview or social image, use Image Size again with Nearest Neighbor at 400% or 800%.

Other editors

The same steps work in GIMP (Scale Image with Interpolation set to None, then Image > Mode > Indexed), Aseprite, and most paint apps. For drawing apps that lack a palette reduction step, do the downscale on a small canvas, then pick colours by hand from a limited swatch set. If you work in Clip Studio Paint, our guide on pixel art in Clip Studio Paint covers its specific settings.

A note on Minecraft and physical builds

If you want to know how to make a Minecraft pixel art from a picture, the workflow is identical, with one twist: each pixel becomes one block, so your palette should match blocks you actually have, such as wool or concrete colours. A 32 by 32 image is already 1,024 blocks, so start small. For paper, bead or paint versions, see how to make pixel art in real life.

Method 2: a free browser script you control

If you code, or you want to understand exactly what converters do under the hood, this short JavaScript file does the full downscale, palette and upscale pipeline in about 50 lines. It runs in any browser with no install. Save it next to an HTML page containing <input type="file" id="file"> and <canvas id="out"></canvas>.

// pixelate.js: image -> limited-palette pixel art, upscaled crisply
const PALETTE = [
  [15, 56, 15], [48, 98, 48], [139, 172, 15], [155, 188, 15]
]; // a classic 4-colour green palette; swap in your own

function nearestColour(r, g, b) {
  let best = PALETTE[0];
  let bestDist = Infinity;
  for (const c of PALETTE) {
    const d = (r - c[0]) ** 2 + (g - c[1]) ** 2 + (b - c[2]) ** 2;
    if (d < bestDist) { bestDist = d; best = c; }
  }
  return best;
}

function pixelate(img, targetWidth, scale) {
  const w = targetWidth;
  const h = Math.round(img.height * (w / img.width));

  // 1. Downscale onto a tiny canvas
  const small = document.createElement("canvas");
  small.width = w;
  small.height = h;
  const sctx = small.getContext("2d");
  sctx.drawImage(img, 0, 0, w, h);

  // 2. Snap every pixel to the palette, with hard transparency
  const data = sctx.getImageData(0, 0, w, h);
  const p = data.data;
  for (let i = 0; i < p.length; i += 4) {
    if (p[i + 3] < 128) { p[i + 3] = 0; continue; }
    const [r, g, b] = nearestColour(p[i], p[i + 1], p[i + 2]);
    p[i] = r; p[i + 1] = g; p[i + 2] = b; p[i + 3] = 255;
  }
  sctx.putImageData(data, 0, 0);

  // 3. Upscale by a whole number with smoothing off
  const out = document.getElementById("out");
  out.width = w * scale;
  out.height = h * scale;
  const octx = out.getContext("2d");
  octx.imageSmoothingEnabled = false;
  octx.drawImage(small, 0, 0, out.width, out.height);
}

document.getElementById("file").addEventListener("change", (e) => {
  const file = e.target.files[0];
  if (!file) return;
  const img = new Image();
  img.onload = () => pixelate(img, 64, 8);
  img.src = URL.createObjectURL(file);
});

The key line is imageSmoothingEnabled = false. Browsers and game engines blend texture colours by default when scaling, a process called texture filtering. That blending is great for photos and terrible for pixel art. The same rule applies in your game: in Phaser, add pixelArt: true to the game config so sprites render crisp:

const config = {
  type: Phaser.AUTO,
  width: 320,
  height: 180,
  pixelArt: true, // nearest-neighbour filtering for every texture
  scale: { mode: Phaser.Scale.FIT, zoom: 4 },
  scene: { preload, create }
};
new Phaser.Game(config);

This script is honest about its limits. It does no background removal, no outline cleanup and no edge repair, so you still do step 4 by hand. It is a great way to learn how to make pixel art from an image, and a fine tool for one-off pictures. For a batch of game sprites, the manual cleanup adds up fast.

Method 3: True Pixel and Pixel Snap in Sorceress

When the image is headed into a game, the job is bigger than pixelating: you need a transparent background, clean outlines, consistent sizes and often a whole sheet of frames. That is the gap True Pixel fills. It converts any image or video into pixel-art sprites and sprite sheets, with chroma keying (removing a solid background colour), clean outlines, edge cleanup and batch processing built in. Those are exactly the steps the free script leaves to you. True Pixel needs a paid Sorceress membership; the True Pixel overview shows what it produces.

How it maps onto the five-step pipeline:

• Crop and clean: chroma keying strips the background so your sprite sits on transparency.
• Downscale and palette: the image is converted to pixel art rather than just blurred into blocks.
• Cleanup: clean outlines and edge cleanup handle the stray, half-blended pixels that make filtered images look muddy.
• Scale: batch processing lets you run a whole folder of items, enemies or portraits through the same treatment, which keeps a game’s art consistent.
• Video: because it accepts video too, a clip of a character moving can become an animated sprite sheet instead of a single still.

When your source is AI art: Pixel Snap

AI image generators can produce images that look like pixel art at a glance, but zoom in and the “pixels” are uneven, slightly blurred and full of extra colours. Pixel Snap is built for that case. 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. The flow is three stages: start with AI art or video (generate a character, upload art or pull frames from video), clean and snap (remove the background, choose palette limits and force true pixel-grid output), then preview and export (align frames, test the loop and download sprite sheets and frames). Pixel Snap also needs a paid membership.

A worked example: say you have a painted knight from AI Image Gen and you want a 4-frame walk cycle. Generate or upload the knight in Pixel Snap, remove the background, set a tight palette so the armour reads as three or four greys, and force the grid. If you animate the knight into a short clip, Pixel Snap pulls the frames, aligns them so the sprite does not jitter, and lets you test the loop before exporting the sheet. You still glance over the face and hands at full zoom, but the hours of manual grid fixing are gone.

If you need a character that does not exist yet, Auto-Sprite v2 covers the full chain: it generates a character with AI, animates it with AI video, then turns the clip into a game-ready sprite sheet. For a map of the whole suite, see the Sorceress tools guide.

Which method should you use?

Method	Cost	Control	Best for
Free web converter	Free	Low: pixel size and palette	Quick fun images, avatars
Photoshop, GIMP or Aseprite	Paid or free, depending on app	Full, pixel by pixel	Single hero sprites, learning the craft
Browser script (above)	Free	Full, in code	Developers, custom palettes, automation experiments
True Pixel	Paid Sorceress membership	Built-in cleanup and batching	Game sprites and sheets from images or video
Pixel Snap	Paid Sorceress membership	Grid snapping, palette lock, frame alignment	Turning AI art and AI video into real pixel art

A reasonable path for a beginner: convert one image by hand in an editor so you see what the cleanup step involves. Once you understand that, automate it for the rest of the game.

Common mistakes when converting images to pixel art

• Too many colours. A 64-pixel sprite with 200 colours looks like a blurry photo. Cut to 8 to 16 and the image suddenly reads as pixel art.
• Smooth upscaling. Scaling with bilinear or bicubic resampling turns crisp pixels into fuzz. Use nearest-neighbour for every upscale, and turn on pixel-art filtering in your engine.
• Non-integer scaling. Upscaling by 3.5x makes some pixels wider than others. Stick to whole numbers. Fancy smoothing filters such as the ones described in pixel-art scaling algorithms are designed for displaying finished pixel art, not for creating it from a photo.
• Keeping the background. Background detail becomes noise at low resolution and makes sprites hard to place in a game. Remove it before or during conversion.
• Too small for the subject. A full-body portrait photo at 16 pixels wide loses the face entirely. Either crop to the head or raise the target size.
• Skipping the cleanup pass. Single orphan pixels, broken outlines and lopsided eyes are where conversions fail. Zoom in and fix them; this is the part that makes it yours.
• Inconsistent sizes across a game. If the player is 32 pixels tall and an enemy was converted at 48, the pixels will not match in-game. Pick one scale and run every image through the same settings.

The workflow at a glance

Whatever tool you choose, how to make pixel art from an image always follows the same path: crop a clear subject, downscale to a small target with nearest-neighbour, limit the palette, clean the outline and features by hand, then upscale by a whole number with smoothing turned off. Photoshop and free editors give you full control at the cost of time. The browser script shows you the mechanics and costs nothing. For game work where you need transparent backgrounds, clean edges, batch runs and animated sprite sheets, True Pixel handles images and video, and Pixel Snap turns AI renders into real grid-locked pixel art. Start with one sprite, get it looking right at full zoom, then lock in your settings for the rest of your game.