1 What is a bitmap image?
A bitmap image (also called a raster image) is made up of a grid of tiny coloured squares called pixels (short for picture elements).
Every pixel stores a colour as a binary number. When you put thousands of pixels next to each other, your eye blends them into a smooth picture — like a mosaic.
Common bitmap file types include .bmp, .png, .jpg and .gif.
Each colour is stored as a binary number
The computer doesn't really "see" colour — it just stores a binary number for each pixel. With only 3 bits per pixel we can store 2³ = 8 different colours. Here is one possible mapping:
| Colour | Name | Binary code | Denary |
|---|---|---|---|
| Black | 000 | 0 | |
| Blue | 001 | 1 | |
| Green | 010 | 2 | |
| Cyan | 011 | 3 | |
| Red | 100 | 4 | |
| Magenta | 101 | 5 | |
| Yellow | 110 | 6 | |
| White | 111 | 7 |
So if a tiny image's pixel data started 100 100 110 000, that would mean: red, red, yellow, black. The whole picture is just a long string of bits!
2 Pixels — zoom in and see them
Photographs look smooth from far away, but if you zoom in close you can see the individual pixels. Drag the slider to zoom into the image below.
At 1× you see a normal picture. By 20× you can clearly see the grid of coloured squares.
Try it: build your own pixel art
Click a colour, then click squares on the grid to paint. This is exactly how a bitmap is stored — a grid of colour values.
3 Resolution
Resolution is the number of pixels in an image, usually written as width × height. For example, 1920 × 1080 means 1920 pixels across and 1080 down — that's 2,073,600 pixels in total!
- Higher resolution → more pixels → sharper image, but a bigger file.
- Lower resolution → fewer pixels → blocky / pixelated image, smaller file.
Try it: Use the slider to reduce the resolution of the photo on the right. Watch the picture become blocky as the number of pixels drops.
Slide left to drop the resolution. Notice how detail disappears the fewer pixels you have.
4 Colour depth
Colour depth (also called bit depth) is the number of bits used to store the colour of one pixel. More bits = more possible colours.
| Bits per pixel | Colours | Example |
|---|---|---|
| 1 bit | 2 | Black & white |
| 2 bits | 4 | Tiny palette |
| 4 bits | 16 | Old computer icons |
| 8 bits | 256 | GIFs |
| 24 bits | 16,777,216 | "True colour" photos |
The formula is simple: Number of colours = 2n, where n is the bit depth.
Drop the bit depth and watch the image turn posterised — fewer colours can be used, so similar shades have to share.
5 File size
The file size of a bitmap (ignoring compression and headers) is:
Then divide by 8 to get bytes, by 1024 to get kilobytes (KiB), and by 1024 again for megabytes (MiB).
Worked example: An image is 100 × 200 pixels with a colour depth of 8 bits.
Size in bits = 100 × 200 × 8 = 160,000 bits
Size in bytes = 160,000 ÷ 8 = 20,000 bytes
Size in KiB = 20,000 ÷ 1024 ≈ 19.5 KiB
6 Quick quiz
Answer all five — your score appears at the bottom.
Summary — what you should remember
- A bitmap is a grid of pixels.
- Resolution = number of pixels (width × height). More = sharper, bigger file.
- Colour depth = bits per pixel. Number of colours = 2n.
- File size (bits) = width × height × colour depth.
- Reducing resolution makes images blocky. Reducing colour depth makes images posterised. Both shrink the file size.