GCSE Link: 3.06 (Images)

We've already seen that bitmap images are made of individual coloured pixels. The colour depth that image tells you how many bits are used for each pixel, and this determines how many colours can be stored in the image. We can also calculate the file size using width × height × colour depth.

However, in GCSE, we did not mention the header. This is metadata at the start of the image which could include the height, width, and colour depth of the image.

The resolution of an image (on a screen or paper) is the number of pixels per inch.

With a higher resolution, the image will appear smaller but more relatively detailed.


We are now going to learn about an alternative way of representing images:

A vector image is made up of geometric shapes instead of pixels.

This means that if you draw shapes such as rectangles, ellipses and other polygons, they can be represented exactly with no pixelation (you can zoom in forever).

Vector image files store the position, size, and colour of each shape (essentially as a list of shapes). Then, the program which is displaying the image has to draw each shape one by one.

The book icon next to all of the definitions is an SVG (scalable vector graphic). This means that if you open it in a new tab and keep zooming in, the lines should still appear smooth.


Table 1 shows a comparison of bitmap and vector images.

Table 1

  Bitmap Vector
Stores... The colours of each pixel (and the image header) Properties of each geometric shape (and the image header)
Used for... Photos of real-world scenes Icons, logos and other graphics
File sizes Typically higher Typically lower
Scalable? No - it will appear more and more pixelated as you zoom in Yes - you can zoom in infinitely without any pixelation


Would it make more sense for the images of characters in font faces to be stored as bitmaps or vectors?

Vectors, because they are scalable (allowing the same images to be used for differently sized letters), and because they typically take up less storage space.