1.2.1 Images
A digital image must be converted into data before a computer can store, process, transmit, or display it. Two important ways of representing graphics are bitmap images and vector graphics.
A bitmap records the colours of individual pixels. A vector graphic instead stores descriptions of drawing objects, such as lines, circles, and polygons. Because the two representations store very different information, each is suitable for different types of image.
By the end of this section, you should be able to:
- describe how bitmap image data are encoded;
- use the terms pixel, file header, image resolution, screen resolution, and colour depth;
- explain how resolution and colour depth affect image quality and storage requirements;
- calculate the approximate uncompressed size of a bitmap;
- describe vector graphics using drawing objects, properties, and a drawing list;
- justify whether a bitmap or vector representation is more suitable for a particular task.
Exam focus
First identify the representation being discussed. For a bitmap, think about pixels, resolution, and colour depth. For a vector graphic, think about drawing objects and their properties.
Vector Graphics and Bitmaps
A bitmap and a vector graphic may look similar when displayed at their normal size, but the data stored inside the files are fundamentally different.
| Feature | Vector graphic | Bitmap image |
|---|---|---|
| Stored as | Drawing objects and their properties | A grid of pixel colour values |
| Typical content | Logos, icons, diagrams, maps, technical drawings | Photographs, scans, screenshots, digital paintings |
| When enlarged | Shapes can be recalculated and redrawn at the new size | The existing pixel information must be enlarged or estimated |
| Editing | Individual objects and properties can be changed | Editing normally changes groups of pixels |
| Best suited to | Images made from relatively simple geometric shapes | Images containing detailed variation in colour and texture |
Common misconception
Neither representation is always better. The correct choice depends on what the image contains and what the image will be used for.
How Vector Graphics Are Stored
A vector graphic is built from drawing objects. A drawing object might be a line, rectangle, ellipse, polygon, curve, or another mathematically described shape.
The file does not need to store the colour of every point covered by the shape. Instead, it stores the information needed to reconstruct that shape. These stored characteristics are called properties.
Property: stored information describing an object, such as its position, size, line width, outline colour, or fill colour.
Drawing list: the collection of drawing objects and their properties that the software uses to reconstruct the complete graphic.
| Drawing object | Possible properties |
|---|---|
| Ellipse | centre coordinates, horizontal radius, vertical radius, outline, fill |
| Line | start point, end point, width, colour |
| Rectangle | position, width, height, corner radius, outline, fill |
| Polygon | vertex coordinates, border colour, border width, fill |
From drawing list to displayed image
When the graphic is opened, the software reads the drawing list and processes each object's properties. It then draws the objects in the required positions to produce the final image.
For example, a very simple vector graphic could conceptually contain:
Object 2: circle — centre (120, 70), radius 25, orange fill
If objects overlap, their position within the drawing list can also matter: an object drawn later may appear in front of an object drawn earlier.
Why vectors scale well
When a vector graphic is enlarged, the software does not simply enlarge a fixed grid of existing pixels. It recalculates the drawing objects using their stored properties and draws them again at the required size.
This makes vector graphics especially useful when the same design may need to appear at very different sizes, such as a logo used on both a website and a large printed sign.
Exam tip
When describing vector encoding, use all three ideas: drawing objects → properties → drawing list.
How Bitmap Images Are Stored
A bitmap divides an image into a rectangular grid. Every position in that grid is a pixel, and a colour value is stored for each pixel.
Consider this simple 6 × 6 black-and-white bitmap. If 0 represents white and 1 represents black, the image can be represented by a sequence of binary values.
| 0 | 0 | 1 | 1 | 0 | 0 |
| 0 | 1 | 0 | 0 | 1 | 0 |
| 1 | 0 | 1 | 1 | 0 | 1 |
| 1 | 0 | 0 | 0 | 0 | 1 |
| 0 | 1 | 0 | 0 | 1 | 0 |
| 0 | 0 | 1 | 1 | 0 | 0 |
A real bitmap normally needs more than one bit for each pixel because it needs to represent many possible colours. The number of bits allocated to each pixel determines how many different colour values can be encoded.
What else must the file store?
Pixel values alone are not sufficient. Software also needs information explaining how the pixel data should be interpreted. This information is stored in a file header.
Conceptually, a simple bitmap file can therefore be thought of as:
Pixel data: colour value for pixel 1, pixel 2, pixel 3, ...
Common misconception
A bitmap is not simply “an image stored in binary”. The important idea is that the image is represented by individual pixel colour values arranged in a grid.
Interactive: Vector vs Bitmap Scaling
Increase the zoom level to compare a graphic that can be redrawn from mathematical descriptions with one that contains a fixed grid of stored pixels.
Vector graphic
Stored as drawing objects and properties.
Bitmap graphic
Stored as a fixed grid of pixel values.
Interactive: Bitmap Pixel Grid Painter
Create a small bitmap and compare the visible image with the colour values that would need to be stored.
Colour Depth and Resolution
Two important properties influence both the amount of image information available and the storage required by an uncompressed bitmap: image resolution and colour depth.
Colour depth
Colour depth, also called bit depth in this context, is the number of bits available to represent the colour of one pixel.
More bits create more possible binary combinations, so more colours can be represented.
Colour Depth and Bit Depth
Colour depth: the total number of bits used to represent the colour of one pixel.
For an RGB image, each pixel contains a red, green, and blue component. If each channel uses 8 bits, then:
8 bits red + 8 bits green + 8 bits blue = 24-bit colour depth
Each 8-bit channel can represent 28 = 256 possible intensity values. Combining the three channels gives:
256 × 256 × 256 = 16,777,216 possible colours
Number of possible colours = 2colour depth
| Colour depth | Possible colour values |
|---|---|
| 1 bit | 2 |
| 2 bits | 4 |
| 6 bits | 64 |
| 8 bits | 256 |
| 10 bits | 1024 |
| 24 bits | 16,777,216 |
A higher colour depth allows a wider range of colours to be represented. This can produce smoother colour changes and make colour differences more accurately represented. However, every pixel then requires more bits.
RGB colour
A colour may also be represented using separate red, green, and blue components. If the question gives a bit depth for each channel, the values for all three channels must be included when determining the total bits per pixel.
For example, if an RGB image uses 10 bits for red, 10 bits for green, and 10 bits for blue:
10 + 10 + 10 = 30 bits per pixel
Image resolution
For example, an image with a resolution of 1600 × 900 contains:
1600 × 900 = 1,440,000 pixels
Increasing the image resolution means that more pixels are available to describe the image. This can preserve finer detail, particularly when the image is viewed or printed at a sufficiently large size.
Screen resolution
Image resolution and screen resolution describe different things. One belongs to the stored image; the other belongs to the display device.
For example, a 3000 × 2000 photograph can be displayed on a 1920 × 1080 screen. The computer must map or scale the image data to the pixels available on that display.
Common mistake
Do not use image resolution and screen resolution as if they mean the same thing.
Exam tip
If RGB depth is given per channel, first calculate the total number of bits used for one pixel before using the file-size formula.
How Bitmap Settings Affect Quality and File Size
Changing image resolution or colour depth changes the amount of information stored in the bitmap. This creates a trade-off between image quality and storage.
| Change | Possible effect on image | Effect on uncompressed storage |
|---|---|---|
| Increase image resolution | More pixels can represent finer spatial detail | File size increases because more pixels are stored |
| Decrease image resolution | Fine detail may be lost; pixels may become noticeable when enlarged | File size decreases because fewer pixels are stored |
| Increase colour depth | More colour values can be represented | File size increases because each pixel requires more bits |
| Decrease colour depth | Colour variation is reduced and visible colour banding may appear | File size decreases because fewer bits are stored per pixel |
Why resolution alone does not guarantee quality
A larger resolution provides the capacity to store more detail, but it cannot recreate detail that was never captured in the original image. Simply enlarging a low-resolution bitmap does not turn it into a genuinely high-detail image.
Common misconception
Increasing the displayed size of a bitmap is not the same as increasing the amount of original image information stored in the file.
Estimating Uncompressed Bitmap Storage
The amount of pixel data depends on two things:
- how many pixels the image contains;
- how many bits are stored for each pixel.
The number of pixels is found from the image resolution:
number of pixels = width × height
The uncompressed pixel data can then be estimated using:
size in bits = width × height × colour depth
To convert bits to bytes:
size in bytes = size in bits ÷ 8
Worked example
A bitmap has a resolution of 900 × 500 and uses 16 bits per pixel.
| Stage | Calculation | Result |
|---|---|---|
| Number of pixels | 900 × 500 | 450,000 pixels |
| Pixel data in bits | 450,000 × 16 | 7,200,000 bits |
| Convert to bytes | 7,200,000 ÷ 8 | 900,000 bytes |
Why the real file may be different
The calculation above estimates the amount of uncompressed pixel data. A real image file may also contain other information.
Depending on the file format, there may also be metadata, a colour palette, or other information. Compression can reduce the amount of storage required.
Common mistake
Do not automatically add an invented header size to a calculation. If no header size is provided, calculate the required pixel-data estimate from the information given.
Exam tip
Write the calculation in stages: pixels → bits → bytes → larger unit if required. This makes errors easier to identify.
Interactive: Bitmap File Size Calculator
Change the resolution and colour-depth settings to see how each factor changes the amount of uncompressed pixel data.
Choosing Between a Bitmap and a Vector Graphic
A question asking you to justify an image representation needs more than simply naming one format. Your reason should be linked to the requirements of the particular image or task.
| Situation | Likely choice | Reason |
|---|---|---|
| Company logo | Vector | The design contains clear geometric shapes and may need to be reproduced at many different sizes. |
| Photograph of a landscape | Bitmap | A photograph contains large amounts of detailed colour and texture variation that can be represented using pixels. |
| Technical diagram | Vector | Individual lines and shapes can be stored as editable drawing objects and redrawn accurately at different sizes. |
| Screenshot | Bitmap | The captured screen already consists of a fixed grid of displayed pixels. |
Common mistake
Avoid writing that vectors are always smaller than bitmaps. Storage depends on the complexity of the image and the file representation. A safer justification focuses on the characteristics of the image and its intended use.
Building a justification
A strong answer follows: feature of the image → feature of the representation → practical benefit.
For example: a logo consists mainly of simple shapes, so it can be stored as vector drawing objects and resized without relying on a fixed pixel grid.
Practice and Review
- Describe how a bitmap represents an image. Your answer should use the terms pixel, resolution, and colour depth.
- Explain the purpose of a file header in a bitmap image file.
- Explain how increasing image resolution affects both image detail and uncompressed file size.
- Explain how increasing colour depth affects both colour representation and uncompressed file size.
- A bitmap has a resolution of 720 × 480 and a colour depth of 16 bits. Calculate the amount of pixel data in bytes.
- Describe how a vector graphic is encoded. Use the terms drawing object, property, and drawing list.
- A company needs one logo for a mobile application icon and a three-metre advertising banner. Justify a suitable image representation.
Final checklist
- I can explain what a pixel represents.
- I can distinguish image resolution from screen resolution.
- I can explain what colour depth changes.
- I can calculate uncompressed bitmap pixel data.
- I understand why an actual image file can contain more than pixel data.
- I can describe a vector using drawing objects, properties, and a drawing list.
- I can justify choosing a bitmap or vector for a particular situation.