---
title: "Pixelate"
description: "Pixelate: Pick a photo, drag the slider."
url: https://www.joekarlsson.com/work/pixelate/
---

# Pixelate

Pick a photo, drag the slider.

2015

[See it live →](https://pixelate.joekarlsson.com/) · [View on GitHub →](https://github.com/JoeKarlsson/Pixelate) · [Read why I built it](https://www.joekarlsson.com/blog/how-to-pixelate-images-with-html5-and-javascript/)

## Artist statement

Pixelate turns any photo into big square blocks, and the photo never leaves your phone or computer. Drag the slider and the picture gives up its detail a little at a time, until it's a grid of colors.

## Try it

This is the live site, running right here. Pick a photo and it stays in your browser; Save PNG downloads the result. [Open it full screen →](https://pixelate.joekarlsson.com/)

[Embedded: Pixelate, playable in the browser](https://pixelate.joekarlsson.com/)

## Screenshots

![The Pixelate page in pink on black: a Choose File button, a block size slider set to 24px and a Save PNG button, over the fair selfie turned into square blocks](https://www.joekarlsson.com/images/projects/pixelate-2026-app.webp)

Block size 24px

## How it's made

JavaScript · HTML5 Canvas

The 2015 version had no pixel math in it. You pasted in an image's URL, it drew the picture at a few percent of its size, and it stretched the tiny copy back up with image smoothing turned off, so the blur you'd normally get came out as hard squares. In November 2026 I rebuilt it to work on your own photo, with each block the exact average of the pixels under it.

Each block is one color, the exact average of the pixels under it, worked out on a copy of your photo no bigger than 2,000 pixels a side so the slider stays quick. I stretch that small grid back up with smoothing turned off, and Save PNG writes it at your photo's full size.

_Diagram: How Pixelate turns a photo into blocks: your photo stays on your device, Pixelate works on a copy no bigger than 2,000 pixels on its longest side, the slider sets the block size from 1 to 120 pixels, each block becomes the average color of the pixels under it, the grid is stretched back up with smoothing off so the blocks stay square, and Save PNG writes it at the photo's full size_

## Lineage

Next pixel project

[Digital Graffiti Wall](https://www.joekarlsson.com/work/digital-graffiti-wall/): An interactive art installation where audience members draw on a shared digital canvas that displays their creations in real-time on a physical RGB LED grid. Uses MongoDB Realm for instant cross-client data sync. Since retired and replaced by PixelPane. 2020 · JavaScript, MongoDB Realm, RGB LEDs

[Project page](https://www.joekarlsson.com/work/digital-graffiti-wall/) · [Source](https://github.com/JoeKarlsson/digital-graffiti-wall) · [Blog Post](https://www.joekarlsson.com/blog/building-a-real-time-digital-graffiti-wall/)

[See it live →](https://pixelate.joekarlsson.com/) · [Get the code on GitHub →](https://github.com/JoeKarlsson/Pixelate) · [Read why I built it](https://www.joekarlsson.com/blog/how-to-pixelate-images-with-html5-and-javascript/)

[← All works](https://www.joekarlsson.com/work/)