Image Representation - GCSE Computer Science

The Idea

Pictures Made of Squares

Open any photo on your phone and zoom in as far as you can. Keep going. Eventually you will see that the image breaks apart into tiny coloured squares. These squares are called pixels (short for “picture elements”), and they are the building blocks of every digital image.

Each pixel stores a single colour, and that colour is represented as a binary number. A digital image is nothing more than a huge grid of these numbers — row after row of binary colour values that your screen decodes and displays as a photograph, a game screenshot, or a meme.

Two key factors determine how an image looks and how much storage space it requires:

Resolution — how many pixels make up the image (width × height)
Colour depth — how many bits are used to store the colour of each pixel

Together, these two factors control the detail, colour richness, and file size of every image your computer handles. Understanding the trade-offs between them is a core part of your GCSE.

Key Concept: Pixels A pixel is the smallest individual element of a digital image. Each pixel stores one colour as a binary number. When millions of these tiny squares are arranged in a grid and viewed from a normal distance, your eyes blend them together into a smooth picture. The more pixels you have and the more colours each pixel can display, the more realistic the image looks — but the larger the file becomes.

Explore

Resolution and Colour Depth

Resolution

The resolution of an image is the number of pixels it contains, expressed as width × height. A higher resolution means more pixels, which means more detail — but also a larger file.

Here are some common resolutions you will encounter:

Name	Resolution	Total Pixels	Typical Use
Old Web	640 × 480	307,200	Early websites, low-quality video
HD (720p)	1280 × 720	921,600	Streaming video, small displays
Full HD (1080p)	1920 × 1080	2,073,600	Most monitors, TV, gaming
4K (Ultra HD)	3840 × 2160	8,294,400	Premium TVs, cinema, pro photography

Notice that going from Full HD to 4K means four times as many pixels — and therefore roughly four times the file size for the same colour depth. Higher resolution always comes at a storage cost.

Colour Depth

Colour depth (also called bit depth) is the number of bits used to store the colour of each pixel. The more bits per pixel, the more colours are available, and the more realistic the image can look.

The number of possible colours is calculated as 2ⁿ, where n is the colour depth in bits:

Colour Depth	Number of Colours	Use Case
1 bit	2¹ = 2	Black and white only (e.g. fax machines, simple icons)
4 bits	2⁴ = 16	Early computer graphics (CGA/EGA era)
8 bits	2⁸ = 256	GIF images, simple web graphics, retro games
16 bits	2¹⁶ = 65,536	High-colour displays, older mobile screens
24 bits	2²⁴ = 16,777,216	True colour — photos, web images (8 bits each for R, G, B)
32 bits	2²⁴ colours + alpha	True colour with transparency (RGBA — used in graphic design)

True colour (24-bit) is the standard for photographs and most images you see on the web. It uses 8 bits for Red, 8 bits for Green, and 8 bits for Blue — giving over 16.7 million possible colour combinations. This is called the RGB colour model.

Metadata

As well as pixel data, image files also store metadata — extra information such as the image dimensions, the date the photo was taken, camera settings (ISO, shutter speed, aperture), GPS location, and the software used to create it. However, metadata is tiny compared to the pixel data, so it barely affects file size calculations. In exams, you can usually ignore metadata when calculating file sizes.

Did You Know? The first ever digital photograph was created in 1957 by Russell Kirsch at the US National Bureau of Standards. It was a picture of his baby son, scanned at just 176 × 176 pixels — that is only 30,976 pixels in total. Today, a typical smartphone photo is 12 megapixels (12 million pixels), nearly 400 times more detail than that very first digital image.

Understand

Calculating Image File Size

One of the most important skills in this topic is being able to calculate the file size of an uncompressed image. The formula is straightforward:

The Formula

File size (bits) = width × height × colour depth

To convert to useful units:
Bits ÷ 8 = Bytes
Bytes ÷ 1,000 = Kilobytes (KB)
KB ÷ 1,000 = Megabytes (MB)

Worked Example 1

Calculate the file size of a 1920 × 1080 image with 24-bit colour depth.

