Show understanding of how data for a vector graphic are encoded

Topic 1.2 Multimedia – Graphic Encoding (Bitmap & Vector)

Learning objective

Show understanding of how data for both bitmap and vector graphics are encoded, be able to estimate file size, and justify the most suitable format for a given task.

Introduction

Bitmap (raster) and vector graphics represent images in fundamentally different ways. A bitmap stores colour information for every pixel, while a vector stores a sequence of geometric drawing instructions. Both approaches have their own strengths, weaknesses, and typical file formats. The sections below describe the internal encoding of each type, how size is calculated, and how to choose the appropriate format for a particular application.

1. Bitmap (pixel‑based) graphics

1.1 What is stored?

• Header – file identifier, image width, height, colour‑depth, compression flag, colour‑profile tag, DPI (dots per inch) or PPI (pixels per inch) for printing, and any other format‑specific data.
• Pixel matrix – a rectangular array of colour values, one value per pixel (or per colour component).
• Optional padding – many formats (e.g., BMP) pad each row to a multiple of 4 bytes to simplify memory alignment.
• Metadata (optional) – author, copyright, creation date, colour‑space information (sRGB, Adobe RGB, etc.).

1.2 Colour models & depth

1.3 Compression

Compression reduces the number of stored bytes. The syllabus expects you to know the difference between lossless and lossy techniques and to recognise the most common algorithms.

• Lossless – original pixel values can be perfectly reconstructed.

  • Run‑Length Encoding (RLE) – replaces consecutive identical pixels with a count/value pair (used in BMP, PCX).
  • LZW (Lempel‑Ziv‑Welch) – builds a dictionary of repeated patterns (used in GIF, TIFF).
  • DEFLATE – combines LZ77 and Huffman coding (used in PNG).

• Lossy – some information is discarded to obtain smaller files.

  • DCT‑based JPEG – transforms 8×8 pixel blocks, quantises coefficients, and entropy‑codes them.
  • Quality factor (Q) – a user‑selectable value (typically 0–100) that controls the trade‑off between compression ratio and visual quality. A higher Q → larger file, less artefacts.

Compression ratio is often expressed as uncompressed size ÷ compressed size. For example, a 2 MP 24‑bit image (≈6 MB) saved as JPEG with Q = 75 may be ~1 MB, giving a ratio of 6:1.

Because lossy compression discards data, further editing (e.g., colour correction) can degrade quality; lossless formats are preferred when the image will be edited repeatedly.

1.4 File‑size estimation (uncompressed)

General formula:

File size = width × height × bytes‑per‑pixel + header + padding

Example – 800 × 600 pixels, 24‑bit RGB, no compression:

Pixels: 800 × 600 = 480 000
Bytes per pixel: 3
Raw data: 480 000 × 3 = 1 440 000 bytes ≈ 1.44 MiB
If each row must be a multiple of 4 bytes:
Row size = 800 × 3 = 2400 bytes → already divisible by 4 → no extra padding.
Total ≈ 1.44 MiB + header (≈54 bytes for BMP) ≈ 1.44 MiB

1.5 Resolution, DPI and printing

• Resolution (pixel dimensions) determines the amount of detail stored.
• DPI/PPI defines how many pixels are printed per inch; a 300 dpi print of a 800 × 600 image yields a physical size of 2.67 × 2 inches.
• Changing the displayed size on screen does not alter the file, but printing at a higher DPI may require up‑sampling, which can introduce artefacts.

2. Vector (geometric) graphics

2.1 Core idea

A vector image is a list of drawing instructions (primitives) together with attributes such as colour, stroke width, and transformation matrices. Because the description is mathematical, the image can be rendered at any size without loss of quality.

2.2 Primitive types

• Point – single coordinate pair \$(x, y)\$.
• Line – straight segment between two points.
• Curve – quadratic or cubic Bézier curves defined by control points.
• Shape – closed collection of lines/curves, optionally filled.
• Transform – translation, rotation, scaling, shear applied to a group of primitives.

2.3 Common vector file formats

2.4 Command‑based encoding (SVG‑style path data)

2.5 Example – a triangle (SVG path)

M 100 100 L 200 100 L 150 200 Z

Explanation:

• M 100 100 – move to \$(100,100)\$.
• L 200 100 – line to \$(200,100)\$.
• L 150 200 – line to \$(150,200)\$.
• Z – close the path (line back to the start point).

2.6 Example – applying a transformation

Scale the triangle by a factor of 2 about the origin:

<g transform="matrix(2 0 0 2 0 0)">
<path d="M 100 100 L 200 100 L 150 200 Z" />
</g>

The matrix(a b c d e f) stores six numbers (a b c d e f) that represent the 2‑D affine transformation. Only the six‑value matrix is stored; no new points are created, so file size is unchanged.

2.7 Bézier curve mathematics (cubic)

