Computer Science (9645) | Representing graphics

Study Notes: Representing Graphics (3.5.5)

Welcome to the world of digital images! If you’ve ever wondered how your computer or phone stores a photograph or a logo, this chapter is where you find the answer. We are going to explore the two main ways computers turn visible pictures into simple binary data (zeros and ones).
Understanding this is crucial for anyone involved in digital media, programming, or simply choosing the right file format for your artwork!

3.5.5.1 Bitmapped Graphics (Raster Images)

Bitmapped graphics are the most common way to represent complex, realistic images, like photographs. Think of a bitmap as a giant mosaic or a tiled floor.

How Bitmaps Represent Images:

A bitmapped image is defined by a grid of individual picture elements, known as pixels (short for picture elements). The computer stores the colour information for every single pixel in the grid, row by row.

Key Concepts for Bitmaps

1. Size in Pixels (Resolution)

The size, or resolution, of a bitmapped image is measured by its width in pixels multiplied by its height in pixels.
Example: An image that is 1920 pixels wide and 1080 pixels high is often noted as 1920 x 1080 pixels.

2. Colour Depth

Colour depth is the number of bits used to represent the colour of a single pixel.
The more bits you use for each pixel, the more colours the image can display, leading to a richer, more realistic picture.

Memory Aid: If you use \(n\) bits for colour depth, you can represent \(2^n\) distinct colours.

• 1 bit (monochrome): \(2^1 = 2\) colours (usually black and white).
• 8 bits: \(2^8 = 256\) colours.
• 24 bits (True Colour): \(2^{24} \approx 16.7\) million colours (standard for high-quality photos).

Calculating Storage Requirements (Excluding Metadata)

To calculate the uncompressed storage size of a bitmapped image, you need to know how many pixels there are in total and how many bits each pixel needs.

Storage Formula (in bits):

$$ \text{Storage requirements} = \text{Width in pixels} \times \text{Height in pixels} \times \text{Colour Depth (in bits)} $$

Step-by-Step Example Calculation:

Imagine a small image that is 100 pixels wide by 50 pixels high, with a colour depth of 8 bits.

1. Calculate the total number of pixels (Size):
   $$ 100 \times 50 = 5000 \text{ pixels} $$
2. Calculate the total storage in bits:
   $$ 5000 \text{ pixels} \times 8 \text{ bits/pixel} = 40,000 \text{ bits} $$
3. (Optional but common) Convert to bytes (since 1 Byte = 8 bits):
   $$ 40,000 \text{ bits} / 8 = 5000 \text{ Bytes} $$

Did you know? This calculation gives you the raw image size. Real image files (like JPGs or PNGs) are often much smaller due to compression techniques!

Metadata

Image files also contain metadata. Metadata is "data about the data." It stores crucial information that the computer needs to correctly open and display the image, but it isn't part of the colour data itself.

Typical examples of bitmap metadata include:

• The image width (in pixels).
• The image height (in pixels).
• The colour depth (in bits).

3.5.5.2 Vector Graphics

Vector graphics take a completely different approach. Instead of storing colour data for every tiny dot, they store images as a set of mathematical commands and instructions for drawing shapes.

How Vectors Represent Images:

Vector images represent images using a list of objects (or geometric shapes). When you open a vector file, the computer reads these instructions and draws the shapes on the screen.

Analogy: A bitmap is like a completed photograph; a vector is like a set of building instructions or a mathematical blueprint.

Typical Properties of Objects (The Drawing Instructions)

Each geometric object in the list has properties stored about it. These properties dictate exactly how the object should be drawn. Common properties include:

• Position: The x and y coordinates (e.g., of the top-left corner or the centre) where the object starts.
• Outline Colour: The colour of the object's border or line.
• Line Width: How thick the outline of the object should be.
• Colour of Object Fill: The colour used to fill the enclosed area of the shape.

For a circle, the list might include the position of the centre, the radius, and the colour properties. For a line, it might store the start point, end point, and line width.

3.5.5.3 Comparing Bitmapped and Vector Graphics

Both methods have pros and cons, making each one suitable for different tasks. You must be able to compare their advantages and disadvantages, especially regarding range and scalability.

Comparison: Advantages and Disadvantages

Feature	Bitmapped Graphics	Vector Graphics
Realism & Detail	Excellent. Can capture complex photos and smooth colour gradients (because they store every pixel's colour).	Poor for complex photos. Best suited for sharp lines and distinct blocks of colour.
Scalability (Resizing)	Poor. If you zoom in or enlarge a bitmap, you stretch the pixels, causing the image to look blocky or "pixelated."	Excellent. The image is recalculated using the mathematical instructions, so it remains perfectly sharp regardless of size.
File Size	Often very large, especially for high resolution and high colour depth images.	Generally small, as only the properties (instructions) of the shapes are stored, not every pixel.
Editing	Difficult to edit individual shapes. Editing involves changing pixel colours directly.	Easy to edit. You can move, resize, or change the colour of individual objects without affecting others.

Appropriate Uses

Choosing the right format depends entirely on what the image is.

When to Use Bitmaps (e.g., formats like JPG, PNG, GIF):

• Photographs: Where subtle colour variations and realistic detail are essential.
• Complex Art/Scanned Images: Anything requiring a massive range of colours and high fidelity to the original.
• Common mistake to avoid: Never use a bitmap for a logo if that logo needs to be printed in different sizes, as it will look pixelated when enlarged!

When to Use Vectors (e.g., formats like SVG, AI, EPS):

• Logos and Branding: Because they must look perfect and smooth, regardless of whether they are printed on a small business card or a huge billboard.
• Technical Drawings and Illustrations: Images defined by precise lines and shapes (like floor plans, maps, or simple diagrams).
• Fonts (Typefaces): Characters in a font are defined mathematically so they can scale smoothly.