Bitmap and vector graphics

AS · 12 min

There are two completely different ways to store a picture. A bitmap records the colour of every dot in a grid; a vector graphic records a list of shapes and the instructions to draw them. This note covers how each is encoded, how to calculate the file size of a bitmap, how resolution and colour depth affect quality and size, and how to justify choosing one type for a task. Paper 1 regularly asks for a file size calculation and a two- or three-mark justification.

Bitmap images

A bitmap image is a grid of tiny squares called pixels. Each pixel stores one colour as a binary number. To display the image, the computer reads the binary values in order and lights the corresponding points on the screen.

Definition

A pixel (picture element) is the smallest addressable element of a bitmap image; it holds a single colour.

Image resolution is the number of pixels in the image, given as width × height (for example 1920 × 1080).

Screen resolution is the number of pixels a display screen can show, width × height.

Colour depth (also called bit depth) is the number of bits used to store the colour of one pixel.

The file header is data at the start of an image file describing the image: for example the file type, the image width and height in pixels, the colour depth, and the compression used, so that software knows how to interpret the pixel data that follows.

Colour depth

With a colour depth of $n$ bits, each pixel can be one of $2^n$ colours.

Colour depth	Number of colours	Typical use
1 bit	2	Black and white line art
8 bits	256	Simple graphics, GIF images
16 bits	65 536	"High colour"
24 bits	16 777 216	"True colour": 8 bits each for red, green and blue

To find the colour depth needed for a given number of colours, find the smallest $n$ with $2^n$ at least that number: 300 colours need 9 bits, because $2^8 = 256$ is too few.

Image resolution versus screen resolution

The image resolution belongs to the file; the screen resolution belongs to the display. An image of 3000 × 2000 pixels shown on a 1920 × 1080 screen has to be scaled down, and some pixels are discarded or merged. An image of 640 × 480 shown full-screen on the same display is scaled up: each image pixel covers several screen pixels and the image looks blocky (pixelated). For the best appearance, the image resolution should be at least the resolution at which it will be displayed.

Bitmap file size

Every pixel uses the same number of bits, so the size of the pixel data is a simple product.

Key result

\text{file size (bits)} = \text{width in pixels} \times \text{height in pixels} \times \text{colour depth}

\text{file size (bytes)} = \frac{\text{width} \times \text{height} \times \text{colour depth}}{8}

This is an estimate: the real file is slightly larger because of the file header (and smaller if the image is compressed).

Estimating a bitmap file size

Find the number of pixels: width × height.
Find the colour depth in bits (from the number of colours if necessary).
Multiply to get bits; divide by 8 for bytes.
Convert to the unit asked for, using 1024 for KiB/MiB/GiB or 1000 for kB/MB/GB.
State the unit, and remember the header makes the true file slightly larger.

A true-colour image

A photograph has resolution 1920 × 1080 pixels and a colour depth of 24 bits. Estimate its file size in MB and in MiB.

Solution

Pixels: $1920 \times 1080 = 2\ 073\ 600$ .

Bits: $2\ 073\ 600 \times 24 = 49\ 766\ 400$ .

Bytes: $49\ 766\ 400 \div 8 = 6\ 220\ 800$ . (Shortcut: 24 bits is 3 bytes, so $2\ 073\ 600 \times 3$ .)

In MB: $6\ 220\ 800 \div 10^6 \approx 6.22\ \text{MB}$ .

In MiB: $6\ 220\ 800 \div 2^{20} \approx 5.93\ \text{MiB}$ .

Colour depth from the number of colours

An image is 800 pixels wide and 600 pixels high and uses a palette of 256 colours. Calculate the size of the pixel data in KiB.

Solution

256 colours need $\log_2 256 = 8$ bits per pixel (1 byte).

Bytes: $800 \times 600 \times 1 = 480\ 000$ .

KiB: $480\ 000 \div 1024 = 468.75\ \text{KiB}$ .

How many images fit?

A camera takes photographs of 4000 × 3000 pixels with 24-bit colour, uncompressed. Its memory card holds 32 GB. Calculate the maximum number of photographs the card can store, ignoring file headers.

Solution

One photo: $4000 \times 3000 \times 3\ \text{bytes} = 36\ 000\ 000$ bytes $= 36\ \text{MB}$ .

Number of photos: $32\ 000\ \text{MB} \div 36\ \text{MB} = 888.9$ .

Only whole photographs can be stored, so round down: 888 photographs.

Tip

