OCR Computer Science J277 - Mr Brown
Every bitmap image is really just a grid of pixels — and each pixel's colour is stored as a binary code. Explore how colour depth and resolution change the picture (and the file size) below!
Drag the slider to change resolution, and pick a colour depth to see the effect on quality.
12 × 12 pixels
Click a pixel to see its binary colour code.
Every distinct colour in this image is stored as one of these binary codes:
Image file size = colour depth × width × height = 2 × 12 × 12 = 288 bits
This is uncompressed — the file size depends only on resolution and colour depth, never on what's actually drawn!
| Metadata | Value |
|---|---|
| Width | 12px |
| Height | 12px |
| Colour depth | 2-bit |
| File size | 288 bits |
| Date created |
A bitmap image is a grid of tiny squares called pixels (picture elements). Each pixel stores one colour, represented by a binary code — so the whole image is really just a big list of binary codes, one per pixel.
Colour depth is the number of bits used to store each pixel's colour. With n bits, each pixel can be one of 2ⁿ colours.
| Colour depth | Colours possible |
|---|---|
| 1-bit | 2 (e.g. black & white) |
| 4-bit | 16 |
| 8-bit | 256 |
| 24-bit | 16.7 million (true colour) |
Higher colour depth means smoother, more realistic colours — but a bigger file. Try it in the Playground!
Resolution is the number of pixels across an image's width and height. More pixels means more detail and a sharper image, but also more data to store. Too few pixels and the image looks blocky (pixelated).
Image file size = colour depth × width (px) × height (px)
This gives the size in bits — divide by 8 for bytes, and by a further 1000 for KB.
Example: a 100 × 80 image with an 8-bit colour depth:
8 × 100 × 80 = 64,000 bits = 8,000 bytes = 8 KB
Metadata is extra information stored with an image file, separate from the pixel colour data itself — for example its width, height, colour depth and the date it was created. It's what lets software display the image correctly.