Full HD Photo Calculation

  Step 1:  Total pixels = 1920 × 1080 = 2,073,600 pixels
  Step 2:  File size in bits = 2,073,600 × 24 = 49,766,400 bits
  Step 3:  Convert to bytes = 49,766,400 ÷ 8 = 6,220,800 bytes
  Step 4:  Convert to KB = 6,220,800 ÷ 1,000 = 6,220.8 KB
  Step 5:  Convert to MB = 6,220.8 ÷ 1,000 = 6.22 MB

  Answer: approximately 6.22 MB (uncompressed)

Worked Example 2

Calculate the file size of an 800 × 600 image with 24-bit colour depth.

Web Image Calculation

  Step 1:  Total pixels = 800 × 600 = 480,000 pixels
  Step 2:  File size in bits = 480,000 × 24 = 11,520,000 bits
  Step 3:  Convert to bytes = 11,520,000 ÷ 8 = 1,440,000 bytes
  Step 4:  Convert to KB = 1,440,000 ÷ 1,000 = 1,440 KB
  Step 5:  Convert to MB = 1,440 ÷ 1,000 = 1.44 MB

  Answer: approximately 1.44 MB (uncompressed)

Worked Example 3

Calculate the file size of a 640 × 480 image with 8-bit colour depth.

Low-Colour Image Calculation

  Step 1:  Total pixels = 640 × 480 = 307,200 pixels
  Step 2:  File size in bits = 307,200 × 8 = 2,457,600 bits
  Step 3:  Convert to bytes = 2,457,600 ÷ 8 = 307,200 bytes
  Step 4:  Convert to KB = 307,200 ÷ 1,000 = 307.2 KB
  Step 5:  Convert to MB = 307.2 ÷ 1,000 = 0.31 MB

  Answer: approximately 0.31 MB (uncompressed)

Important: These calculations give you the uncompressed file size. In the real world, images are almost always stored using compression formats like JPEG (lossy — reduces quality slightly to save space), PNG (lossless — no quality loss), or GIF (limited to 256 colours). A 6 MB uncompressed photo might become just 1–2 MB as a JPEG. Exam questions will ask for the uncompressed size unless they specifically mention compression.

Trade-offs: Resolution vs Colour Depth

Understanding the trade-offs is essential for exam questions that ask you to explain the effect of changing image settings:

Change	Effect on Quality	Effect on File Size
Increase resolution (more pixels)	More detail; sharper edges; more realistic	File size increases (more pixels to store)
Increase colour depth (more bits per pixel)	Smoother colour gradients; more realistic shading	File size increases (each pixel needs more bits)
Increase both	Best quality: more detail and richer colours	File size increases dramatically (multiplied effect)
Decrease resolution	Image looks blocky or pixelated	File size decreases
Decrease colour depth	Fewer colours; visible banding in gradients	File size decreases

Exam Tip: Always Show the Formula First In any file size calculation question, always write the formula first before plugging in numbers: File size = width × height × colour depth. Even if you make an arithmetic mistake later, writing the correct formula earns you a method mark. Then show every step of the conversion from bits to bytes to KB to MB.

Case Study: How Colour Depth Affects Smartphone Photos

Modern smartphones typically capture photos with 24-bit colour depth, which gives 16.7 million colours — more than enough for most photography. However, flagship phones from Apple, Samsung, and Google are now offering 30-bit or even 48-bit HDR (High Dynamic Range) photography, which captures over a billion colours and produces incredibly smooth gradients in skies, sunsets, and skin tones.

Why does this matter? With low colour depth, smooth gradients (like a blue sky fading from light to dark) can show visible banding — harsh lines where one shade abruptly changes to the next, instead of blending smoothly. Higher colour depth eliminates this problem, but the file sizes increase significantly.

Consider a typical 12-megapixel (12 million pixels) smartphone photo:

At 24-bit colour depth: 12,000,000 × 24 = 288,000,000 bits = ~36 MB uncompressed
At 48-bit colour depth: 12,000,000 × 48 = 576,000,000 bits = ~72 MB uncompressed

This is exactly why your phone uses compression (usually JPEG or HEIF). Without it, you would fill your phone’s storage with just a few hundred photos!

