1.2.2 Pixels, Colour and Image Quality
A school website needs a small digital badge for an online event. On the screen, students see a picture. Inside the computer, that picture is stored as many tiny coloured points. Each point is represented using binary data.
In this lesson, you will learn how bitmap images are built from pixels, how resolution affects detail, and how colour depth affects the number of colours that can be represented.
By the end of this section, you should be able to:
- describe an image as a grid of pixels;
- explain how pixel colours can be represented using binary codes;
- define resolution and colour depth;
- explain how resolution affects image detail and file size;
- explain how colour depth affects colour range, quality and file size;
- apply these ideas to simple image scenarios.
Images are built from pixels
A bitmap image can be imagined as a rectangular grid. Each square in the grid is a pixel. The computer records the colour of every pixel so that the image can be reconstructed later.
Bitmap image 位图图像: an image represented by storing the colour of each pixel in a grid.
Binary representation 二进制表示: storing data using bit patterns made from 0s and 1s.
| Human view | Computer view | Stored data |
|---|---|---|
| A small icon or picture | A grid of individual pixels | A sequence of binary codes representing pixel colours |
Common mistake
A bitmap image is not stored as one single colour code. Each pixel needs its own colour information, so larger images require more pixel data.
A simple black-and-white image
The simplest image can use only two colours. One bit is enough for each pixel because one bit has two possible values.
| Bit value | Chosen meaning in this example |
|---|---|
| 0 | White pixel |
| 1 | Dark pixel |
The following 5 × 5 badge pattern could be stored as rows of bits:
| Row | Binary data | Visual idea |
|---|---|---|
| 1 | 00100 | one dark pixel near the centre |
| 2 | 01110 | three dark pixels |
| 3 | 11111 | a full dark row |
| 4 | 01110 | three dark pixels |
| 5 | 00100 | one dark pixel near the centre |
The meaning of 0 and 1 is decided by the image format or by the program reading the image data. Another system could choose the opposite mapping.
Answer-building tip
Link the bit pattern to the pixel: each pixel is assigned a binary code that represents its colour.
Resolution: how many pixels are used?
The resolution of an image describes how many pixels are used to create it. It is often written as width × height.
| Image size | Calculation | Total pixels |
|---|---|---|
| 8 × 6 | 8 × 6 | 48 pixels |
| 16 × 12 | 16 × 12 | 192 pixels |
| 80 × 50 | 80 × 50 | 4000 pixels |
A higher resolution gives the image more pixel positions. This can allow more detail, but it also means that more pixel data must be stored.
Common mistake
Resolution is not the same as colour depth. Resolution counts the number of pixels. Colour depth describes how many bits are available for each pixel colour.
Colour depth: how many colours are possible?
Colour depth tells us how many bits are used to represent the colour of one pixel. More bits per pixel create more possible bit patterns, so more colours can be represented.
Bits per pixel 每像素位数: another way to describe colour depth.
| Colour depth | Calculation | Possible colours | Simple classroom use |
|---|---|---|---|
| 1 bit per pixel | 21 | 2 | black and white |
| 2 bits per pixel | 22 | 4 | four-colour icon |
| 4 bits per pixel | 24 | 16 | simple palette artwork |
| 8 bits per pixel | 28 | 256 | larger indexed palette |
Increasing the colour depth can make an image look more realistic because more colour choices are available. It also increases the amount of data needed for each pixel.
Common mistake
Doubling the colour depth does not merely add two colours. The number of possible colours is calculated using powers of two.
Worked example: a four-colour badge
A designer creates a small 6 × 4 badge using four colours. Since four colours are needed, each pixel requires 2 bits.
| Colour code | Colour name used in this badge |
|---|---|
| 00 | background |
| 01 | blue detail |
| 10 | orange detail |
| 11 | dark outline |
Step 1: count the pixels
6 × 4 = 24 pixels
Step 2: identify the colour depth
Four colours require 2 bits per pixel because 22 = 4.
Step 3: estimate the uncompressed pixel data
24 pixels × 2 bits per pixel = 48 bits
This is only the pixel data. Real image files may also store additional information, such as width, height and other format details.
Answer-building tip
When explaining image size, connect the two factors: more pixels and more bits per pixel both increase the amount of data.
Image quality and file size
Image quality is affected by both resolution and colour depth.
| Change | Effect on image quality | Effect on file size |
|---|---|---|
| Increase resolution | More detail may be shown because there are more pixels | More data is needed because more pixels are stored |
| Decrease resolution | Fine detail may be lost or appear blocky | Less data is needed |
| Increase colour depth | More colours or smoother colour changes may be represented | More data is needed for each pixel |
| Decrease colour depth | Colours may look less accurate or banded | Less data is needed for each pixel |
Develop the explanation
Avoid writing only “the quality is better”. Explain why: a higher resolution uses more pixels, so more detail can be represented.
The computer also needs image information
The pixel data alone is not always enough. The software needs to know how to arrange and interpret the pixel codes.
| Information | Why it is needed |
|---|---|
| Width | Tells the software how many pixels appear in each row |
| Height | Tells the software how many rows of pixels are present |
| Colour depth | Tells the software how many bits represent one pixel colour |
| Colour palette or colour model | Tells the software what colour each code should display |
Common mistake
The same binary stream could be displayed incorrectly if the width, height or colour rules are interpreted wrongly.
Enrichment: RGB colour values
Many screens create colour by mixing red, green and blue light. A common web colour notation uses hexadecimal to describe the amount of each channel.
| Colour code | Red | Green | Blue | Meaning |
|---|---|---|---|---|
#2F80ED |
2F | 80 | ED | a strong blue colour |
#F97316 |
F9 | 73 | 16 | an orange colour |
This connects with the previous hexadecimal lesson: hexadecimal is often used because it gives people a shorter way to view binary data.
Interactive: Pixel Image Laboratory
Build a small pixel image in two directions: type binary pixel data and decode it into the canvas, or paint the pixels and inspect the binary data that is produced. Change the resolution and colour depth to see why the same binary stream must be interpreted using the correct image settings.
Think in three parts
For a bitmap image, ask: How many pixels are there? How many bits describe each pixel? and what metadata is needed to interpret the data?
Practice
Core questions
- Define the term pixel.
- Explain how a simple black-and-white image can be represented using binary.
- Define the term resolution.
- An image is 12 pixels wide and 9 pixels high. Calculate the total number of pixels.
- Define the term colour depth.
- Calculate how many colours can be represented using 3 bits per pixel.
- Explain why increasing resolution can increase image quality.
- Explain why increasing resolution also increases file size.
- Explain why increasing colour depth can improve the appearance of an image.
- Explain why increasing colour depth also increases file size.
- A 20 × 10 image uses 4 bits per pixel. Calculate the number of bits needed for the pixel data.
- Explain why image metadata such as width and height may be needed when decoding an image.
Extension questions
- A simple icon uses 2 bits per pixel. Explain why this allows four different colour codes.
- A student says, “Higher resolution always means a better image.” Explain why this may be too simple.
- A website replaces a 160 × 100 image with an 80 × 50 image using the same colour depth. Explain the effect on detail and storage.
- A game stores small sprites using a fixed palette of eight colours. Determine the minimum colour depth required.
Check selected answers
- 12 × 9 = 108 pixels.
- 3 bits per pixel provide 23 = 8 colour codes.
- 20 × 10 × 4 = 800 bits of pixel data.
- Eight colours require 3 bits because 22 is only 4, while 23 is 8.
Review
Key ideas
- A bitmap image is represented as a grid of pixels.
- Each pixel has a colour represented using a binary code.
- Resolution describes how many pixels are used in an image.
- Colour depth describes how many bits are used for each pixel colour.
- Increasing resolution usually increases detail and file size.
- Increasing colour depth increases the number of possible colours and file size.
- More bits per pixel means more possible colour codes.
- Image data may require metadata such as width, height and colour depth.
Quick self-check
- Can I explain how pixels form an image?
- Can I define resolution and colour depth?
- Can I calculate the number of pixels in a simple image?
- Can I explain the effect of increasing resolution?
- Can I explain the effect of increasing colour depth?
One-minute exit task
Explain why a 100 × 100 image with 8-bit colour depth needs more pixel data than a 100 × 100 image with 2-bit colour depth.