Bitmap Images
A bitmap image is just a grid of pixels, and every pixel is just a stored number representing a colour. Everything about image quality and file size comes down to two questions: how many pixels, and how many bits does each one get?
Paint a pixel, see its stored value
Click a square to cycle through the available colours. Click a square again while it's selected to see exactly what gets stored for it, in binary. Change the colour depth and notice the palette itself changes size.
Colour depth
Controls
True colour: mixing red, green and blue
Indexed colour (previous section) only works if you're happy with a small, fixed set of colours. Real photos need far more, so most image formats instead give every pixel its own red, green and blue value, each 8 bits, mixed directly to make the final colour. That's 24 bits per pixel, 2 to the power of 24, over 16.7 million possible colours.
Mix a colour
Exam tips
- 24-bit colour is often called "true colour" because it comfortably exceeds what the human eye can distinguish.
- Each channel (R, G, B) is independent: 8 bits each, 0-255, stored one after another for every single pixel.
- Indexed colour (previous section) trades away colour range for a much smaller file: storing a palette index needs far fewer bits than storing a full R, G, B triple every pixel.
Resolution: how many pixels
Same shape, three resolutions. More pixels means finer detail, at the cost of more data to store, exactly (width times height) times more pixels to encode.
Colour depth: proof of banding
This is the same smooth grey gradient, quantised to different numbers of available shades. Watch it turn from a smooth gradient into visible stripes as the number of bits per pixel drops.
Exam tips
- Colour depth (bits per pixel) determines how many distinct colours or shades are possible: 2 to the power of the bit depth.
- 1-bit = 2 colours, 8-bit = 256 colours or shades, 24-bit ("true colour") = over 16.7 million, using 8 bits each for red, green and blue.
- The visible "stripes" here are called banding, a direct, visible symptom of too few bits per pixel for a smooth gradient.
Bitmap vs vector: a different way to store a picture entirely
Everything so far has been a bitmap: a fixed grid of pixel values. A vector image stores something completely different, a set of mathematical instructions describing shapes. Same circle, two totally different ways of remembering it.
| Bitmap | Vector | |
|---|---|---|
| What's stored | Every pixel's colour value | Shape instructions (centre, radius, colour) |
| File size | Grows with resolution and colour depth | Stays tiny regardless of size, just a few numbers |
| Scaling up | Gets blocky, pixels just get bigger | Perfectly smooth at any size, recalculated fresh |
| Good for | Photos, anything with complex, irregular detail | Logos, icons, fonts, technical diagrams |
Exam tips
- A vector circle might be stored as literally just 3 numbers: centre coordinates and a radius, plus a colour. That's it, regardless of whether it's displayed at 1cm or 10 metres wide.
- Photographs are essentially always bitmaps: real-world detail doesn't reduce to simple shapes.
- This is exactly why a company logo is usually supplied as a vector file (like SVG), it needs to look sharp on a business card and a billboard from the exact same file.
Calculating file size
File size for an uncompressed bitmap follows one formula: width times height times colour depth (bits), then divide by 8 for bytes. Pick some values and watch the working build up.
What that means in practice
Image dimensions
Width
Height
Colour depth
Exam tips
- File size (bits) = width times height times colour depth. Divide by 8 for bytes, by 1024 again for KB.
- This calculates the uncompressed size. Real image formats like JPEG and PNG use compression to shrink the file, a separate topic.
- Doubling the width AND height quadruples the pixel count, and therefore roughly quadruples the file size, not doubles it.