Exercise 1: Image File Size Calculator

A random image will appear below with its width, height, and colour depth. Calculate the file size in MB (to 2 decimal places). Remember: bits ÷ 8 = bytes, then ÷ 1,000 twice to get MB.

Score: 0 / 0

Exercise 2: Pixel Art Creator

Click on the squares below to toggle between black (1) and white (0). This is a 1-bit colour depth image — each pixel is stored as a single bit. Try drawing a simple pattern!

Practice

Test Yourself

Click on each question to reveal the answer. Try to work it out yourself first!

Q1: What is meant by the “resolution” of a digital image?

Answer: The resolution of a digital image is the number of pixels that make up the image, expressed as width × height (e.g. 1920 × 1080). A higher resolution means more pixels and therefore more detail, but it also results in a larger file size.

Q2: An image has a colour depth of 8 bits. How many different colours can each pixel display?

Answer: 256 colours.

The number of colours is 2ⁿ, where n is the colour depth. So 2⁸ = 256.

Q3: Calculate the file size in MB of a 2048 × 1536 image with 24-bit colour depth.

Answer:

File size = 2048 × 1536 × 24 = 75,497,472 bits

75,497,472 ÷ 8 = 9,437,184 bytes

9,437,184 ÷ 1,000 = 9,437.184 KB

9,437.184 ÷ 1,000 = 9.44 MB (to 2 d.p.)

Q4: Explain why increasing the colour depth of an image increases the file size.

Answer: Increasing the colour depth means using more bits to store each pixel’s colour. Since file size = width × height × colour depth, increasing the colour depth directly increases the number of bits needed for every single pixel in the image. For example, changing from 8-bit to 24-bit colour means each pixel needs three times as many bits, so the file size triples — even though the resolution has not changed.

Q5: What does “true colour” mean, and how many bits does it use?

Answer: True colour uses 24 bits per pixel — 8 bits for red, 8 bits for green, and 8 bits for blue (the RGB model). This gives 2²⁴ = 16,777,216 different colours, which is considered enough to represent photographic images realistically to the human eye. Each of the three colour channels can have a value from 0 to 255.

Q6: A 500 × 400 image has a file size of 200,000 bytes. What is the colour depth?

Answer:

Start with the formula: File size (bits) = width × height × colour depth

Convert bytes to bits: 200,000 × 8 = 1,600,000 bits

Total pixels: 500 × 400 = 200,000 pixels

Colour depth = 1,600,000 ÷ 200,000 = 8 bits per pixel

Q7: Give two reasons why images are usually stored in a compressed format rather than as raw bitmap data.

Answer:

File size reduction: Uncompressed images are very large (e.g. a Full HD 24-bit image is over 6 MB). Compression significantly reduces the file size, meaning images take up less storage space on devices and hard drives.
Faster transmission: Smaller files are quicker to upload, download, and share over the internet. A compressed JPEG loads much faster on a website than an uncompressed bitmap, improving the user experience and reducing bandwidth costs.

Understand

Key Vocabulary

Make sure you know all of these terms for your exam:

Term	Definition
Pixel	The smallest individual element of a digital image. Short for “picture element.” Each pixel stores one colour as a binary value.
Resolution	The number of pixels in an image, expressed as width × height (e.g. 1920 × 1080). Higher resolution means more detail but a larger file size.
Colour Depth	The number of bits used to represent the colour of each pixel. A colour depth of n bits allows 2ⁿ different colours.
True Colour	24-bit colour depth, using 8 bits each for red, green, and blue (RGB). Supports 16,777,216 colours — enough for photographic realism.
Metadata	Additional data stored in an image file beyond the pixel data, such as dimensions, date taken, camera settings, and GPS location.
Bitmap	An image format that stores colour data for every individual pixel in a grid. “Bitmap” is also a general term for any pixel-based (raster) image.
RGB	Red, Green, Blue — the colour model used by screens and digital images. Colours are created by mixing different intensities of red, green, and blue light.

Explore

Exam Tips