Calculators are not allowed, so arrange the arithmetic to be easy. Cancel early: $\dfrac{1024 \times 768 \times 16}{8} = 1024 \times 768 \times 2$ bytes, and dividing by $2^{20}$ is $\dfrac{1024 \times 768 \times 2}{1024 \times 1024} = \dfrac{1536}{1024} = 1.5\ \text{MiB}$ . Choosing binary units when the dimensions are powers of two often makes the numbers come out exactly.

Effects of changing resolution and colour depth

Because file size is a product, each factor scales it directly.

Increasing the image resolution (more pixels) gives more detail, so the image can be enlarged or printed larger before it looks pixelated. File size increases in proportion to the number of pixels: doubling both width and height multiplies the size by 4.
Increasing the colour depth gives more possible colours per pixel, so colours and gradients (such as skies and skin tones) look smoother and more realistic, with less banding. File size increases in proportion to the bits per pixel: going from 8-bit to 24-bit colour triples the size.
Decreasing either does the reverse: smaller files that load and transmit faster, but less detail or fewer colours.

Effect of changes on file size

An image is 1024 × 768 pixels with a colour depth of 16 bits. Its pixel data is 1.5 MiB.

(a) Calculate the new size if the colour depth is changed to 8 bits.

(b) Calculate the new size if instead the resolution is changed to 512 × 384 pixels.

Solution

(a) Colour depth halves, so the size halves: $0.75\ \text{MiB}$ .

(b) Width and height both halve, so the number of pixels is divided by 4: $1.5 \div 4 = 0.375\ \text{MiB}$ .

(c) In (a) the image can show only 256 colours instead of 65 536, so gradients may show visible bands and colours may be less accurate. In (b) there are a quarter as many pixels, so less detail is stored; displayed at the original size it looks blurred or pixelated.

Vector graphics

A vector graphic does not store pixels at all. It stores a description of the picture as a set of drawing objects (lines, rectangles, circles, curves, text), each with properties that define it. When the image is displayed, the software calculates which screen pixels to colour by drawing each shape from its description.

Definition

A drawing object is a component of a vector graphic, such as a line, rectangle, ellipse, curve or text box.

A property is a value that defines one aspect of a drawing object, such as its position, size, line colour, line thickness or fill colour.

A drawing list is the list of all the drawing objects in a vector graphic, with their properties, in the order in which they are drawn.

A simple drawing list for a road sign might look like this:

Order	Object	Properties
1	Rectangle	top-left (10, 10), width 200, height 120, line colour black, line thickness 2, fill white
2	Circle	centre (110, 70), radius 40, line colour red, line thickness 8, fill none
3	Text	position (85, 80), string "30", font size 36, colour black

Order matters: later objects are drawn on top of earlier ones.

Why vector graphics scale perfectly

Because a circle is stored as "centre and radius", enlarging it means multiplying the numbers and redrawing. The edge is recalculated at the new size, so it stays perfectly smooth at any scale. A bitmap, by contrast, can only stretch its existing pixels, so enlarging it reveals blocks.

The file size of a vector graphic depends on how many objects it contains and how complex they are, not on how large the picture is drawn. A simple logo may be a few kilobytes whether it is printed on a business card or a billboard. A photograph, however, would need millions of tiny objects to describe and is impractical as a vector.

Choosing bitmap or vector

Key result

	Bitmap	Vector
Stores	Colour of every pixel	Drawing list of objects and properties
Scaling	Pixelates when enlarged	Scales without loss of quality
File size depends on	Resolution × colour depth	Number and complexity of objects
Editing	Pixel by pixel; individual objects cannot be selected	Each object can be selected and changed by editing its properties
Good for	Photographs, scanned images, realistic images with continuous variation in colour	Logos, diagrams, maps, technical drawings, fonts, icons

Justifying the choice

A company needs (a) a logo to appear on its website, letterheads and the side of a lorry, and (b) photographs of its staff for its website. Justify the type of graphic for each.

Solution

(a) Vector. The logo will be shown at very different sizes. A vector graphic is redrawn from its drawing list at each size, so it scales without becoming pixelated. A logo is made of a few simple shapes and text, so the drawing list, and therefore the file, is small.

(b) Bitmap. A photograph contains continuous, irregular variation of colour that cannot be broken into a small number of shapes. A bitmap records every pixel, capturing the detail; it only needs to be displayed at a fixed web size, so scaling is not an issue.

Watch out

Using colours instead of colour depth. In the file size formula, use bits per pixel, not the number of colours. A 256-colour image uses 8 bits per pixel, not 256.

Forgetting to divide by 8. Width × height × colour depth gives bits.