Four points: start \$P0\$, control \$P1\$, \$P2\$, end \$P3\$. The parametric equation is

\$\$

B(t) = (1-t)^3P0 + 3(1-t)^2tP1 + 3(1-t)t^2P2 + t^3P3,\qquad 0\le t\le1

\$\$

The C command supplies \$P1\$, \$P2\$ and \$P3\$; \$P0\$ is the current point.

2.8 Attribute encoding

• Stroke colour – hexadecimal RGB (e.g., #00FF00) or three separate bytes (R,G,B).
• Fill colour – same format as stroke; can include an alpha channel (RGBA, 4 bytes).
• Stroke width – usually a 4‑byte IEEE‑754 floating‑point number.
• Opacity – 0–255 (1 byte) or 0.0–1.0 (float).
• Transform matrix – six 4‑byte floats (24 bytes total).
• Metadata – title, creator, DPI, colour‑profile, embedded raster images (base‑64), etc.

2.9 File‑size calculation (illustrative)

Assume a simple SVG path consisting of:

• 1 M command (2 coordinates)
• 4 L commands (2 coordinates each)
• Stroke colour (3 bytes) and stroke width (4 bytes)
• All coordinates stored as signed 16‑bit integers (2 bytes each).

Coordinates: (1 + 4) × 2 coords × 2 bytes = 20 bytes
Stroke colour: 3 bytes
Stroke width: 4 bytes
XML tags & whitespace (approx.): 30 bytes
Total ≈ 57 bytes

Increasing the number of commands, using 32‑bit floats for coordinates, or adding a transform matrix (24 bytes) will increase the size proportionally. This demonstrates why vectors remain compact for simple illustrations but can become large for highly detailed artwork.

2.10 Mixed raster‑vector formats

• PDF – can embed bitmap images (JPEG, PNG) inside a vector page, allowing a single document to contain both types.
• SVG – permits <image> elements that reference external raster files or embed them as base‑64 data.

When a raster element is present, the overall file size is the sum of the vector description plus the (compressed) bitmap size.

3. Bitmap vs Vector – side‑by‑side comparison

4. Real‑world case studies (justifying format choice)

1. Web icon (16 × 16 px) – The graphic is simple (few colours, straight lines). An SVG file of ~2 KB loads faster than a PNG of ~1 KB, but the SVG can be scaled for high‑DPI displays without extra assets, making SVG the preferred choice.
2. Printed poster (A2, 300 dpi) – Contains a high‑resolution photograph. A JPEG at quality 80 gives a 2 MiB file, far smaller than an uncompressed BMP (≈30 MiB). Because the image is photographic, a bitmap is mandatory; vector would require an impractically large number of primitives.
3. Technical diagram (schematic of a circuit) – Mostly lines, shapes, and text. An EPS or SVG file of < 5 KB accurately reproduces the diagram at any print size, whereas a bitmap would need at least 3000 × 2000 px to avoid pixelation, resulting in > 12 MiB uncompressed.
4. Game sprite sheet – A collection of many small bitmap images (characters, tiles). PNG is used for lossless quality and alpha transparency; the sheet is then compressed with RLE or DEFLATE to keep download size low.

5. Binary prefixes and conversions (quick reminder)

• 1 kibi‑byte (KiB) = 2¹⁰ bytes = 1 024 bytes.
• 1 mebi‑byte (MiB) = 2²⁰ bytes = 1 048 576 bytes.
• 1 gibi‑byte (GiB) = 2³⁰ bytes.
• When the syllabus uses “kB”, “MB”, etc., accept either the decimal (1 kB = 1 000 bytes) or binary interpretation, but be clear which you are using in calculations.
• Conversion example: 800 × 600 × 3 bytes = 1 440 000 bytes ÷ 1 024 ≈ 1 406 KiB ÷ 1 024 ≈ 1.37 MiB.

6. Summary of key points

• Bitmap encoding stores a colour value for each pixel, plus a header, optional padding, and metadata (DPI, colour‑profile). File size depends on resolution, colour depth, and any compression applied (lossless or lossy).
• Vector encoding stores drawing commands (M, L, C, …) with attributes (stroke, fill, opacity, transform). Size depends on the number of primitives and the byte‑size of each attribute, not on the final rendered dimensions.
• Compression techniques:

  • Lossless: RLE, LZW, DEFLATE (PNG, GIF).
  • Lossy: DCT‑based JPEG; quality factor controls the trade‑off.

• Choosing a format:

  • Use vector for simple, scalable graphics (logos, icons, schematics).
  • Use bitmap for photographs or complex textures.
  • Consider bandwidth, editing workflow, and final output size (print vs. screen).

• Understanding the underlying encoding lets you:

  • Estimate file size before creating or transmitting an image.
  • Predict the impact of changing resolution, colour depth, or compression level.
  • Justify the most efficient format for a given real‑world task.