Computer Systems · Data Representation

CS5 — Bitmap and Vector Graphics

📅 Mon 22 Jun 2026 · P1+P2 (double)

⏱ ~120 minutes

Learning intentions

I can describe how bitmap graphics store images as grids of pixels with binary colour values
I can explain colour depth and resolution and use them to calculate file size
I can describe how vector graphics store images as mathematical descriptions of shapes
I can compare bitmap and vector graphics, identifying appropriate uses for each

Success criteria

I can apply the formula: file size (bits) = resolution × colour depth, then convert to bytes, KB, or MB
I can state that increasing colour depth or resolution increases file size
I can name at least two attributes stored per object in a vector graphic (e.g. coordinates, colour, line thickness)
I can justify whether bitmap or vector is more suitable for a described scenario

Warm up — recap from CS4

Answer from memory · check when done

Warm-up 1

How many different characters can be represented using 8 bits?

Warm-up 2

A document stores 200 English characters. How many more bytes does 16-bit Unicode use compared to ASCII?

100 bytes more

Incorrect — 16-bit Unicode uses 2 bytes per character vs ASCII's 1 byte. The extra cost is 1 byte per character × 200 characters = 200 bytes.

400 bytes more

Incorrect — ASCII = 200 × 1 = 200 bytes; 16-bit Unicode = 200 × 2 = 400 bytes. The difference is 200 bytes, not 400.

200 bytes more

Correct — ASCII: 200 × 1 = 200 bytes. 16-bit Unicode: 200 × 2 = 400 bytes. Difference = 400 − 200 = 200 bytes extra.

200 bytes more only if the document contains non-English characters

Incorrect — the storage increase occurs regardless of whether the characters are English or not. Fixed-width 16-bit Unicode always uses 2 bytes per character.

Warm-up 3

How many different colours can be represented using 4 bits of colour information? (Hint: use 2ⁿ.)

Key vocabulary

Pixel

The smallest unit of a bitmap image. Each pixel stores a single colour value as a binary number.

Resolution

The total number of pixels in an image, usually expressed as width × height (e.g. 1920 × 1080).

Colour depth

The number of bits used to store the colour of each pixel. More bits = more possible colours = 2ⁿ colours.

Bitmap graphic

An image stored as a grid of pixels, each with a binary colour value. Also called a raster image.

Vector graphic

An image stored as mathematical descriptions of shapes (objects), each defined by attributes such as coordinates, dimensions, colour, and line thickness.

Scalable

Able to be resized without loss of quality. Vector graphics are scalable; bitmaps are not — enlarging a bitmap causes pixelation.

Notes

Bitmap graphics: pixels and colour

A bitmap graphic stores an image as a rectangular grid of pixels (picture elements). Each pixel is a single coloured dot, and its colour is stored as a binary number. When you zoom in far enough on any photo, you can see the individual square pixels.

The two key properties that determine a bitmap image's quality and file size are:

Resolution — the total number of pixels (width × height). A 1920 × 1080 image has 2,073,600 pixels (about 2 megapixels).
Colour depth — the number of bits used to store each pixel's colour. More bits = more possible colours.

Zoomed-in bitmap showing individual pixels — each square stores one colour value as binary data.

Colour depth and the number of colours

Colour depth determines how many distinct colours an image can contain. The formula is:

Number of colours = 2^{colour depth}

Colour depth	Colours available	Typical use
1-bit	2¹ = 2	Black and white only
4-bit	2⁴ = 16	Early colour displays
8-bit	2⁸ = 256	Web graphics, thumbnails
24-bit	2²⁴ = 16,777,216	Photographs, "true colour"

24-bit colour, also called true colour, allocates 8 bits each to red, green, and blue channels. With 256 levels per channel and 256 × 256 × 256 combinations, the resulting 16.7 million colours exceeds what the human eye can distinguish — which is why it became the standard for photographic images.

Calculating bitmap file size

The uncompressed file size of a bitmap image is calculated with one formula:

File size (bits) = resolution (pixels) × colour depth (bits per pixel)

Then convert: divide by 8 to get bytes, divide by 1,024 to get KB, divide by 1,024 again to get MB.

Vector graphics: mathematics instead of pixels

A vector graphic stores an image as a set of geometric objects (shapes). Instead of recording the colour of each individual pixel, a vector file records the mathematical properties — the attributes — of each shape:

Coordinates (x, y position)
Dimensions (width, height, radius)
Fill colour and opacity
Outline (stroke) colour and line thickness
Shape type (circle, rectangle, polygon, Bézier curve, text…)

