Zoom in: a picture is a grid of pixels
Zoom right into any photo on a screen. It turns into little squares. Each square is one pixel. A pixel is the smallest dot of one single colour.
Pixel is short for picture element. One element: one dot.
One pixel = one colour. A pixel can't be half red and half blue. If you need two colours, you need two pixels.
One colour = one binary number. The computer stores a number for each pixel. The number says which colour it is.
An image stored like this is a bitmap: a map of bits. Most photos are bitmaps (JPEG, PNG, GIF, BMP).
A phone screen packs about 400 to 500 pixels into every inch. That's why you can't see them without a magnifying glass. An old 1980s computer screen had about 70 per inch: you could see every one.
The simplest image: 1 bit per pixel
If a pixel can only be black or white, it only has two choices. Two choices need just 1 bit. Here we use 1 = black and 0 = white.
The long line of bits has no "new row" mark in it. The computer must also be told the width (5) to cut the line into rows again. That extra information is called metadata. Step 9 shows what goes wrong without it.
Decode a picture by hand
Width = 5. The bits are 10001 01010 00100 01010 10001. What's the picture?
Cut the bits into rows of 5 (the width). You get 5 rows.
Row 1 = 10001: black, white, white, white, black. ■□□□■
Row 2 = 01010: □■□■□
Row 3 = 00100: □□■□□
Rows 4 and 5 mirror rows 2 and 1: □■□■□ then ■□□□■.
Stack them: it's a big X. Size: 5 × 5 pixels × 1 bit = 25 bits.
More colours need more bits per pixel
The number of bits used for each pixel is the colour depth. It's the same rule you met with bits and bytes: every extra bit doubles the number of patterns, so it doubles the number of colours.
| Colour depth | Colours | Where you see it |
|---|---|---|
| 1 bit | 2 | Black and white. Fax, old e-readers, a QR code. |
| 2 bits | 4 | Very early games (the original Game Boy had 4 greens). |
| 8 bits | 256 | GIFs, retro "pixel art" graphics. |
| 16 bits | 65,536 | Older phones and games consoles. |
| 24 bits | 16,777,216 (about 16.7 million) | Normal photos and screens: "true colour". |
By hand: how many colours does 8 bits give?
Start with 1 bit: 2 colours.
Double for each extra bit: 2 bits → 4, 3 bits → 8, 4 bits → 16.
Keep going: 5 bits → 32, 6 bits → 64, 7 bits → 128.
8 bits → 256 colours. That's 2⁸ = 2 × 2 × 2 × 2 × 2 × 2 × 2 × 2.
Backwards: how many bits do I need for 100 colours?
Keep doubling until you reach at least 100: 2, 4, 8, 16, 32, 64, 128.
64 is too few (only 64 colours). 128 is enough.
128 = 2⁷, so you need 7 bits. The 28 spare codes are simply not used.
You can't use part of a bit. Maths says 100 colours need about 6.64 bits. A computer must round up to 7. Rounding down to 6 would only give 64 colours.
The micro:bit's screen is a 5 × 5 bitmap. Each LED has 10 brightness levels, 0 to 9. 3 bits (8 levels) is not enough, so each LED needs 4 bits (16 levels, 6 unused). The whole screen: 25 × 4 = 100 bits.
from microbit import * # each digit is one pixel's brightness, 0 (off) to 9 (full). ":" starts a new row heart = Image("09090:99999:99999:09990:00900") display.show(heart)
24-bit colour: three bytes, red, green and blue
Look very closely at a screen pixel. It's really three tiny lights: red, green and blue. Each light gets its own byte (0 to 255) saying how bright it is. 3 bytes × 8 bits = 24 bits per pixel.
| Colour | Red | Green | Blue | Hex |
|---|
Why is red + green = yellow? Mixing light adds colours together: more light, brighter colour. All three on full makes white. Mixing paint works the other way: each paint soaks up some light, so mixing gets darker. Screens make light, so they follow the light rules.
Where does "16.7 million" come from?
Red has 256 possible brightness levels (0 to 255).
For each red, green can be any of 256. That's 256 × 256 = 65,536 mixes.
For each of those, blue can be any of 256: 65,536 × 256 = 16,777,216.
Same answer as the formula: 2²⁴ = 16,777,216. Three bytes are just 24 bits.
(0, 0, 0) = all lights off = black. (255, 255, 255) = all on full = white. Equal amounts of all three = a grey.
Hex colour codes: #RRGGBB
Web pages and design apps write colours in hex. One byte is exactly 2 hex digits (you met this in Year 8: binary, denary and hex). So 3 bytes = 6 hex digits: two for red, two for green, two for blue.
By hand: what colour is #FF8000?
Drop the #. Split the 6 digits into 3 pairs: FF | 80 | 00.
Red FF: F = 15. First digit counts sixteens: 15 × 16 = 240. Add the second: 240 + 15 = 255 (full on).
Green 80: 8 × 16 = 128, plus 0 = 128 (about half).
Blue 00: 0 (off).
Red full + green half + no blue = orange.
RGB mixer: see every bit
Slide the three lights. Each slider is one byte. Watch the binary and the hex change together.
In Python's turtle, turtle.color("#FF8000") draws in orange. In HTML/CSS, color: #FF8000; does the same. Same 6 digits everywhere.
Resolution: how many pixels
Resolution is the number of pixels in an image, written width × height. More pixels means smaller squares, so you see finer detail.
| Name | Width × height | Pixels |
|---|---|---|
| Old school projector (VGA) | 640 × 480 | 307,200 |
| HD (720p) | 1280 × 720 | 921,600 |
| Full HD (1080p) | 1920 × 1080 | 2,073,600 (about 2 million) |
| 4K UHD | 3840 × 2160 | 8,294,400 (about 8.3 million) |
| A 12 megapixel phone photo | 4000 × 3000 | 12,000,000 |
By hand: how many pixels is Full HD?
We need 1920 × 1080. Split 1080 into 1000 + 80, which are easier.
1920 × 1000 = 1,920,000.
1920 × 80 = 1920 × 8 × 10 = 15,360 × 10 = 153,600.
Add them: 1,920,000 + 153,600 = 2,073,600 pixels. "Mega" means million, so about 2 megapixels.
"Resolution" has a second meaning: pixels per inch (ppi, or dpi for printers). That's about how tightly pixels are packed on a screen or paper. In GCSE image-size questions, resolution always means width × height.
Why does a small photo go blurry or blocky when you blow it up? Enlarging can't invent detail that was never stored. The computer can only make each pixel bigger, or guess the colours in between (which looks blurry).
Calculating an image's file size
Every pixel needs the same number of bits (the colour depth). So: count the pixels, then multiply by the bits for each one. Then change units to bytes, KB and MB.
By hand: an exam-style question
"An image is 100 × 50 pixels with a colour depth of 4 bits. Work out its size in bytes, then in KB."
Pixels: width × height = 100 × 50 = 5,000 pixels.
Bits: each pixel needs 4 bits. 5,000 × 4 = 20,000 bits.
Bytes: 8 bits make 1 byte, so divide by 8. 20,000 ÷ 8 = 2,500 bytes.
KB: 1,000 bytes make 1 KB, so divide by 1,000. 2,500 ÷ 1,000 = 2.5 KB.
Check it makes sense: a tiny 16-colour image is a few KB. A phone photo is a few MB. ✓
size in bits = width × height × colour depth. Then ÷ 8 for bytes, ÷ 1000 for KB, ÷ 1000 again for MB.
AQA 8525 writes it as W × H × colour depth and asks for bits or bytes. OCR J277 writes colour depth × height × width. Same thing: multiplying works in any order. Both accept ÷ 1000 or ÷ 1024 for KB if you're consistent. Real files are a little bigger (metadata) or much smaller (compression, Topic 7). Exam answers ignore both.
The trade-off: quality against file size
More pixels and more colours make a better picture. They also make a bigger file. Use the toy to feel the trade-off.
Shrink the resolution and the colours
The picture is drawn by maths, then stored at the resolution and colour depth you pick.
| You change… | Pixels | File size |
|---|---|---|
| Double the colour depth (e.g. 8 → 16 bits) | same | × 2 |
| Add 1 bit of colour depth (e.g. 8 → 9 bits) | same | a little bigger, but × 2 the colours |
| Double the width only | × 2 | × 2 |
| Double the width and the height | × 4 | × 4 |
| Halve the width and the height | ÷ 4 | ÷ 4 |
Why does doubling both sides give 4 times the size? Picture a 2 × 2 square of 4 tiles. Make it 4 × 4: now there are 16 tiles. Twice as wide and twice as tall is 2 × 2 = 4 times the tiles.
A school logo for a web page: small, few colours. A photo for a printed poster: high resolution, 24-bit. A thumbnail in a search result: tiny. Pick the lowest settings that still look good for the job.
Metadata: the header that explains the pixels
An image file starts with a header. The header holds metadata: data about the data. It tells the computer how to read the pixel bits that follow.
Change the width in the header
These 24 bits never change. Only the width in the header changes. Which width shows the real picture?
Phones save extra metadata called EXIF: the date, the phone model, and often the exact GPS location. A photo of your front door can tell a stranger where you live. Many social apps strip it out, but messaging and email often keep it.
The law treats a location linked to a person as personal data: UK GDPR and the Data Protection Act 2018 (amended by the Data (Use and Access) Act 2025) in the UK; the EU GDPR and the LOPDGDD 3/2018 in Spain. Schools sharing pupil photos must think about this.
Bonus: bitmap vs vector
A bitmap stores every pixel. A vector image stores instructions to draw shapes, like "circle here, radius 40, orange". The computer redraws the shapes at whatever size you need.
| Bitmap | Vector | |
|---|---|---|
| Stores | The colour of every pixel | Shapes: lines, curves, fills |
| Zoom in | Goes blocky or blurry | Stays sharp at any size |
| Good for | Photos, scans, detailed scenes | Logos, icons, fonts, maps, diagrams |
| File size | Grows with width × height | Grows with the number of shapes |
| File types | JPEG, PNG, GIF, BMP | SVG, PDF drawings, fonts |
The current AQA 8525 and OCR J277 GCSEs only test bitmaps. Vectors are useful background, and they explain why logos and fonts never go blocky.
Common mix-ups
The mistakes nearly everyone makes the first time. Read the left side, then the right.
Colour depth is the number of colours.
Colour depth is the number of bits per pixel. The colours are 2 to the power of it: depth 8 → 256 colours.
Doubling the colour depth doubles the colours.
It doubles the file size. The colours are squared: 8 bits = 256 colours, 16 bits = 65,536.
Double the width and height → double the file size.
4 times the pixels, so 4 times the size.
width × height × depth gives bytes.
It gives bits. Divide by 8 for bytes, before you go to KB or MB.
100 colours need 6 bits, because 2⁶ is close to 100.
2⁶ = 64 is too few. Round up: 7 bits (128).
Zooming in on a photo shows you more detail.
It only makes the stored pixels bigger. Detail that wasn't captured can't appear.
The pixel bits contain the width.
The width lives in the header (metadata). The pixel data is just one long line of bits.
Check yourself
Quick questions first. Then endless practice: a wrong answer shows you the working, step by step.