Lesson 4 of 6 · Data & Binary
Representing Images
Every digital image is a grid of coloured dots. Learn how pixels, colour depth and resolution determine image quality -- and how to calculate file size from first principles.
Define pixel and explain how images are stored as binary
Explain the effect of changing resolution and colour depth on quality and file size
Apply the image file size formula: width x height x colour depth / 8 = bytes
Calculate the minimum number of bits needed for a given number of colours
Pixels and how images are stored
A digital image is a grid of tiny coloured squares called pixels. The word pixel comes from "picture element". Each pixel is a single, solid colour with no gradient or variation within it.
To store a pixel in binary, the computer stores a number representing its colour. Every possible colour in the image's palette is assigned a unique binary value. The more bits used per pixel, the more distinct colours are possible.
Pixel (definition for exams): The smallest element of a digital image. Each pixel is assigned a binary value representing its colour.
Two properties determine the detail and quality of a stored image:
Resolution is the total number of pixels, expressed as width x height (e.g. 1920 x 1080). More pixels means finer detail -- but also a larger file.
Colour depth is the number of bits used to represent each pixel's colour. More bits means more possible colours -- but also a larger file.
Colour depth
| Colour depth | Colours available | Use case |
|---|---|---|
| 1-bit | 21 = 2 (black and white) | Simple icons, QR codes |
| 4-bit | 24 = 16 | Early video games |
| 8-bit | 28 = 256 | Basic web graphics (GIF) |
| 16-bit | 216 = 65,536 | High colour displays |
| 24-bit | 224 = 16,777,216 | True colour photography (8 bits each for Red, Green, Blue) |
24-bit "true colour" stores 8 bits for each of the three colour channels: red, green, blue (RGB). This matches the maximum range the human eye can distinguish in terms of colour variety.
The "bit budget" perspective: Think of colour depth as a budget. 1 bit buys you 2 colours. Each extra bit doubles the palette. But every extra bit also costs storage space for every single pixel in the image. A 4000 x 3000 photograph with 24-bit colour has 12,000,000 pixels, each costing 24 bits -- that is 288,000,000 bits before any compression.
Calculating file size
Image file size formula:
File size (bits) = Width (px) × Height (px) × Colour depth (bits)
File size (bytes) = File size (bits) ÷ 8
File size (KB) = File size (bytes) ÷ 1024
File size (MB) = File size (KB) ÷ 1024
File size (bits) = Width (px) × Height (px) × Colour depth (bits)
File size (bytes) = File size (bits) ÷ 8
File size (KB) = File size (bytes) ÷ 1024
File size (MB) = File size (KB) ÷ 1024
Example: 10 bitmap images, each 800 x 500 pixels, 8-bit colour depth.
Step 1: File size of one image (bits)
800 × 500 × 8 = 3,200,000 bits
Step 2: Convert to bytes
3,200,000 ÷ 8 = 400,000 bytes
Step 3: Convert to kilobytes
400,000 ÷ 1024 = 390.625 KB (per image)
Step 4: Multiply by 10 images
390.625 × 10 = 3,906.25 KB total
Always show each step. A wrong final answer with correct working earns method marks.
Minimum bits for a colour count: if you need to represent 240 different colours, find the smallest n where 2n ≥ 240. Since 27=128 (too small) and 28=256 (large enough), the answer is 8 bits.
Note on metadata: Real image files are slightly larger than this formula predicts because they also store metadata -- information about the image such as its dimensions, creation date, camera settings, and colour profile. In GCSE questions, only calculate the pixel data unless told otherwise.
Pixel Canvas
Pixel Canvas
InteractiveDraw on the grid. Change colour depth to watch the palette shrink and the file size update live. Click a painted pixel to see its binary value.
Colour depth
Palette (click to select)
Grid size16 x 12 = 192 pixels
Colour depth8 bits per pixel
Total bits1,536 bits
File size192 bytes
File size changes when you change colour depth -- not when you paint. Every pixel slot is always stored, regardless of its colour.
Click a pixel to see its binary colour value.
Exam Focus
- File size calculation: show every step labelled (bits, bytes, KB, MB). The examiner follows your working -- a single unlabelled number scores 0.
- Multi-image questions: calculate one image first, then multiply. Do not try to combine both steps at once.
- Minimum bits: always check both n and n-1. State both values explicitly: "27=128 which is less than 240, 28=256 which is enough, so 8 bits".
- Resolution and colour depth both independently affect file size. If resolution doubles, file size doubles. If colour depth doubles (e.g. 8-bit to 16-bit), file size also doubles.
- Pixel definition: "the smallest element of a digital image" is the safe exam phrasing.
Check your understanding
1. What is a pixel?
A pixel is the smallest element (unit) of a digital image. Each pixel has a single colour stored as a binary number.
2. Calculate the file size in kilobytes of a bitmap image with resolution 800 x 500 pixels and colour depth 8 bits. (1 KB = 1024 bytes)
800 x 500 x 8 = 3,200,000 bits. 3,200,000 / 8 = 400,000 bytes. 400,000 / 1024 = 390.625 KB.
3. What is the minimum number of bits needed to represent 240 different colours?
27=128, which is less than 240. 28=256, which is enough. The minimum is 8 bits.
4. An image is changed from 8-bit colour depth to 24-bit colour depth, with resolution unchanged. What happens to the file size?
File size is proportional to colour depth. Going from 8-bit to 24-bit is a factor of 3 (24/8=3), so the file size triples. This is why RAW photography files are much larger than JPEG.
5. A student claims that a 400 x 300 image at 4-bit colour depth has a file size of 60,000 bytes. Are they correct?
400 x 300 x 4 = 480,000 bits. 480,000 / 8 = 60,000 bytes. The student is correct.
Think Deeper
The human eye can distinguish roughly 10 million colours. True colour (24-bit) provides over 16 million. Why do professional photographers use 48-bit (16 bits per channel) images when it exceeds what the eye can see?
The reason is editing headroom, not display. When you adjust brightness, contrast or colour grading in editing software, each operation rounds values. With 8 bits per channel, repeated operations introduce visible "banding" -- colour gradients break into visible steps. With 16 bits per channel (65,536 levels), you can perform many operations before rounding errors become visible, even at the final 8-bit output. Professionals capture at 48-bit for editing latitude, then export at 24-bit for final delivery.
Streaming services compress video far below the uncompressed pixel data formula would suggest. A 4K frame at 24-bit colour would be about 25 MB. Netflix streams 4K at roughly 15-25 Mbps (megabits per second) -- about 1.9-3.1 MB per second, roughly 8 frames worth of data per second for 24 frames per second video. How is this possible?
Video compression exploits two key facts. First, temporal redundancy: most of a frame is identical to the previous frame (a talking head on a still background). Only the changing regions are encoded. Second, spatial redundancy: within a single frame, large areas of similar colour are compressed together. Codecs like H.265 (HEVC) also use perceptual models -- they prioritise detail in areas the eye naturally focuses on (faces, edges) and use coarser encoding for areas the eye ignores (busy backgrounds, dark regions). The result is compression ratios of 100:1 or more with imperceptible quality loss at normal viewing distance.
Printable Worksheets
Practice what you've learned
Three printable worksheets covering digital images at three levels: Recall, Apply, and Exam-style.
Recall
Worksheet 1
Key term matching + colour depth table + file size formula • 16 marks
Apply
Worksheet 2
File size calculations + bitmap vs vector + colour depth questions • 17 marks
Exam-style
Worksheet 3
Extended resolution, file size and evaluation questions • 20 marks
Exam Practice
Lesson 4: Images and Colour
5 MCQ with instant feedback + 3 written questions with mark schemes.
Teacher Panel
Lesson 4 -- Representing Images
Lesson Objectives
Define pixel as the smallest element of a digital image with a binary colour value
State that resolution = width x height (number of pixels)
State that colour depth = bits per pixel; more bits = more colours
Apply the file size formula in all required units (bits, bytes, KB, MB)
Calculate minimum bits needed for a given number of colours
Describe the trade-off: higher quality = larger file size
Timing Guide
0-5 min: Zoom into an image in the browser until pixels are visible -- immediate visual hook
5-12 min: Pixel definition, resolution concept, colour depth table
12-22 min: File size formula -- teacher worked example, then student practice
22-28 min: Pixel canvas tool -- change colour depth, observe palette and file size
28-35 min: Minimum bits questions + "bit budget" discussion
Common Misconceptions
"Higher colour depth means more pixels" -- colour depth only affects the number of possible colours, not the number of pixels. Resolution determines pixel count.
"The file size formula gives KB directly" -- it gives bits. Students must divide by 8 (bytes), then by 1024 (KB). Skipping steps loses marks.
"1 KB = 1000 bytes" -- for this topic, 1 KB = 1024 bytes (unless the question specifies otherwise).
"A higher resolution always looks better" -- only up to the display's resolution. Displaying a 4K image on a 1080p screen offers no visible benefit.
Marking Guidance
File size (2 marks): 1 mark for correct multiplication (W x H x depth), 1 mark for correct conversion. Both steps must be shown. "400,000" with no label or unit = 0 marks.
Minimum bits (1 mark): Must state the answer with justification -- "8 bits because 28=256 which is the smallest power of 2 that is at least 240".
Effect of changing resolution/depth (2 marks): 1 mark for stating quality changes, 1 mark for explaining file size changes and direction.
Exit Tickets
Calculate the total file size (in KB) of 10 images each 800 x 500 pixels at 8-bit colour depth. Show all working. [2 marks]
What is the minimum number of bits needed to represent 240 different colours? [1 mark]
Explain the effect of increasing colour depth from 8-bit to 24-bit on image quality and file size. [2 marks]
Differentiation
Grade 4 Pixel definition. File size calculation for one image (bits only). Colour depth doubles colours per extra bit.
Grade 7 Full file size calculation in KB/MB. Minimum bits calculation. Effect of resolution AND colour depth on file size.
Grade 9 Multi-image calculations. Explain trade-offs for specific contexts (medical imaging vs web thumbnail). Discuss why metadata increases real file sizes beyond the formula.