Skip to tool

Pixelate Image

Create a mosaic effect by pixelating an image with an adjustable block size.

Source + settings

Drop an image, paste (Ctrl/Cmd+V), or choose a file. Adjust the pixel size and preview instantly.

Drop an image here, click to choose a file, or paste from clipboard.

Source preview
20px
92%

Quality applies to JPEG/WebP.

Upload an image to see details.

Result

Preview is scaled to fit; download uses full resolution.

PNG

How to Use This Tool

  1. Upload, paste, or drop an image.
  2. Adjust the pixel block size.
  3. Choose an output format.
  4. Download the pixelated image.

Learn More About Pixelate Image

Pixelation in the browser

Pixelation works by dividing the image into square blocks and replacing each block with its average color. Larger blocks create a stronger mosaic effect.

Choosing formats

  • PNG is lossless and supports transparency.
  • WebP is often smaller and may support transparency.
  • JPEG is widely supported but uses lossy compression.

About

Pixelate Image lets you create a mosaic effect from any image. Upload a file, adjust the pixel block size, preview instantly, and download in your chosen format.

Examples

Low Pixelation

Runtime-verified example for pixelate-image
Input
{"pixelSize":8,"sourceImage":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg=="}
Output
{"dataUrl":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACXBIWXMAAAsTAAALEwEAmpwYAAAADUlEQVR4nGNg+P+/HgAFfwJ+2ngA5wAAAABJRU5ErkJggg==","filename":"pixelated-image.png","mimeType":"image/png","width":1,"height":1}

Medium Pixelation

Runtime-verified example for pixelate-image
Input
{"pixelSize":20,"sourceImage":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg=="}
Output
{"dataUrl":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACXBIWXMAAAsTAAALEwEAmpwYAAAADUlEQVR4nGNg+P+/HgAFfwJ+2ngA5wAAAABJRU5ErkJggg==","filename":"pixelated-image.png","mimeType":"image/png","width":1,"height":1}

High Pixelation

Runtime-verified example for pixelate-image
Input
{"pixelSize":50,"sourceImage":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg=="}
Output
{"dataUrl":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACXBIWXMAAAsTAAALEwEAmpwYAAAADUlEQVR4nGNg+P+/HgAFfwJ+2ngA5wAAAABJRU5ErkJggg==","filename":"pixelated-image.png","mimeType":"image/png","width":1,"height":1}

Sample Scenario

Runtime-verified example for pixelate-image
Input
{"sourceImage":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg==","pixelSize":20,"outputFormat":"PNG","jpegQuality":0.9}
Output
{"dataUrl":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACXBIWXMAAAsTAAALEwEAmpwYAAAADUlEQVR4nGNg+P+/HgAFfwJ+2ngA5wAAAABJRU5ErkJggg==","filename":"pixelated-image.png","mimeType":"image/png","width":1,"height":1}

Use Cases

  • Create a stylized mosaic look for photos
  • Obscure details in screenshots or images
  • Generate pixel-art style previews
  • Make low-detail placeholders for layouts

Frequently Asked Questions

Related Tools