Exam Tip 1: The Formula Is Your Best Friend Write this formula at the top of every image file size question: File size (bits) = width × height × colour depth. Even if you get the arithmetic wrong, writing the correct formula earns you a mark. Then convert carefully through the units: bits → bytes (÷ 8) → KB (÷ 1,000) → MB (÷ 1,000). Show every step.

Exam Tip 2: Unit Conversion Traps The most common mistake is forgetting to divide by 8 when converting from bits to bytes. Remember: there are 8 bits in a byte. Some students also confuse KB and MB by dividing or multiplying by the wrong amount. Write out the conversion chain so examiners can follow your working: bits → ÷ 8 → bytes → ÷ 1,000 → KB → ÷ 1,000 → MB.

Exam Tip 3: Explaining the Effect of Changes A common 4–6 mark question asks you to “explain the effect of increasing the resolution / colour depth.” A strong answer covers both sides: the benefit (more detail or more colours) and the drawback (larger file size). Use specific numbers where possible. For example: “Doubling the width and height of an image quadruples the number of pixels, which quadruples the file size, because file size = width × height × colour depth.”

Exam Tip 4: Rearranging the Formula Some questions give you the file size and ask you to find the colour depth (or the resolution). You need to rearrange the formula. For example: Colour depth = file size in bits ÷ (width × height). Make sure you convert the file size to bits first (multiply bytes by 8) before dividing. Practise this — it catches many students out.

Exam Practice

Past Paper Questions

Try these exam-style questions, then click to reveal the mark scheme answer.

Calculate the file size in bytes of an image that is 640 × 480 pixels with a colour depth of 8 bits. Show your working. 3 marks

Mark scheme:

File size = width × height × colour depth (1 mark)

= 640 × 480 × 8 = 2,457,600 bits (1 mark)

= 2,457,600 ÷ 8 = 307,200 bytes (300 KB) (1 mark)

Explain how increasing the resolution of an image affects its quality and file size. 3 marks

Mark scheme:

Increasing resolution means more pixels are used to represent the image (1)
More pixels means more detail / higher quality / smoother appearance (1)
More pixels means more data to store, so the file size increases (1)

An image has a file size of 1,228,800 bits. The image dimensions are 640 × 480. Calculate the colour depth of the image. 2 marks

Mark scheme:

Colour depth = file size ÷ (width × height) (1 mark)

= 1,228,800 ÷ (640 × 480) = 1,228,800 ÷ 307,200 = 4 bits (1 mark)

Reflect

Image Representation in Everyday Life

Understanding image representation is not just an exam topic — it explains the technology you interact with every day:

Every photo you take on your phone is a grid of millions of pixels, each one stored as a 24-bit (or higher) colour value. Your phone’s camera sensor captures light and converts it into these binary colour values millions of times per second.
Social media platforms like Instagram and Snapchat compress your images when you upload them, reducing the resolution and applying JPEG compression to save bandwidth. That is why photos sometimes look slightly worse after uploading.
Video games render images in real time. Your GPU (graphics processing unit) calculates the colour of every pixel on your screen 30, 60, or even 120 times per second. A 4K display at 60 fps means calculating the colour of 8.3 million pixels × 60 = nearly 500 million pixel colour values every second.
Medical imaging (X-rays, MRI scans) uses very high colour depths (12–16 bits per channel) so that doctors can see subtle differences in tissue density. Losing detail through low colour depth could mean missing a diagnosis.

From the 176 × 176 first digital image of 1957 to today’s 100-megapixel smartphone cameras, image representation shows how the same fundamental principles — pixels, resolution, and colour depth — scale to meet ever-growing demands for visual quality.

Video Resources

▶️

Craig 'n' Dave: Representing ImagesPixels, resolution, and colour depth

Pictures Made of Squares

Resolution and Colour Depth

Resolution

Colour Depth

Metadata

Calculating Image File Size

Worked Example 1

Worked Example 2

Worked Example 3

Trade-offs: Resolution vs Colour Depth

Exercise 1: Image File Size Calculator

Exercise 2: Pixel Art Creator

Test Yourself

Key Vocabulary

Exam Tips

Past Paper Questions

Image Representation in Everyday Life

Video Resources

Further Reading