Show understanding of the effects of changing elements of a bitmap image on the image quality and file size

1.2 Multimedia – Bitmap Images, Vector Graphics & Sound

Learning Objective

Show understanding of how changing the elements of a bitmap image, a vector graphic, or a digital sound sample affects image/audio quality and file size. Be able to calculate file sizes, compare formats and justify the most appropriate choice for a given purpose.

1. Key Concepts in Multimedia

• Bitmap (raster) graphics – stored as a grid of coloured pixels.
• Vector graphics – stored as mathematical descriptions of shapes (points, lines, Bézier curves, fills).
• Digital sound – stored as a sequence of sampled amplitudes.

Why the distinction matters (AO2 – apply, AO3 – evaluate)

Choosing the right representation balances three factors:

1. Visual or auditory fidelity (quality).
2. Storage requirement (file size).
3. Intended use (web, print, animation, editing, streaming).

2. Bitmap Images

2.1 Elements that influence quality & size

1. Resolution (dimensions) – width × height in pixels.
   

   Quality: more pixels → finer detail, smoother edges.
   

   Size: file size ∝ total number of pixels.

2. Colour depth (bits per pixel, bpp) – number of bits used for each pixel.
   

   Quality: higher bpp → more distinct colours, smoother gradients, less banding.
   

   Size: file size ∝ bpp.

3. Compression – reduces the amount of data that must be stored (lossless or lossy).
4. File format – determines how the above are encoded (BMP, PNG, JPEG, GIF, TIFF, …).

2.2 Binary prefixes (Cambridge syllabus)

• 1 KiB = 2¹⁰ bytes = 1 024 bytes
• 1 MiB = 2²⁰ bytes = 1 048 576 bytes
• 1 GiB = 2³⁰ bytes = 1 073 741 824 bytes

Example conversion: 1 440 000 bytes ÷ 1 048 576 bytes MiB⁻¹ ≈ 1.37 MiB.

2.3 Un‑compressed size formula

\[

\text{File size (bits)} = \text{width} \times \text{height} \times \text{colour depth}

\]

\[

\text{File size (bytes)} = \frac{\text{File size (bits)}}{8}

\]

2.4 Compression techniques

2.5 Practical calculation examples (un‑compressed & compressed)

1. Uncompressed BMP – 800 × 600 px, 24‑bit colour

   \[

   \text{Size}=800\times600\times24=11\,520\,000\text{ bits}=1\,440\,000\text{ bytes}\approx1.37\text{ MiB}

   \]

2. PNG (lossless) after RLE + Huffman – typical reduction ≈ 2.5 : 1

   \[

   \text{Size}\approx\frac{1.37\text{ MiB}}{2.5}=0.55\text{ MiB}

   \]

3. JPEG at quality 80 % – typical reduction ≈ 9 : 1

   \[

   \text{Size}\approx\frac{1.37\text{ MiB}}{9}=0.15\text{ MiB}

   \]

   Notice the slight loss of sharpness compared with the PNG version.

3. Vector Graphics

3.1 What a vector graphic is

• Stores objects as geometric primitives (points, lines, Bézier curves, shapes) together with attributes (stroke colour, fill colour, opacity).
• Resolution‑independent – can be scaled to any size without loss of quality.
• Typical file formats: SVG, EPS, PDF (vector‑based), AI.

3.2 Encoding example (SVG markup)

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" width="160" height="160"
fill="#0066CC" stroke="#000000" stroke-width="2"/>
<path d="M20,180 C80,100 120,100 180,180"
fill="none" stroke="#FFCC00" stroke-width="4"/>
</svg>

The XML tags (<rect>, <path>) mathematically describe the shapes; the file size grows with the number of objects, not with the image’s pixel dimensions.

3.3 Comparison with bitmap graphics

3.4 When to justify a bitmap vs a vector

Scenario: a web‑site logo consisting of two solid colours.

• Vector (SVG) – file size ≈ 5 KB, scales cleanly for any screen resolution, ideal for responsive design.
• Bitmap (PNG 300 × 300 px, 24‑bit) – file size ≈ 30 KB, loses crispness on high‑DPI displays.

Justification: Choose SVG because the logo must appear sharp on both standard and high‑density screens while keeping bandwidth low.

4. Digital Sound Representation

4.1 Key parameters

