← Course home N5 Computing Science  ·  James Gillespie's
CS  ·  Computer Systems

Data Representation: Graphics

Computer Systems · Lesson 3 of 10 ~50 minutes
Learning intentions
  • Describe how vector graphics represent images as objects and attributes
  • Identify the four vector objects required at N5: rectangle, ellipse, line, polygon
  • Identify the three vector attributes required at N5: coordinates, fill colour, line colour
  • Describe how bitmap graphics represent images as a grid of pixels
  • Explain the terms resolution, bit depth and colour depth in relation to bitmaps
  • Calculate the file size of a bitmap image
  • Compare the advantages and disadvantages of vector and bitmap graphics
Success criteria
  • I can describe what a vector graphic is and name the four N5 objects
  • I can list the three N5 vector attributes and explain what each one does
  • I can describe how a bitmap graphic stores image data using pixels
  • I can explain what bit depth means and calculate how many colours a given bit depth can represent
  • I can calculate the file size of a bitmap image given resolution and bit depth
  • I can compare vector and bitmap graphics, giving advantages and disadvantages of each
Warm up — what do you already know?

Answer before the lesson begins. These check prior knowledge — it's fine if you're unsure.

1. How many colours can be represented using 1 bit per pixel?

2. How many colours can be represented using 8 bits per pixel?

3. A screen is described as 1920 × 1080 pixels. How many pixels does it contain in total?

Key vocabulary

Vector graphic
A graphic stored as a list of mathematical instructions describing objects and their attributes.
Bitmap graphic
A graphic stored as a 2D grid of pixels, each with a colour value stored in binary.
Object
A shape within a vector image (e.g. a rectangle, ellipse, line or polygon).
Attribute
A property of a vector object that defines its appearance (e.g. coordinates, fill colour, line colour).
Pixel
The smallest individual element of a bitmap image; a single dot of colour.
Resolution
The total number of pixels in an image, often expressed as width × height (e.g. 1920 × 1080).
Bit depth
The number of bits used to represent the colour of a single pixel.
Colour depth
Another term for bit depth; determines how many different colours can be used in the image.
File size
The amount of storage required by an image, calculated as: resolution (pixels) × bit depth (bits per pixel).
Scalability
The ability to resize an image without loss of quality; a key advantage of vector graphics.

Data Representation: Graphics

Two ways to store graphics

Computers can store images in two fundamentally different ways. The method chosen affects the file size, the quality when the image is scaled, and what the image is best suited for. Understanding the difference between vector and bitmap graphics is a core exam topic in N5 Computer Systems.

Vector graphics — images as instructions

A vector graphic does not store a picture dot-by-dot. Instead, it stores a list of mathematical instructions describing the shapes (objects) that make up the image, along with the properties (attributes) of each shape. The image is reconstructed from those instructions every time it is displayed.

Objects are the building blocks of a vector image. At N5, you need to know four — a useful mnemonic is RELP:

  • Rectangle — a four-sided shape with right angles
  • Ellipse — an oval or circle shape
  • Line — a straight line between two points
  • Polygon — an irregular multi-sided shape defined by a series of points

Attributes define how each object looks. At N5, three attributes are required — a useful mnemonic is CFL:

  • Coordinates — the position of the object on the canvas (e.g. x=50, y=100)
  • Fill colour — the colour inside the shape
  • Line colour — the colour of the shape's border/outline

For example, a red rectangle with a black outline might be described as:
Rectangle(x=10, y=20, width=200, height=100, fillColour=red, lineColour=black)

This is a compact description — just a few values. The graphic itself is redrawn each time it is displayed by following those instructions.

Coordinates (x=130, y=50) Fill colour #E1F5EE Line colour #1D9E75 Object: Rectangle
A vector rectangle and its three N5 attributes: coordinates, fill colour, and line colour.

Advantages of vector graphics:

  • Images can be scaled to any size without loss of quality, because they are redrawn from the instructions each time
  • File sizes are small for simple illustrations (only a list of object descriptions is stored)
  • Individual objects can be selected and edited independently

Disadvantages of vector graphics:

  • Not suitable for photographs or real-life images — natural scenes contain too much variation to describe mathematically as a list of objects
  • Complex images with many objects can still produce large files

Bitmap graphics — images as grids of pixels

A bitmap graphic divides the image into a regular 2D grid of tiny squares called pixels. Each pixel is assigned a colour value, which is stored as a binary number. When the image is displayed, the computer reads every pixel's binary value and lights up the corresponding dot on the screen.

Resolution describes the number of pixels in an image, typically expressed as width × height (e.g. 1920 × 1080). The total pixel count is width multiplied by height. A higher resolution means more detail — and more data to store.