When the image is displayed, the computer calculates exactly where to draw each shape at the required size. This is why vector images can be scaled to any size — whether a thumbnail or a billboard — without any loss of quality. The maths is simply recalculated for the new dimensions.

A green circle — two ways to store it Same data, different format

Bitmap storage

10110100 11001011
01001101 10100110
11001010 01101101
…millions of pixel values

Every pixel recorded individually

Vector storage

circle
cx=200 cy=200
r=150
fill=#1D9E75

Four attributes describe the whole shape

Advantages and disadvantages of each format

🖼️ Bitmap

Advantages

Can represent photographic images with complex, realistic colour gradients
Every pixel is individually editable — pixel-level retouching is possible
Widely supported by all devices and software

Disadvantages

Large file sizes — every pixel must be stored
Pixelates (becomes blocky) when scaled up — quality cannot be recovered
File size scales directly with resolution and colour depth

📐 Vector

Advantages

Scalable to any size without quality loss — the maths is recalculated
Small file size for simple images (logos, diagrams, icons)
Individual objects remain independently editable

Disadvantages

Cannot represent photographic images — no way to store millions of individual pixel colours
Not suitable for complex images with subtle colour gradations
Requires more processing power to render at display time

Worked examples

Example 1 — File size of a 1024 × 768 image at 24-bit colour

Calculate the total number of pixels:
1024 × 768 = 786,432 pixels

Multiply by colour depth to get the total in bits:
786,432 × 24 = 18,874,368 bits

Convert bits to bytes (÷ 8):
18,874,368 ÷ 8 = 2,359,296 bytes

Convert bytes to MB (÷ 1,024 twice):
2,359,296 ÷ 1,024 = 2,304 KB
2,304 ÷ 1,024 = 2.25 MB

✓

A 1024 × 768 pixel image at 24-bit colour depth has an uncompressed file size of 2.25 MB. This is the raw, uncompressed size — formats like JPEG compress this significantly in practice.

Example 2 — Same resolution at 8-bit colour: the effect on file size

Same resolution: 1024 × 768 = 786,432 pixels

Multiply by colour depth (now 8 bits):
786,432 × 8 = 6,291,456 bits

Convert to bytes (÷ 8): 6,291,456 ÷ 8 = 786,432 bytes

Convert to MB: 786,432 ÷ 1,024 = 768 KB → 768 ÷ 1,024 = 0.75 MB

✓

At 8-bit colour the file is 0.75 MB — exactly 3× smaller than the 24-bit version (2.25 MB ÷ 0.75 MB = 3). This makes sense: 24 ÷ 8 = 3. Halving or tripling colour depth scales file size in direct proportion.

Example 3 — Bitmap or vector? Justifying a choice

Scenario A: A company needs to create a logo that will appear on business cards, posters, and a website header at various sizes. Which format is more appropriate?

Answer: Vector. A logo is a simple graphic with flat colours and defined shapes — ideal for vector. Crucially, it must be printed at many different sizes without loss of quality. Vector graphics are scalable without any degradation, so the same file works at every size from 2 cm to 2 m.

Scenario B: A photographer wants to edit and publish a portrait photograph. Which format is more appropriate?

✓

Answer: Bitmap. A photograph contains millions of pixels with complex, continuous colour variation — exactly what bitmap is designed for. Vector cannot represent photographic images because there are no distinct shapes to describe; every pixel must be recorded individually.

Now you try

Calculate the uncompressed file size in KB of a 640 × 480 pixel image stored at 8-bit colour depth. (1 KB = 1,024 bytes.)

⚠️ Common mistakes — examiner feedback

Confusing resolution and colour depth in calculations: Resolution is the number of pixels; colour depth is the bits per pixel. They multiply together to give the total bits. Swapping them (e.g., writing "600 × 8 bits" when the colour depth is 600) will give the wrong answer.
Forgetting to convert bits to bytes: The formula gives the answer in bits. Always divide by 8 to get bytes, then divide by 1,024 to get KB, and again for MB. Missing a step is the most common calculation error.
Saying vector is "better quality" than bitmap: This is too vague and will not score marks. The correct statement is that vector graphics can be scaled to any size without loss of quality. For photographs, bitmaps are the appropriate format — vector cannot represent them at all.
Saying bitmap files are always large: File size depends on both resolution AND colour depth. A small, low-colour-depth bitmap can be very small. Always refer to both factors.

📝 Exam tip

"State one advantage of vector graphics over bitmap" is frequently asked. The answer that scores marks is: "Vector graphics can be scaled to any size without loss of quality." Writing just "better quality" or "clearer image" is too vague and will not score. You must include the phrase without quality loss (or without pixelation, or without degradation).