• Sampling rate (f_s) – number of samples per second (Hz). Common values: 44.1 kHz (CD), 48 kHz (video), 22.05 kHz (voice).
• Bit depth (resolution) – bits used for each sample (e.g., 16‑bit, 24‑bit). Determines dynamic range.
• Channels – mono = 1, stereo = 2, surround > 2.
• Nyquist theorem – to reproduce a frequency f_max faithfully, the sampling rate must be at least 2 × f_max. This explains why speech (≈ 4 kHz) can be sampled at 8 kHz, while full‑band music (≈ 20 kHz) needs ≥ 40 kHz.

4.2 Uncompressed PCM size formula

\[

\text{Size (bits)} = \text{duration (s)} \times f_s \times \text{bit depth} \times \text{channels}

\]

\[

\text{Size (bytes)} = \frac{\text{Size (bits)}}{8}

\]

4.3 Example calculation

A 30‑second music clip, 44.1 kHz, 16‑bit, stereo:

\[

\begin{aligned}

\text{Size (bits)} &= 30 \times 44\,100 \times 16 \times 2 = 42\,384\,000\text{ bits}\\

\text{Size (bytes)} &= \frac{42\,384\,000}{8}=5\,298\,000\text{ bytes}\\

\text{Size (MiB)} &= \frac{5\,298\,000}{1\,048\,576}\approx5.05\text{ MiB}

\end{aligned}

\]

4.4 Audio compression (brief)

• Lossless (e.g., FLAC, ALAC) – uses LZ77 + Huffman (similar to PNG). Typical reduction 2 : 1 – 3 : 1.
• Lossy (e.g., MP3, AAC) – psychoacoustic models discard frequencies that are inaudible to the human ear. Common ratios 10 : 1 – 20 : 1; artefacts become noticeable at very high compression.

5. Applying the Knowledge – Practice Problems

1. Bitmap size: A colour photograph is 1 200 × 800 px with 8‑bit colour depth.

   Calculate the uncompressed file size in KiB.

2. Compression ratio: The same photograph is saved as a JPEG with a compression ratio of 12 : 1.

   What is the approximate file size in KiB?

3. Audio file size: A 2‑minute podcast is recorded at 22.05 kHz, 8‑bit, mono.

   Find the uncompressed size in MiB.

4. Vector vs bitmap: A company needs a 500 × 500 px icon for a mobile app.

   Which format (PNG or SVG) would you recommend and why?

5. Compression technique: Explain why RLE works well for simple graphics (e.g., cartoons) but poorly for photographic images.

Answers (teacher reference)

1. \(1\,200\times800\times8=7\,680\,000\text{ bits}=960\,000\text{ bytes}=937.5\text{ KiB}\)
2. Uncompressed size = 937.5 KiB → JPEG size ≈ \(937.5/12≈78\text{ KiB}\)
3. \(120\text{s}\times22\,050\times8\times1=21\,168\,000\text{ bits}=2\,646\,000\text{ bytes}\approx2.53\text{ MiB}\)
4. SVG is preferable – it scales without pixelation, keeps the file under ~10 KB, and reduces bandwidth for the app.
5. RLE stores runs of identical pixels efficiently; cartoons have long runs of solid colour, giving high compression. Photographs have frequent colour changes, producing short runs and little benefit.

6. Summary Table – Effects of Changing Elements

7. Key Points to Remember (AO1)

• Increasing resolution or colour depth improves visual fidelity but enlarges the file linearly.
• Lossless compression (RLE, Huffman, PNG) preserves quality; typical reduction 2 : 1 – 4 : 1.
• Lossy compression (JPEG, MP3) offers much higher reductions at the cost of artefacts.
• Vector graphics store shapes mathematically – they are resolution‑independent and usually smaller for simple artwork.
• Audio file size depends on sampling rate, bit depth and number of channels; the same linear relationship applies as with bitmap images.
• Always justify the choice of format by weighing quality, size and intended use (e.g., web logo → SVG; photograph for email → JPEG).

8. Self‑Check Questions (AO2 / AO3)

1. Why might a photographer choose to keep a RAW (uncompressed) file despite its large size?
2. Explain how increasing the JPEG quality setting from 60 % to 90 % affects both file size and perceived image quality.
3. For a 10‑second sound effect required in a video game, would you store it as 44.1 kHz 16‑bit PCM or as an MP3 at 128 kbps? Justify your answer.
4. Describe a situation where a bitmap image would be preferable to a vector graphic, even though the file would be larger.

Use these questions to practise applying the concepts, performing calculations and evaluating trade‑offs – exactly what the Cambridge A‑Level exam expects.