Justify the use of a bitmap image or a vector graphic for a given task

1.2 Multimedia – Bitmap vs Vector Graphics

Learning Objective

Justify the use of a bitmap image or a vector graphic for a given task, using technical, quantitative, ethical, and security considerations.

Key Definitions

• Bitmap (Raster) Image: An image made up of a fixed grid of pixels, each storing colour information. Common formats: JPEG, PNG, GIF, BMP.
• Vector Graphic: An image described by mathematical primitives (points, lines, curves, shapes) that can be scaled to any size without loss of quality. Common formats: SVG, EPS, PDF.

Colour Models & Bit‑Depth (Syllabus 1.1 – Data Representation)

Bit‑depth determines the number of possible colour values per pixel. For a bitmap:

\[

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

\]

Example: a 800 × 600 image at 8‑bit greyscale (1 channel) needs 800 × 600 × 8 = 3 840 000 bits ≈ 460 KB.

Fundamental Differences

Quantitative Comparison – Worked Examples

Bitmap Example – Uncompressed & Compressed Size

Photograph: 1920 × 1080 pixels, 24‑bit colour (RGB).

\[

\text{Uncompressed bits}=1920 \times 1080 \times 24 = 49\,766\,400\ \text{bits}

\]

\[

\text{Uncompressed bytes}= \frac{49\,766\,400}{8}=6.22\ \text{MB}

\]

Typical compression results:

• JPEG (≈10 % of original) → ≈ 0.62 MB (lossy).
• PNG (≈65 % of original) → ≈ 4 MB (lossless).

Vector Example – Size Estimate

Simple SVG logo: 3 paths, 2 text elements, colour/style attributes.

• Average primitive description ≈ 30 bytes.
• Raw size ≈ 30 × (3 + 2) = 150 bytes.
• Adding XML tags and whitespace ≈ 800 bytes → < 1 KB.

Run‑Length Encoding (RLE) on a Bitmap Line (Syllabus 1.3 – Compression)

Consider a 1‑D row of 20 pixels (black = 0, white = 1):

0 0 0 0 0 1 1 1 1 0 0 0 1 1 1 1 1 1 0 0

RLE stores value, run‑length pairs:

(0,5) (1,4) (0,3) (1,6) (0,2)

Each pair can be stored in a single byte (4 bits for value, 4 bits for length).

Raw size: 20 bits ≈ 2.5 bytes (rounded to 3 bytes).

RLE size: 5 pairs × 8 bits = 40 bits ≈ 5 bytes.

In this contrived example the RLE is larger, illustrating that compression is data‑dependent. For long runs (e.g., a solid‑colour background) RLE can achieve > 80 % reduction.

Decision‑Making Criteria (Technical, Quantitative, Ethical & Security)

1. Nature of the image
   

   Photographic with subtle gradients → Bitmap.
   

   Simple geometric shapes, text, line‑art → Vector.

2. Scalability requirements
   

   Must appear at many sizes (e.g., logo on a business card and a billboard) → Vector.
   

   Fixed display size (e.g., a photo in a printed article) → Bitmap.

3. File‑size & transmission constraints
   

   Small, simple web graphics → Vector (usually < 1 KB).
   

   Large, detailed images → Bitmap with appropriate compression (JPEG, WebP, etc.).

4. Editing after creation
   

   Need to modify individual objects (colour, shape) → Vector.
   

   Need pixel‑level retouching (e.g., skin smoothing) → Bitmap.

5. Processing environment
   

   Limited hardware (embedded devices) → pre‑rasterised Bitmap for faster display.
   

   Dynamic zooming, animation or interactive diagrams → Vector.

6. Ethical & legal considerations
   

   Verify licensing (royalty‑free, Creative Commons, commercial).
   

   Vector libraries often have different attribution requirements than stock photos.

7. Security & data‑integrity
   

   Transmit over HTTPS to protect against tampering.
   

   Strip or encrypt metadata (EXIF) that may contain personal information.
   

   Use checksums (e.g., SHA‑256) to verify file integrity after download.

Example Tasks and Justifications

Task A – Designing a Company Logo