For file size questions, lay out every step. A correct final answer with no working shown may lose a method mark. Always show: pixels → bits → bytes → KB or MB.

Task Set A

Task Set A — Higher core

Work through all questions. Show all working for calculations.

How many colours can be represented using a colour depth of 8 bits?

How many colours can be represented using a colour depth of 24 bits?

A bitmap image has a resolution of 800 × 600 pixels and a colour depth of 24 bits. What is the file size in bytes?

A bitmap image has a resolution of 1024 × 768 pixels and a colour depth of 24 bits. What is the uncompressed file size in MB? (1 MB = 1,024 × 1,024 bytes)

The same 1024 × 768 image is saved at 8-bit colour depth instead. What is the new file size in MB?

A designer doubles the resolution of an image (both width and height) and also doubles the colour depth. By what factor does the file size increase?

2 times larger

Incorrect — doubling width and height quadruples the pixel count (2×2=4). Then doubling colour depth doubles the bits per pixel. 4 × 2 = 8 times larger overall.

4 times larger

Incorrect — 4× would be the increase from doubling resolution alone (2 × 2 = 4 times more pixels). The doubled colour depth adds another factor of 2.

8 times larger

Correct — doubling both width and height multiplies pixel count by 4. Doubling colour depth multiplies bits per pixel by 2. Total: 4 × 2 = 8 times the original file size.

16 times larger

Incorrect — 16× would require doubling all three dimensions (w × h × depth), but resolution is a 2D measurement. Doubling both dimensions gives 2 × 2 = 4, not 2 × 2 × 2.

A7 — past paper style (2 marks)

Explain why vector graphics can be resized without loss of quality, while bitmap graphics cannot.

A8 — past paper style (2 marks)

A company wants to store its logo so it can be used on both a business card and a 3-metre banner without losing quality. Explain which graphic format is more suitable, and why.

A9 — past paper style (1 mark)

A photographer needs to store a digital portrait taken at a wedding. Explain which graphic format is more suitable, and why.

A10 — extended (3 marks)

A video camera records at 1920 × 1080 pixels with 24-bit colour depth. Calculate the uncompressed file size of a single frame in MB. Then estimate how many MB one second of video (30 frames) would require. Show all working.

✅ Higher checkpoint — A4/A5 (file size calculations), A7 (scalability explanation), and A8/A9 (format justification) are the most exam-relevant. Confident on all five = ready for the SQA exam.

Task Set B

Task Set B — Extension · Beyond the specification

No auto-check — self-assess using the model answers.

A 4K video camera records at 3840 × 2160 pixels with 24-bit colour at 60 frames per second. Calculate the uncompressed data rate in GB per second. Show all working and comment on what this tells us about the need for video compression.

Compare a 1-bit bitmap image (the smallest practical colour depth) with a 32-bit image (common in professional editing software). Calculate example file sizes for each, name a realistic use case for each colour depth, and explain why the extra bits in 32-bit format are useful.

A student argues that as screens get higher resolution, vector graphics will eventually replace bitmap completely. Evaluate this argument: in what situations does it have merit, and where does it break down? Use examples.

📁 File this in OneNote under:
Higher Computing Science → Computer Systems → CS5

📌 Teacher notes — not for pupils (Shift+T to toggle)

Timing (120 min double):
5 min — warm up (CS4 recap), circulate
5 min — key vocabulary together
10 min — bitmap: pixels, colour depth, resolution — use the pixel demo on screen, zoom into a photo on the projector
10 min — file size formula — worked example 1 together on board; pupils verify with their own calculator
5 min — worked example 2: effect of colour depth on file size
10 min — vector graphics: what is stored, contrast with bitmap, context-clash diagram
5 min — comparison cards: when to use each
5 min — now you try, then cold call
5 min — common mistakes and exam tip
25 min — tasks
5 min — cold call on A7/A8 (most exam-relevant)

Watch for: pupils who multiply resolution × colour depth but forget to divide by 8 to get bytes. Also watch for pupils who say vector is "always better" — always redirect to "better for what?" Photographs cannot be stored as vectors.

Practical demo: Open a photo in an image editor, zoom to 400%, and show individual pixels. Then open an SVG logo, scale it to 3000% — no pixelation. This is more memorable than any diagram.

A10 bridges neatly into why compressed video formats (MP4, H.264) exist — worth a brief mention even if pupils don't attempt the extension. The contrast between 177 MB/s uncompressed vs real-world H.264 at ~5 MB/s is striking.