Bit depth (also called colour depth) is the number of bits used to store each pixel's colour. The more bits per pixel, the more colours can be represented. The formula is 2n, where n is the bit depth:

  • 1 bit per pixel → 21 = 2 colours (black and white only)
  • 4 bits per pixel → 24 = 16 colours
  • 8 bits per pixel → 28 = 256 colours
  • 24 bits per pixel → 224 = 16,777,216 colours ("true colour")

Each additional bit doubles the number of possible colours.

Calculating file size:

File size (in bits) = number of pixels × bit depth
= (width × height) × bits per pixel

To convert bits to bytes, divide by 8. To convert bytes to kilobytes, divide by 1024.

Stored value: 00000000 6×6 pixel grid
Each pixel stores a binary value representing its colour. The highlighted white pixel stores 00000000 (8-bit colour depth).

Advantages of bitmap graphics:

  • Can capture real-life detail (photographs from digital cameras, scanned images)
  • Directly maps to how screens display images — one pixel in the file corresponds to one pixel on screen
  • Universally supported by all software

Disadvantages of bitmap graphics:

  • Scaling up causes pixelation — the image becomes blocky because the pixel grid is fixed and cannot be redrawn at a new size
  • File sizes can be very large for high-resolution, high colour-depth images
  • Editing one part of the image affects the surrounding pixels

Comparing the two methods

A photograph taken on a phone camera is always a bitmap — it captures real-world detail pixel by pixel. A company logo or a diagram created in a drawing package is typically a vector — it needs to be printed at many different sizes without losing quality. Both formats are essential; choosing the right one depends on the content and its intended use. Diagrams, logos, and illustrations suit vectors; photographs and scanned images suit bitmaps.

Worked examples

Example 1 — Identifying vector objects and attributes

"A circle is drawn with its centre at coordinates (150, 200), a yellow fill and a blue outline. Identify the object type and state its three N5 attributes."

1
Object type: Ellipse. (A circle is a special case of an ellipse — ellipse is the correct N5 term.)
2
Coordinates: (150, 200) — the position of the object on the canvas.
3
Fill colour: yellow — the colour inside the shape.
4
Line colour: blue — the colour of the shape's border/outline.
Example 2 — Calculating number of colours from bit depth

"An image uses 4 bits per pixel. How many different colours can be displayed?"

1
Use the formula: number of colours = 2n, where n = bit depth.
2
Substitute: 24 = 2 × 2 × 2 × 2 = 16.
3
Answer: 16 different colours can be represented with a 4-bit colour depth.
Example 3 — Calculating bitmap file size

"A bitmap image is 640 pixels wide and 480 pixels tall. It uses 24-bit colour. Calculate the file size in bits, bytes, and kilobytes."

1
Total pixels: 640 × 480 = 307,200 pixels.
2
File size in bits: 307,200 × 24 = 7,372,800 bits.
3
Convert to bytes: 7,372,800 ÷ 8 = 921,600 bytes.
4
Convert to KB: 921,600 ÷ 1024 ≈ 900 KB.
Example 4 — Comparing scaling behaviour

"Explain what happens when you scale up a vector graphic compared to a bitmap graphic."

1
Vector: The image is redrawn from its mathematical instructions at the new size. A circle described by a centre point and radius is simply redrawn with a larger radius — no quality loss occurs.
2
Bitmap: The existing pixels are stretched or new pixels are guessed (interpolated). Because the pixel grid is fixed, enlarging it causes a blocky, pixelated appearance — the image loses quality.
3
Conclusion: Vectors are resolution-independent; bitmaps are resolution-dependent. This is the key reason logos and diagrams are stored as vectors.
Now you try

A bitmap image is 200 pixels wide and 150 pixels tall. It uses a bit depth of 8.

Show your working for each step:

  1. Calculate the total number of pixels in the image.
  2. Calculate the file size in bits.
  3. Convert the file size to bytes.
  1. Total pixels: 200 × 150 = 30,000 pixels.
  2. File size in bits: 30,000 × 8 = 240,000 bits.
  3. Convert to bytes: 240,000 ÷ 8 = 30,000 bytes.
Common mistakes
✕
"Vector graphics are better than bitmap graphics." Neither is universally better. Vectors suit diagrams, logos, and illustrations; bitmaps suit photographs and scanned images. The exam may ask you to justify which is appropriate — "better" alone scores nothing.
✕
"Resolution is the same as image quality." Resolution (pixel count) and bit depth both affect quality. A high-resolution image with a bit depth of 1 would be black and white only. You need both a high resolution and an appropriate bit depth to achieve good quality.
✕
"Scaling a bitmap is fine." Enlarging a bitmap stretches the fixed pixel grid and causes pixelation. Only vectors can be scaled to any size without quality loss.
✕
"More bits per pixel means fewer colours." It is the opposite: each additional bit doubles the number of colours. 1 bit = 2 colours; 8 bits = 256 colours; 24 bits ≈ 16.7 million colours. The formula is 2n.
✕
Forgetting to multiply width × height before applying bit depth. In file size calculations, always calculate total pixels first (width × height), then multiply by bit depth. Multiplying the wrong values is the most common arithmetic error in this topic.
Exam tip