Requirements: geometric shapes, text, must work on business cards, billboards, and a website.

Recommended format: Vector (SVG or EPS).

Reasons: unlimited scalability, tiny file size, easy colour/shape revisions, and can be compressed (SVGZ) for web delivery.

Task B – Adding a Landscape Photograph to an Online Magazine

Requirements: high‑resolution, subtle colour gradients, print‑quality optional.

Recommended format: Bitmap (JPEG for web, PNG for print‑quality).

Reasons: only raster formats can faithfully reproduce photographic detail; compression balances size and quality.

Task C – Creating an Interactive Map for a Mobile App

Requirements: roads, landmarks, labels; zoomable without loss of clarity.

Recommended format: Vector (SVG).

Reasons: smooth zoom, crisp labels at any scale, modest file size because the map consists of geometric primitives.

Task D – Rendering a Game Sprite Sheet (Pixel‑Art)

Requirements: pixel‑perfect characters, fixed tile size.

Recommended format: Bitmap (PNG).

Reasons: pixel art relies on exact pixel placement; converting to vector would alter the intended visual style.

Cross‑Topic Bridges (Linking to Other Syllabus Areas)

// Load bitmap (using a library such as Pillow)
bitmap = readBitmap("photo.jpg")
for y = 0 to bitmap.height‑1
for x = 0 to bitmap.width‑1
pixel = bitmap.getPixel(x, y)
// pixel‑level processing …
// Load vector (using a library such as Cairo or SVG.js)
vector = readVector("logo.svg")
for each shape in vector.shapes
draw(shape)            // rasterisation occurs here
// shape can be moved, recoloured, scaled …

input  bitmap B
output vector V
V ← empty list
for each pixel p in B
if p is an edge (contrast with neighbours)
add line segment approximating p to V
optimise V (merge collinear segments, remove duplicates)
return V

Decision Flowchart (Suggested Diagram)

Use the following sequence of yes/no questions to decide the appropriate format:

1. Is the image photographic or does it contain many subtle colour variations?
   → Yes → Bitmap
2. Does the image need to be displayed at many different sizes (e.g., logo on various media)?
   → Yes → Vector
3. Is file‑size a critical factor for web delivery?
   → Yes → Vector for simple graphics; Bitmap with lossy compression (JPEG/WebP) for photos
4. Will you need to edit individual elements after creation?
   → Yes → Vector
5. Is the target platform limited in processing power (e.g., embedded device)?
   → Yes → Pre‑rasterised Bitmap
6. Otherwise, choose the format that best matches the visual content and ethical/legal constraints.

Link‑Back to the Cambridge AS & A‑Level Computer Science Syllabus

• AS 1.1 – Data Representation: Colour models, bit‑depth, binary‑to‑hex conversion for colour values.
• AS 1.2 – Multimedia – Graphics: Detailed comparison, decision criteria, and justification.
• AS 1.3 – Data Compression: Lossy vs. lossless, RLE, Huffman, LZW, JPEG‑2000, WebP, and vector gzip.
• AS 2.1 – Programming Paradigms & Language Translators: Pseudocode, library examples (Pillow, Cairo, ImageMagick).
• AS 2.2 – Algorithmic Thinking: Edge‑tracing raster‑to‑vector algorithm.
• AS 2 – Communication: MIME types, HTTP headers, HTTPS, CDN optimisation.
• AS 5 – System Software: Image‑processing libraries as translators between high‑level code and hardware.
• AS 6 – Security, Privacy & Data Integrity: Checksums, metadata stripping, secure transmission.
• 7.1 – Ethics and Ownership: Licensing, attribution, copyright compliance.

Summary

Choosing between bitmap and vector graphics requires weighing:

• Visual nature of the content (photographic vs. geometric).
• Scalability and editing needs.
• Storage, transmission, and compression considerations.
• Legal/ethical licensing and attribution.
• Security of transmission and integrity of the file.
• How the image will be processed in code (pixel‑level vs. object‑level).

In practice:

• Use bitmaps for photographs, detailed textures, or any image that relies on subtle colour variation.
• Use vectors for logos, icons, diagrams, maps, and any content that must scale cleanly or be edited as separate objects.