KS3 Computing - Image File Size Explorer

What happens when we change an image?

Digital images are made from pixels. The amount of information stored in an image affects its file size.

Use the controls below to investigate what happens when you change the resolution, colour depth and JPEG quality.

Your challenge is to find out how to make an image use as little storage space as possible while still looking good.

1. Image preview

The image shown has been processed using your selected settings.

Choose an image

Look closely: Try reducing the resolution. At very low resolutions you should be able to see individual pixels becoming much more obvious. Now try reducing JPEG quality. Look for blockiness, blurred detail and changes around sharp edges.

2. Change the image

Resolution 640 × 480

Colour depth 24 bit

JPEG quality 90%

Smaller file Higher quality

Actual JPEG file size

0 KB

Pixels

307,200

Bits per pixel

Colours available

16.7m

Uncompressed size

900 KB

Compression

—

File size comparison

Change the settings to see the difference.

Resolution

Resolution is the number of pixels used to make up an image.

A higher resolution normally means more detail, but also means more pixels need to be stored.

Pixels = width × height

Colour depth

Colour depth is the number of bits used to store the colour of each pixel.

More bits allow more possible colours.

Colours = 2^bits

Compression

Compression reduces the amount of data needed to store an image.

JPEG uses lossy compression. This means some information is removed to make the file smaller.

Lower quality → smaller file

3. Student challenges

Task 1 — Resolution

Set the colour depth to 24 bit and JPEG quality to 90%. Start with 640 × 480.

Now reduce the resolution one step at a time. Record what happens to the file size and image quality.

Task 2 — Colour depth

Set the resolution to 640 × 480. Try 1 bit, 4 bit, 8 bit, 16 bit and 24 bit colour.

What happens to the image as the colour depth increases? What happens to the file size?

Task 3 — JPEG compression

Set the resolution to 640 × 480 and colour depth to 24 bit.

Move the JPEG quality from 100% down to 10%.

Watch both the image and the file size.

At what point do you begin to notice a significant reduction in image quality?

Task 4 — Calculate

An image is 800 × 600 pixels and uses 24-bit colour.

How many pixels does the image contain?

How many bits would be needed to store the pixels if there was no compression?

Show your working.

Task 5 — Real-world decision

You need to send a photograph by email. You want the image to look good but the file must be as small as possible.

Choose settings that you think would be suitable.

Explain why you chose them.

Extension challenge

Can you create an image that is less than 50 KB but still looks good?

Experiment with resolution, colour depth and JPEG quality.

Record the settings you used.

4. Key knowledge

Remember these three important ideas:

Higher resolution means more pixels and usually a larger file.
Higher colour depth means more bits are used for each pixel and therefore usually a larger file.
Higher JPEG quality usually produces a better image but a larger file.

Uncompressed image size = width × height × colour depth

The answer from this calculation is in bits. To convert bits into bytes, divide by 8.

8 bits = 1 byte
1,024 bytes = 1 KB
1,024 KB = 1 MB

Teacher note: The JPEG size shown by this activity is the actual size of the JPEG data generated by the browser for the current image. Real image files can also contain headers, metadata and other information. The activity is designed to demonstrate the relationship between resolution, colour depth, quality, compression and file size.