What is a random bitmap?
A random bitmap is an image in which every pixel's colour is chosen at random, with no relationship to its neighbours. The result looks like coloured static. This generator builds one at any size up to 128 × 128 pixels, giving each pixel random red, green and blue values from 0 to 255, and saves it as a PNG you can download.
How to make one
- Set Width (px) and Height (px), each from 1 to 128 (default 16).
- Click Generate. A preview appears below the output box at actual size.
- Click Download to save
random-bitmap.png, or Copy to copy the data URL.
Each click produces a new, independent image.
What happens inside
The tool creates an off-screen canvas, allocates pixel data of width × height × 4 bytes (red, green, blue, alpha for each pixel), and fills it with bytes from crypto.getRandomValues. The red, green and blue bytes are used as they come; every alpha byte is overwritten with 255. Finally toDataURL('image/png') encodes the canvas as a PNG.
The size cap isn't arbitrary. MDN documents that getRandomValues throws a QuotaExceededError for requests over 65,536 bytes, and the tool fetches all the random bytes in one call. At 128 × 128 pixels that's 128 × 128 × 4 = 65,536 bytes, exactly the limit.
The numbers behind it
| Size | Pixels | Random colour bytes | Possible images |
|---|---|---|---|
| 1 × 1 | 1 | 3 | 16,777,216 |
| 16 × 16 (default) | 256 | 768 | 2^6,144 |
| 64 × 64 | 4,096 | 12,288 | 2^98,304 |
| 128 × 128 | 16,384 | 49,152 | 2^393,216 |
Each pixel can be any of 256³ = 16,777,216 colours, which is why even a single pixel is unlikely to repeat. Two 16 × 16 bitmaps matching by chance isn't worth thinking about.
Why random noise is a useful test image
PNG compresses losslessly with DEFLATE (W3C PNG specification), which works by finding repeated patterns. Random pixels have none, so in practice the file can't get smaller than its raw colour data: a 128 × 128 noise PNG comes to at least about 48 KB (49,152 bytes of colour), plus headers. Copied as a data URL, it's roughly a third larger again because of Base64. That makes noise the worst case for:
- Image compressors. Lossless tools can't shrink it at all, and lossy formats show the most visible artefacts on it. Run a bitmap through the image compressor, which re-encodes as JPEG, to see what aggressive quality settings do to fine detail.
- Upload and processing pipelines. If your thumbnailer, CDN or storage step assumes images shrink when re-encoded, a noise image will find out.
- Duplicate detection. Every generated bitmap is unique, so it's handy for testing that a system doesn't wrongly flag two uploads as the same picture.
For images with a known size and a label instead of noise, use the dummy image generator.
Scaling up without blur
A 16 × 16 image is small enough to look like a speck. To use it as a texture, avatar placeholder or pixel-art background, scale it by a whole number (8×, 16×) with nearest-neighbour sampling, so each random pixel becomes a crisp square instead of a smudge. In a web page you can do this with CSS:
img.noise {
width: 256px;
image-rendering: pixelated;
}
The image-rendering property tells the browser not to smooth the pixels. If you'd rather produce a larger file, the image resizer can enlarge it, but it draws with the canvas's default smoothing, so expect soft, blended edges rather than hard squares.
Working with the data URL
The output box contains something like data:image/png;base64,iVBORw0KGgo.... Paste it into an <img> tag's src, a CSS background-image: url(...), or a JSON fixture where a test expects an embedded image. To check what a data URL contains, the Base64 to image tool turns it back into a viewable picture.
Limits
No transparency, no greyscale or palette options, no seeding (you can't regenerate the same image later), and a maximum of 128 pixels per side. If you need a specific bitmap again, download it; the tool keeps nothing.
Last updated