Bitmap and vector images

Bitmap images

Bitmap images are formed from a grid of tiny coloured squares called pixels. Each pixel holds information about its colour, which means the file must save data for every single pixel. This makes bitmap files larger.

Vector images

Vector images are built using mathematical instructions to draw lines and shapes. The file stores details like the shape's size, position, and colour. This results in much smaller file sizes, and vector images can be scaled up or down without losing quality.

Binary representation of pixels

In bitmap images, every pixel's colour is stored using binary code.

How binary codes work for colours

The length of the binary code determines how many different colours can be shown.

Examples of binary codes and colours:

• A 1-bit code has 2 possible values (0 or 1), so it can show 2 colours.
• A 2-bit code has 4 possible values (00, 01, 10, 11), so it can show 4 colours.

Example of a 1-bit image

A 1-bit image uses just one bit per pixel, limiting it to two colours, such as black and white. Here's how a simple 4x4 grid might look in binary:

In this example:

• 0 represents white.
• 1 represents black.

Example of a 2-bit image

A 2-bit image allows four colours, with each pixel using a 2-bit code. Here's a 4x4 grid example:

In this example:

• 00 represents white.
• 01 represents blue.
• 10 represents green.
• 11 represents red.

Colour depth and its effects

Colour depth refers to the number of bits assigned to each pixel in a bitmap image, which directly affects the range of colours available. As colour depth increases, images can display more realistic and varied shades, improving overall quality.

How colour depth determines colours

The number of bits used for each pixel determines the range of colours. Most modern devices use 24-bit colour depth, which provides 16,777,216 colours - more than the human eye can typically distinguish.

Resolution and image quality

Resolution measures the density of pixels in a fixed area of an image, usually in dots per inch (dpi). It determines how sharp and detailed an image appears, with higher values packing more pixels into the same space.

How resolution works

A higher resolution means more pixels are used to form the image, capturing finer details. Increasing resolution enhances quality but also expands the file size.

Balancing quality and file size

Improving an image's quality through higher colour depth or resolution enhances its appearance, but it also increases the amount of data stored. This creates a trade-off that affects storage, loading times, and sharing.

Impacts of increasing quality

• Higher colour depth - Adds more bits per pixel, allowing more colours but enlarging the file.
• Higher resolution - Adds more pixels overall, improving detail but requiring more storage.