Rounding up a "how many fit" answer. You cannot store 888.9 photographs; round down.

Saying vector files are "always smaller". A very complex vector drawing can be larger than a bitmap. Say the size depends on the number of objects, not on the display size.

Defining a drawing list as "a list of objects". Include the properties and that it is the information needed to draw the image.

Exam tip

File size questions usually give one mark for the method (writing out width × height × colour depth) and one for the answer in correct units. Write the expression before you calculate. If the question says "estimate", mention that the header is ignored.

For "explain the effect on the image of increasing the colour depth" give both sides: the quality effect (more colours, smoother gradients, more realistic) and the file size effect (larger file). For justification questions, link a property of the format to the task: "it will be enlarged, so vector, because it is redrawn at any size without pixelation".

Definitions must use the terms: "a drawing object has properties, such as..."; "colour depth is the number of bits per pixel".

Summary

A bitmap stores a colour for every pixel; a vector graphic stores a drawing list of objects and their properties.
Colour depth $n$ bits gives $2^n$ colours.
Bitmap file size (bytes) $\approx$ width × height × colour depth ÷ 8, plus a header.
File header: metadata such as file type, width, height, colour depth, compression.
More pixels: more detail, bigger file; more colour depth: more colours, bigger file.
Vectors scale without pixelation; size depends on the number and complexity of objects.
Photographs: bitmap. Logos, diagrams, maps, fonts: vector.

Practice

Question

Define the terms pixel and colour depth.
State the number of colours available with a colour depth of 12 bits.
An image is 640 × 480 pixels in black and white (1 bit per pixel). Calculate the size of the pixel data in bytes.
An image is 2048 × 1536 pixels with a colour depth of 24 bits. Calculate its size in MiB. Show your working.
Explain the difference between image resolution and screen resolution.
Describe what is stored in the file header of a bitmap image and why it is needed.
Describe how a vector graphic is encoded, using the terms drawing object, property and drawing list.
An image of 512 × 512 pixels uses a colour depth of 12 bits. Calculate the file size in KiB. The colour depth is then reduced to 4 bits; state the new file size and describe the effect on the image.
A 2 GiB memory card is used to store uncompressed images of 2048 × 1536 pixels in 24-bit colour. Calculate the maximum number of images the card can store. Show your working.
An architect produces floor plans which are viewed on screens and also printed on large sheets. A colleague suggests saving them as bitmaps at a very high resolution so they look sharp when printed. Evaluate this suggestion and recommend a format, giving reasons.

Answers

A pixel is the smallest addressable element of a bitmap image, holding one colour. Colour depth is the number of bits used to represent the colour of each pixel.
$2^{12} = 4096$ colours.
$640 \times 480 \times 1 \div 8 = 38\ 400$ bytes.
$2048 \times 1536 \times 24 \div 8 = 2048 \times 1536 \times 3 = 9\ 437\ 184$ bytes; $\div 2^{20} = 9\ \text{MiB}$ .
Image resolution is the number of pixels in the image (width × height). Screen resolution is the number of pixels the display can show. If they differ, the image is scaled to fit and may lose detail or look pixelated.
Metadata such as the file type/format, the width and height in pixels, the colour depth and any compression method. Software needs it to know how to read the pixel data: how many bits make one pixel and where each row ends.
The image is stored as a drawing list: a list of the drawing objects (such as lines, circles, rectangles) that make up the image, in the order they are drawn. Each object is defined by its properties, such as coordinates, dimensions, line colour, line thickness and fill colour. To display the image, the software draws each object from its properties.
$512 \times 512 \times 12 \div 8 = 393\ 216$ bytes $= 384\ \text{KiB}$ . At 4 bits the size is a third: $128\ \text{KiB}$ . Only 16 colours are now available, so colours are less accurate and gradients show banding.
One image: $2048 \times 1536 \times 3 = 9\ 437\ 184$ bytes $= 9\ \text{MiB}$ . Card: $2\ \text{GiB} = 2048\ \text{MiB}$ . $2048 \div 9 = 227.6$ , so 227 images.
A very high resolution bitmap would produce a very large file, and it would still pixelate if printed larger than planned; lines and text could not be edited as objects. Floor plans are made of lines, shapes and text, so a vector graphic is better: each wall or label is an object with properties, the file is small, it scales to any print size without losing sharpness, and individual objects can be edited.

Bitmap images

Colour depth

Image resolution versus screen resolution

Bitmap file size

Effects of changing resolution and colour depth

Vector graphics

Why vector graphics scale perfectly

Choosing bitmap or vector

Practice

Console