Pixel Refiner

Japanese version | Simplified Chinese version

🚀 Try it now: pixel-refiner.app

Pixel Refiner is a web-based tool that cleans up pixel art — especially AI-generated pixel art — and turns it into high-quality assets and icons. It removes anti-aliasing, auto-detects pixel grids, makes backgrounds transparent, and supports batch processing of multiple images — all running fast in the browser.

✨ Features

AI-generated pixel art often comes with blurry edges (anti-aliasing artifacts), misaligned grids, and opaque backgrounds. Pixel Refiner fixes all of that.

• Anti-aliasing removal — Sharpens blurry edges back into clean, crisp pixels.
• Intelligent Grid Detection — Automatically detects the pixel grid size and resamples to the optimal resolution.
  • Grid Candidate Selection — Displays multiple candidates for the best grid size; manually select the one that fits perfectly.
  • Flexible Modes — Choose from Auto, Hint (Pixel + Auto), Force (Pixel only), or Off (1:1).
  • High-Resolution Support — Enhanced accuracy for large images and complex pixel patterns.
  • Fast estimation — A turbo mode for quick previews, even on large images.
• Smart background removal:
  • Auto mode (default) — Estimates the background from the whole image border, covering gradients and light noise
  • Corner-color transparency (manual selection)
  • Eyedropper tool — Click to pick the exact background color
  • Adjustable tolerance
  • Interior hole filling (e.g. the inside of a donut shape)
  • Safe logical-pixel noise cleanup with Off, Light (Keep Details), Auto, and Strong modes
• Color reduction & palette mapping:
  • Retro console palettes — NES, Game Boy, SNES, PC-9801, MSX1, PICO-8, and more.
  • Custom quantization — High-quality color reduction using Oklab color space and K-means clustering.
  • Dithering — Supports Floyd-Steinberg, Bayer (2x2, 4x4, 8x8), and Ordered dithering.
• Outline generation — Automatically adds an outline (stroke) to the sprite.
  • Styles — Rounded (8-way) or Sharp (4-way).
  • Custom color — Choose any color for the outline.
• Auto-centered settings — Start with purpose-based controls for processing, detail, colors, background, dithering, and outline; technical controls remain available under Advanced Settings.
• Purpose presets — Choose Auto, Crisp Sprite, Keep Fine Details, Transparent Icon, Limited Colors, or Photo to Pixel, and save custom configurations for reuse.
• Auto trim — Strips transparent margins and crops to content bounds.
• Forced resize — Resizes to an exact pixel dimension you specify.
• Scaled export — Download at x2, x4, … up to x32 for use in game engines and other tools.
• Multi-image processing:
  • Batch upload — Drag and drop multiple files at once.
  • Session management — Manage multiple images, remove unwanted ones, or clear all.
  • Batch download — Process all images and download them as a single ZIP file.
  • Batch scaling — Apply a specific scale factor to all images in the ZIP export.
• Non-blocking processing — Heavy image processing runs in a Web Worker so the UI stays responsive.
• Toast notifications — Real-time feedback for actions like saving presets or completing downloads.

📖 Usage

1. Open the app (locally or on a deployed instance).
2. Drag & drop images onto the drop zone (or click to browse). Multiple images are supported.
3. Use the "Images" list to switch between uploaded images.
4. Hit "Process" (or enable "Auto") to generate optimized pixel art sprites.
5. Start with a purpose preset or adjust Processing, Detail, Colors, Background, Dithering, Outline, and Auto Trim.
6. Open Advanced Settings only when you need exact grid, palette, tolerance, connectivity, or forced-size controls.
7. Check the detected image type, selected route, and confidence beside the result size. Alternative pixel sizes are listed below the result only when grid confidence is low.
8. Use the "Compare" view to check the difference between the original and processed image with a slider.
9. When you're happy with the result, click "Download" (use the ▼ dropdown to choose a scale factor).
10. For multiple images, use "Download All (ZIP)" to export all processed sprites at once.

🛠️ Development

Requires Node.js 24.x and pnpm.

pnpm install # Install dependencies
pnpm dev     # Start the dev server at http://localhost:5173
pnpm build   # Create a production build
pnpm test    # Run tests

Auto pipeline

Auto is the default processing pipeline. It classifies each image and selects grid refinement, continuous-tone conversion, or safe preservation when the result is uncertain. Low-confidence grid results list alternative pixel sizes below the output instead of forcing an extreme reduction.

Run make report to compare the current output with the base baseline. Pull requests publish the quality-gate result and the comparison summary in GitHub Actions.

Quality report

Every merge into main regenerates the report and publishes it here:

https://happyonigiri.github.io/PixelRefiner/quality/latest/

The report measures each case against its fixed target image and against the output of the previous release, which is taken from the last tag of the previous minor version. Add ?locale=ja&theme=dark to open it in a specific language and color theme.

Note

Please note that this tool is designed primarily for automatic image conversion and optimization. Therefore, we do not plan to implement manual pixel-by-pixel editing features similar to paint software.

License

This project is licensed under the MIT License.