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.

Drop an image here

Or click to choose a file, or paste from clipboard.

20px
92%

Quality applies to JPEG/WebP.

Upload an image to see details.

Result

Preview is scaled to fit; download uses full resolution.

Upload an image to see the pixelated preview.

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