Uwarp

Examples

Photo converted to pixel art at block size 7 with default settings

Default usage

Block size 7, no other modifications.

Image to pixel art with 4-color palette at block size 17

4-color palette

Block size 17, four colors.

Grayscale 8-bit style pixel art from photo at block size 10

Grayscale

Block size 10, grayscale.

16-color palette pixel art converter output at block size 8

16-color palette

Block size 8, sixteen colors.

Try Pixel It

Use the default sky photo or upload your own. Adjust block size, toggle grayscale or palette, then click Download PNG to save the result.

Block size
Manual palette · upload palette · custom palettes

Upload palette

Accepts .hex, .txt, pixilart.com or Paint.NET palette files (CSV-like, hex codes).

Manual palette

Pick a color and add it. Click any swatch to remove.

Documentation

Quick usage

Render an image element and a canvas. Load the script and call draw().pixelate().

<img src="sky.jpg" id="pixelitimg" alt="">
<canvas id="pixelitcanvas"></canvas>
<script src="pixelit.js"></script>
<script>
  const px = new pixelit();
  px.draw().pixelate();
</script>

Options

config = {
  to:        HTMLCanvasElement, defaults to #pixelitcanvas
  from:      HTMLImageElement,  defaults to #pixelitimg
  scale:     int 1..50,         defaults to 8
  palette:   [[r,g,b], ...],    defaults to a fixed palette
  maxHeight: int | null,        defaults to null
  maxWidth:  int | null,        defaults to null
}

API

All chainable. Apply order matters — palette before grayscale yields a slightly different result than the reverse.

  • .draw() — Draws the source image to the canvas, resizing if max width or max height is set.
  • .setDrawFrom(elem) — Sets the source image element.
  • .setDrawTo(elem) — Sets the target canvas element.
  • .setFromImgSource(src) — Updates the source image URL.
  • .setPalette(arr) — Sets the color palette as [[r,g,b], ...], values 0–255.
  • .setMaxWidth(int) / .setMaxHeight(int) — Cap the output size. Used by .resizeImage().
  • .setScale(int) — Pixelation scale (1–50).
  • .getPalette() — Returns the current palette.
  • .convertGrayscale() — Converts the canvas to grayscale.
  • .convertPalette() — Snaps every pixel to the nearest palette color.
  • .resizeImage() — Resizes if larger than max width / height.
  • .pixelate() — Draws a pixelated version to the canvas.
  • .saveImage() — Triggers a PNG download.

Credits

This tool reimplements giventofly/pixelit (MIT) in the Uwarp stack. Algorithm credit goes to the original author.

Pixel art converter — turn images into pixel art

Free pixel art converter: turn photos into pixel art with block-size grid control, 8-bit palettes, 16-color sets, and grayscale. Runs in your browser—download PNG.

What is a pixel art converter?

A pixel art converter turns photographs or illustrations into blocky, retro artwork by downsampling and optionally limiting colors to a palette. This Uwarp tool ports the open-source Pixel It algorithm (MIT) so you can turn a picture into pixel art, preview an image-to-pixel-art grid, and export PNG without desktop software. It suits “photos to pixel art” workflows, 8-bit and 16-color styles, and quick sprite prototypes before redrawing in Aseprite or LibreSprite.

Popular pixel art converter searches

These phrases match how people look for photo-to-pixel tools. Use block size and max dimensions below to match each intent.

  1. Pixel art converter and pixelart converter: Upload a JPG or PNG and downsample with nearest-neighbor blocks—the core workflow for a pixel art converter that keeps edges crisp.
  2. Turn image into pixel art: Natural-language searches like “turn an image into pixel art” or “make picture into pixel art” map to block size plus optional palette reduction.
  3. Image to 8 bit and 8 bit picture converter: Limit colors with grayscale or small palettes (4–8 swatches) for an 8-bit photo look; pair with block size for retro game sprites.
  4. 16 bit image converter and 16-color palettes: Use Endesga 16 or similar built-in sets to approximate a 16 bit picture converter without leaving the browser.
  5. Image to pixel art grid: Block size defines the visible pixel grid on the canvas—raise it for chunkier cells, lower it for finer detail before PNG export.
  6. Sprite sizes: 16×16, 128×128, and photos to pixel art: Set max width or max height (for example 16 or 128) when you need avatar-scale 16×16 pixel art or larger 128×128 tiles from photos.

Features

Controls for pixel art from image conversion, based on the Pixel It reference.

  1. Block size slider (pixel grid): Scale pixel blocks from 1 to 50—the main control for image to pixel art grid density.
  2. Built-in palettes: Vinik24, NES, Endesga 16, Aurora 4, and more—for 8-bit and 16-color pixel art from image sources.
  3. Grayscale mode: Convert the pixelated canvas to grayscale for monochrome sprites, avatars, or UI mockups.
  4. Max width and height: Cap output to targets like 16×16, 128×128, or other sprite dimensions for games and icons.
  5. Palette import: Load .hex or .txt palette files compatible with pixilart.com and Paint.NET exports.
  6. PNG download: Save the current canvas as pxArt.png—ready after you turn a photo into pixel art.

How to turn an image into pixel art

Three steps to convert a picture to pixel art and download PNG.

  1. Upload or use the sample: Start with the default sky photo or upload JPG, PNG, or other browser-supported images.
  2. Tune block size and effects: Adjust block size for the pixel grid, enable palette or grayscale, and pick a palette from the dropdown.
  3. Download PNG: When the preview looks right, click Download PNG to save pxArt.png to your device.

Tips for better pixel art from photos

Practical settings when you make an image pixel art or pixelate a picture.

  1. Start around block size 7: The default example uses block size 7 for balanced detail—raise it for a more retro, pixelated picture look.
  2. Limit colors for 8-bit sprites: Enable palette with a 4- or 8-color set when preparing assets for limited-color engines.
  3. Use 16-color palettes for richer scenes: Endesga 16 and similar sets approximate a 16 bit art style while keeping a small swatch count.
  4. Resize large photos first: Use max width or max height to hit 16×16, 128×128, or other targets without oversized canvases.

Who uses image to pixel art tools?

Common workflows for browser-based pixel art conversion.

  1. Indie game developers: Prototype sprite styles from reference photos before redrawing in Aseprite or LibreSprite.
  2. UI and brand designers: Create retro social assets or thumbnails with consistent 8-bit or 16-color limits.
  3. Educators and students: Demonstrate how resolution, block size, and color depth affect perceived image quality.
  4. Makers and hobbyists: Turn personal photos into pixel art avatars, profile pictures, or black-and-white 16×16 experiments.

Why use this pixel art converter on Uwarp?

Advantages of the in-browser Pixel It port.

  1. No account required: Open the page and convert immediately—no sign-up or watermarks.
  2. Privacy-first processing: Images never leave your browser during conversion—ideal for client photos.
  3. Familiar Pixel It controls: Same block size, palette, and API behavior as the MIT reference project on GitHub.
  4. Free to use: No subscription or export limits for PNG downloads.

Technical details

How the image to pixel art converter is implemented.

  1. Algorithm: Canvas draw, downscale, and nearest-neighbor upscale based on giventofly/pixelit (MIT).
  2. Palettes: Nearest-color matching in RGB space with optional custom palettes stored in localStorage.
  3. Client-side only: 100% browser Canvas 2D—no server-side image processing.

Frequently Asked Questions

Have questions? We have answers.

Related tools

More tools from Drawing & Creation.

View all Drawing & Creation