Year 9 · Spring 2 · Representations: going audio-visual

Pixels and colour depth

What this lesson covers

Topic 5 Representing images

KS3 Computing · A picture is a grid of tiny squares called pixels. Each pixel's colour is stored as a binary number. More pixels and more colours make a better picture, and a bigger file.

Computer SystemsCambridge Lower Secondary Computing 0860

You will learn to

Explain that a bitmap image is a grid of pixels, each stored as a binary number.
Calculate how many colours n bits give, using 2 to the power n.
Decode a row of bits into pixels, using a colour key.
Explain why a bigger colour depth means a bigger file.

Success criteria

I can paint a 1-bit image, then an 8-colour image, in the pixel toy.
I can say that 3 bits give 8 colours and 8 bits give 256.
I can turn a row of bits into the right row of pixels.

Key words

Say each word, then read what it means. Every one is in the glossary too.

pixel: The smallest single-colour dot of an image.
bitmap: An image stored as a grid of pixels.
colour depth: Bits per pixel. Sets how many colours are possible.
Resolution: Number of pixels: width × height.
Metadata: Data about data, like an image's width and height.
Vector: An image stored as shapes and instructions.

The explanation

Read it here, or open the study page below to go one step at a time with things to try.

Pixels

Zoom right into a photo and it becomes little squares. Each is a pixel: the smallest dot of one colour. This kind of image is a bitmap.

More colours = more bits per pixel

Bits per pixel = colour depth. Same rule as before: n bits give 2ⁿ colours.

Colour depth	Colours	Use
1 bit	2	Black and white
2 bits	4	Very early games
8 bits	256	GIFs, retro graphics
24 bits	about 16.7 million	Normal photos

How 24-bit colour works (RGB)

Screens mix three lights: Red, Green, Blue. Each gets 1 byte (0–255). 3 × 8 = 24 bits.

Colour	Red	Green	Blue	Hex
Black	0	0	0	#000000
White	255	255	255	#FFFFFF
Red	255	0	0	#FF0000
Yellow	255	255	0	#FFFF00
Orange	255	128	0	#FF8000

?Why?

Why is red + green = yellow? Mixing light adds colours. Mixing paint takes them away. Screens make light.

Study it

Open the study page and go one step at a time.

Topic 5 · Year 9

Representing images

A picture is a grid of tiny squares called pixels. Each pixel's colour is a binary number. More pixels and more colours = better picture, bigger file.

The steps for this lesson

Topic 5, step 2: Black and white (Paint pixels)
Topic 5, step 3: Colour depth (How many colours?)

Try it

Check yourself

One question at a time. The reason shows after each answer.

Saved on this device.