Pixel Art Studio
Every picture is a grid of tiny coloured squares.
Your mission
Grab your brush, artist! Draw on a canvas of pixels, zoom right in to see what each pixel really stores, then change the resolution and the colour depth. Watch how your picture, and the space it takes up in memory, changes with every click.
Explore
Try all five things in the studio: paint, zoom in, change the resolution, change the colour depth and show the pixel codes.
Welcome to your studio! The picture on the left is made of tiny squares. Paint on it, zoom in with the lens, and try the resolution and colour depth buttons to find out how a computer stores a picture.
0 of 5 discoveries made
Experiment
Complete all five studio experiments.
Studio experiments
Watch the size meter under the picture. Each experiment ticks itself off.
0 of 5 experiments done
Challenge
The size meter is switched off. Take on six commissions using what you have learned.
Studio notes
- Number of pixels = width × height
- Number of colours = 2bits
- Size in bits = width × height × bits per pixel
- Size in bytes = bits ÷ 8
- 1 KiB = 1,024 bytes
Finish all 6 commissions to continue.
Understand
Here is what the studio was showing you, in the words you need for the exam.
Pictures are made of pixels
A bitmap image is a grid of tiny squares called pixels (short for picture elements). Each pixel's value is a binary code that represents its colour.
The resolution is the number of pixels: width × height. An 800 × 600 image has 800 × 600 = 480,000 pixels. More pixels means more detail, and a bigger file.
Colour depth
The colour depth is the number of bits used for each pixel. With n bits you can have 2n colours.
| Bits per pixel | 1 | 2 | 3 | 4 | 8 | 24 |
|---|---|---|---|---|---|---|
| Colours | 2 | 4 | 8 | 16 | 256 | 16,777,216 |
Need at least 40 colours? 25 = 32 is too few, 26 = 64 is enough, so you need 6 bits.
24-bit RGB colour
In 24-bit colour, each pixel has 8 bits for red, 8 for green and 8 for blue, each from 0 to 255. Mixing them gives about 16.7 million colours.
(0, 255, 0) is pure green: no red, full green, no blue. Every 24-bit pixel takes 24 ÷ 8 = 3 bytes.
Working out the file size
Size in bytes = width × height × bits per pixel ÷ 8. Divide by 1,024 for KiB.
640 × 480 × 24 = 7,372,800 bits ÷ 8 = 921,600 bytes ÷ 1,024 = 900 KiB.
Double both the width and the height and there are 4 times as many pixels, so the file is 4 times bigger.
Words to know
- Pixel
- One picture element: a single square of colour in an image.
- Resolution
- The number of pixels, given as width × height.
- Colour depth
- The number of bits stored for each pixel. More bits, more colours.
- RGB
- Red, green and blue values mixed to make a colour, 8 bits each in 24-bit colour.
- Uncompressed size
- Width × height × bits per pixel ÷ 8 bytes, before any compression.
Exam tip
Don't forget to divide by 8! 800 × 600 × 24 = 11,520,000 is the size in bits. In bytes it's 11,520,000 ÷ 8 = 1,440,000. Write the units at every step so you can see which one you have.