File size calculations appear regularly in N5 exams. Memorise the formula: file size (bits) = width × height × bit depth. Always show each step in your working — marks are awarded for method even if you make an arithmetic error. Also practise identifying whether a described graphic is vector or bitmap from context clues in the question: diagrams and logos → vector; photographs and scans → bitmap. If asked to "justify" your choice, refer explicitly to the property that makes one type more suitable (e.g. "scalability" for vector, "capturing real-life detail" for bitmap).

Task Set

Questions 1–5 are auto-checked. Questions 6–10 are self-marked — write your answer, then reveal the model answer to check your work.

1. Which of the following is stored as a list of objects and attributes? TYPE 1

2. Which of the following is NOT one of the four N5 vector objects? TYPE 1

3. What does bit depth determine in a bitmap image? TYPE 1

4. An image has a bit depth of 3. How many colours can be displayed? TYPE 1

5. A bitmap image is 100 × 100 pixels with a bit depth of 8. What is the file size in bits? TYPE 1

6. Describe what is meant by "resolution" in relation to a bitmap image. TYPE 2

Resolution is the total number of pixels used to represent a bitmap image. It is usually expressed as width × height (e.g. 1920 × 1080). A higher resolution means more pixels and therefore more detail, but also a larger file size.

7. A vector graphic stores an ellipse. State three attributes that would be used to describe it at N5. TYPE 2

The three required N5 attributes are: coordinates (the position of the ellipse on the canvas), fill colour (the colour inside the shape), and line colour (the colour of the outline/border).

8. Give one advantage of vector graphics over bitmap graphics, and one advantage of bitmap graphics over vector graphics. TYPE 2

Vector advantage: vectors can be scaled to any size without loss of quality, because the image is redrawn from mathematical instructions at the new size.

Bitmap advantage: bitmaps can capture real-life detail such as photographs, which vector graphics cannot represent accurately as a list of objects.

9. A designer is creating (a) a company logo and (b) a background photograph for a website. State which type of graphic — vector or bitmap — is more suitable for each, and justify your answers. TYPE 3

(a) Vector — a logo needs to be reproduced at many different sizes (business cards, billboards) without losing quality. Vectors are redrawn from instructions at any size, so they do not pixelate when scaled up.

(b) Bitmap — a photograph captures real-world detail pixel by pixel. Vector graphics cannot represent the natural variation in colour and texture found in photographs; a bitmap is the appropriate format.

10. A bitmap image is 1024 pixels wide and 768 pixels tall. It has a bit depth of 24. (a) Calculate the file size in bits. (b) Calculate the file size in bytes. (c) Explain one way a designer could reduce the file size without changing the resolution. TYPE 3

(a) Total pixels = 1024 × 768 = 786,432 pixels. File size = 786,432 × 24 = 18,874,368 bits.

(b) 18,874,368 ÷ 8 = 2,359,296 bytes (approximately 2.25 MB).

(c) Reduce the bit depth — using fewer bits per pixel means fewer possible colours, but each pixel takes up less storage, so the overall file size decreases proportionally. (For example, reducing from 24-bit to 8-bit would cut the file size to one third.)
Teacher notes — Shift+T to hide

Suggested timing: ~50 minutes. Warm up 8 min; notes + SVG diagrams 18 min; worked examples 10 min; now you try 5 min; task set 9 min.

Key misconception — file size calculation: The most common exam error is applying bit depth before multiplying width × height. Drill the two-step process explicitly: step 1 = total pixels (width × height); step 2 = × bit depth. Consider writing it on the board as a formula and asking pupils to label each part.

Mnemonics: RELP (Rectangle, Ellipse, Line, Polygon) for the four N5 objects; CFL (Coordinates, Fill colour, Line colour) for the three N5 attributes. Both are straightforward to memorise.

SVG diagrams: This lesson contains inline SVG diagrams illustrating vector attributes and bitmap pixel grids. These are a concrete demonstration of the concept — pupils are studying vector graphics, so showing them live SVG code (view-source) and its rendered output is a genuine pedagogical bonus if time allows.

Extension: Ask pupils what happens to file size if you double both the width and height (answer: it quadruples — 2× width × 2× height = 4× total pixels). This reinforces why high-resolution photography files are so large.

Compression note: If pupils ask about JPEG/PNG compression, note that this is covered in WDD, not CS. At CS level, the uncompressed calculation is all that is required.

Links to CS4: CS3 leads directly into CS4 (Sound). The underlying pattern continues — all data = binary numbers. Sound adds sampling frequency and bit depth to the same conceptual framework pupils have just learned here.

SQA command words covered: "describe", "identify", "state", "explain", "calculate", "justify".