Pixel Art Generator — Convert Photos to Pixel Art Online
Turn any photo into retro pixel art. Set how large each block should be, cut the number of color levels for an 8-bit feel, and compare the result with the original. Runs entirely in your browser.
Drag & drop an image here
or click to browse
What is pixel art? Pixel art is artwork built at a deliberately low resolution, where individual square pixels are large enough to be seen and each one is placed on purpose. The look comes from two constraints that early hardware imposed: very few pixels, and very few colors. This generator recreates both — it shrinks your photo so one block covers many original pixels, then snaps every color channel to a coarse set of levels.
How to Use the Pixel Art Generator
-
Add a photo — Drag a PNG, JPG, GIF or WebP onto the drop zone, or use Choose File. The image is read with
FileReaderand processed entirely in the page. -
Set the pixel size — This is the width in original pixels of one output block, from 2 to 32. The image is first shrunk to
width / pixelSizeacross, so a value of 8 turns a 1600-pixel-wide photo into a 200-block grid. - Set the color count — The slider controls how many brightness levels each of the red, green and blue channels is allowed. Lower values give the flat, banded palette of 8-bit hardware; higher values keep more of the photograph's shading.
- Compare the panels and iterate — Original and result sit side by side and the result redraws on every slider move. Faces are the hardest test: if the eyes disappear, either lower the pixel size or crop tighter before converting.
-
Download the PNG — Download Pixel Art saves the result as a PNG with
-pixelappended to the name. PNG is the right choice here — it stores the hard block edges exactly, where a JPEG would blur them.
How the Pixel Art Effect Works
The conversion is two independent reductions applied in order: one to spatial resolution, one to color resolution. Together they are what separates pixel art from a simply blurry photo.
Step one: reducing resolution
The image is drawn into a small off-screen canvas whose dimensions are the original divided by the pixel size:
blockGridWidth = round(imageWidth / pixelSize)
Because the browser smooths while it shrinks, each block ends up holding the average color of the
area it covers rather than one sampled pixel — that is what keeps the result recognizable instead of
noisy. The small canvas is then drawn back up to the original dimensions with
imageSmoothingEnabled = false, which turns off interpolation so each block expands into
a hard-edged square. The finished file therefore has the same pixel dimensions as the photo you
loaded; it simply contains far fewer distinct squares.
| Pixel size | Block grid from a 1600 x 1200 photo | Character |
|---|---|---|
| 2 | 800 x 600 blocks | Barely visible; a light softening rather than an effect |
| 4 | 400 x 300 blocks | Clearly pixelated, detail and faces still readable |
| 8 | 200 x 150 blocks | The usual starting point; retro but still legible |
| 16 | 100 x 75 blocks | Strongly abstract; only large shapes survive |
| 32 | 50 x 38 blocks | Near-icon scale; needs a tightly cropped subject |
Step two: reducing color
Each of the three color channels is then quantized on its own. With the slider at N, the step size is 256 / N, and every channel value is snapped to the nearest multiple of that step:
newValue = round(value / (256 / N)) x (256 / N)
This is uniform quantization, not palette matching — the tool does not analyze your image to pick the most representative colors, it simply divides the whole color cube into an even lattice. That makes it fast and predictable, and it gives the flat banding of early console graphics rather than the tuned palettes of hand-drawn sprite work. Note that the slider is levels per channel, not the total number of colors in the result:
| Color count slider | Levels per channel | Colors possible in the image |
|---|---|---|
| 2 | 3 | 27 |
| 4 | 5 | 125 |
| 8 | 9 | 729 |
| 16 | 17 | 4,913 |
| 32 | 33 | 35,937 |
Levels come to N + 1 rather than N because rounding to the nearest step reaches both ends of the range, and the top step is clamped to 255. The real image will contain far fewer colors than the theoretical maximum, since most photographs occupy only a small region of the color cube.
Quantising without dithering is what produces visible bands in skies and gradients. That is usually the desired retro look, but if you want a limited palette that still reads as smooth, Image Dithering scatters the error between neighboring pixels instead, trading banding for texture.
Getting a usable result
Pixel art is unforgiving about composition, because a face rendered across twelve blocks has almost no room for expression. Crop tightly on the subject before converting rather than after, and prefer source images with strong, simple shapes and clear separation between the subject and the background. High-contrast lighting survives the reduction; subtle tonal modeling does not. If detail keeps disappearing, the answer is nearly always a tighter crop rather than a smaller pixel size.
One thing this tool does not do is produce a small file. The output keeps the original dimensions, so a 1600 x 1200 photo stays 1600 x 1200 with big square blocks in it. If you need genuine low-resolution sprite assets — a 64 x 64 PNG for a game engine — run the result through the Image Resizer afterwards and scale down to the block grid size.
Frequently Asked Questions
Pixel art is artwork made at a resolution low enough that individual pixels are a visible design element. It grew out of the hardware limits of 1980s consoles and home computers, which offered small framebuffers and tiny palettes, and it survives as a deliberate style. Converting a photo approximates the look; hand-drawn pixel art additionally places every pixel by eye, which is why crafted sprites read more clearly than any automatic conversion.
Start at 8 and move from there. Values of 2 to 4 barely register as an effect and mostly just soften the image. Values of 16 to 32 are strongly abstract and only work on a tightly cropped subject with simple shapes. The right value depends on the source dimensions as much as on taste, because the slider is a divisor: pixel size 8 on a 400-pixel image is far more destructive than on a 4000-pixel one.
Not directly. It sets how many levels each of the red, green and blue channels may take, so the theoretical maximum is that number cubed. At the slider's lowest setting the image can still hold 27 distinct colors, and at its highest around 36,000. What matters in practice is the banding: fewer levels means flatter areas and harder transitions, which is the retro effect people are usually after.
The tool shrinks the image to a block grid, quantizes it, then scales it back up with smoothing disabled. That keeps the output at the original dimensions so it drops straight into whatever the photo was already used for. It also means the result is not a low-resolution asset. Resize it afterwards if you need an actual small sprite rather than a large image made of big squares.
No. The file is read locally with FileReader and both reductions run on HTML5 canvases inside the page. Nothing is transmitted, so personal photos and unreleased artwork stay on your device. Everything is discarded when you press Reset or close the tab.
Both reduce color, but they handle the error differently. This tool snaps each pixel to the nearest allowed level, which produces flat regions and visible bands. Image Dithering spreads the rounding error into neighboring pixels, so a limited palette still looks tonally smooth from a distance. Choose blocky flatness here, patterned texture there.
Always PNG, regardless of what you loaded. That is deliberate: PNG is lossless, so the hard block boundaries are stored exactly. Saving pixel art as JPEG is a common mistake — the encoder smears the sharp edges into ringing artifacts, which is precisely the detail that makes the style work.
It can be a useful starting point, but it is not a finished asset. Automatic conversion has no sense of silhouette, no consistent outline, and no control over which pixels carry the read. Most artists use a conversion like this as a reference layer, then redraw the important pixels by hand in a dedicated sprite editor at the target resolution.
Use Cases
Reference Layers for Sprite Work
An artist drops a character photo to pixel size 16, then traces over the block grid in a sprite editor to get proportions right before placing pixels by hand.
Avatars for Retro Communities
Crop tight on a face, set the pixel size around 12, and cut the color levels to get a profile picture that matches a forum or Discord server with an 8-bit theme.
Anonymizing a Face in a Screenshot
A large pixel size over a whole image is the classic redaction look. Note that it applies to everything, so crop the region you want obscured before converting.
Cross-Stitch and Bead Patterns
The block grid maps one-to-one onto stitches or fuse beads. Choose a pixel size that gives a grid you can actually count, and a low color level so the thread list stays short.
Retro Title Cards and Posters
A game jam or an event flyer that wants an arcade feel gets a consistent look if every image runs through the same pixel size and color count.
Teaching Quantization
Move the color slider from 32 down to 2 on the same photograph and the banding appears step by step — a direct demonstration of what bit depth does to an image.