Representing images in digital systems

How do computers store and represent images?
Show students an image and ask them how they think computers store and represent images.

To assist with image storage, computers employ a binary value to represent each pixel. It does this through the use of a ‘bit plane’. A bit plane is like a special layer in a picture. Each tiny dot in the picture, called a pixel, is represented by a number made up of 0s and 1s. This number tells the computer what colour the pixel should be. The bit plane separates the colour information into different layers based on these numbers.

Explain that the students are going to look at an image using a tool that provides information about the image.

Download the following image and save to a folder.

Source Pixabay: Gold coast city.jpeg

Then upload the image to the Pix Spy website.

Explain that we can see the RGB value of a pixel as you hover your mouse over it. When you click on a pixel, the colour is displayed in the ‘Click’ box. The RGB values of the selected pixel are shown below the box. The three values in the example blue are (2, 84,142).

Select a random pixel (without students looking).
Give students the RGB value of the selected pixel and ask them to use the Pix Spy website to find which pixel was selected exactly. Repeat the game as many times as needed.

Share the learning map outlining the main sections of the lesson and its outcomes.

1. Understand how digital systems represent integers in binary.
2. Investigate how digital systems represent images using integers.
3. Create a pixel art image using RGB values.
4. Evaluate different image formats based on design criteria, user stories and potential future impact.

Introduction to digital image representation

• Define digital image representation and its significance in modern technology.
• Explain the basics of the RGB colour model and how it represents colours in digital images.

Refer to the learning hook activity earlier. Explain and make the connection that when we take a picture with a digital device like a camera or phone, the image needs to be converted into a special code that computers can understand. This code breaks the picture into tiny blocks called pixels, which are like building blocks of an image. Each pixel has an RGB value.

By combining different amounts of red, green and blue, we can create any colour we want. For example, if a pixel has a red value of 255, a green value of 0 and a blue value of 0, it will show up as a bright red colour on the screen (255, 0, 0). By changing the values for red, green and blue, we can make all the different colours we see in pictures.

Understanding digital image representation and the RGB colour model helps us see and share pictures on our devices, like smartphones, tablets and computers. The colour model is like a special code that brings images to life.

Binary representation of integers

• Explore how digital systems use binary digits to represent integers.
• Discuss the advantages of using binary representation in digital systems.

Revise that digital systems, such as computers, use a numbering system called binary. Unlike the decimal system we commonly use, which has 10 digits (0–9), the binary system only has two digits: 0 and 1.

Explain that using binary representation in digital systems has several advantages:

• Simplicity: Binary representation simplifies the way computers process and store information. Since there are only two digits, 0 and 1, it becomes easier for computers to understand and work with these values.
• Compatibility: Electronics – such as microchips and circuits in computers and other electronic devices – are designed to work with binary signals. Binary representation aligns perfectly with the way these devices function, making it efficient and reliable.
• Compact storage of information: Binary representation allows for compact storage of information. Since binary digits can be represented by electrical or magnetic signals, a large amount of data can be stored in a relatively small space.

Using the image from the learning hook, investigate what the binary values are of the RGB values (35,115,166).

This specific pixel also has a binary value. To find it you need to work out the binary value of the R, G and B values.To convert a decimal number to binary, we can divide by 2 and use the remainders to calculate the binary number. Follow these steps:

For the red value of 35

1. Start with 35.
2. Divide it by 2. The answer is 17 with a remainder of 1.
3. Continue dividing: 17 divided by 2 is 8 with a remainder of 1.
4. Continue dividing: 8 divided by 2 is 4 with a remainder of 0.
5. Continue dividing: 4 divided by 2 is 2 with a remainder of 0.
6. Continue dividing: 2 divided by 2 is 1 with a remainder of 0.
7. Finally: 1 divided by 2 is 0 with a remainder of 1.
8. Write down the remainders in reverse order: 100011.

For the green value of 115

1. Start with 115.
2. Divide it by 2. The answer is 57 with a remainder of 1.
3. Continue dividing: 57 divided by 2 is 28 with a remainder of 1.
4. Continue dividing: 28 divided by 2 is 14 with a remainder of 0.
5. Continue dividing: 14 divided by 2 is 7 with a remainder of 0.
6. Continue dividing: 7 divided by 2 is 3 with a remainder of 1.
7. Continue dividing: 3 divided by 2 is 1 with a remainder of 1.
8. Finally: 1 divided by 2 is 0 with a remainder of 1.
9. Write down the remainders in reverse order: 01110011.

For the blue value of 166

1. Start with 166.
2. Divide it by 2. The answer is 83 with a remainder of 0.
3. Continue dividing: 83 divided by 2 is 41 with a remainder of 1.
4. Continue dividing: 41 divided by 2 is 20 with a remainder of 1.
5. Continue dividing: 20 divided by 2 is 10 with a remainder of 0.
6. Continue dividing: 10 divided by 2 is 5 with a remainder of 0.
7. Continue dividing: 5 divided by 2 is 2 with a remainder of 1.
8. Continue dividing: 2 divided by 2 is 1 with a remainder of 0.
9. Finally: 1 divided by 2 is 0 with a remainder of 1.
10. Write down the remainders in reverse order: 10100110.

So the binary representation of the RGB colour (35, 115, 166) is (100011, 01110011, 10100110).

Students can check their calculations using a Binary Calculator or rapid tables. Alternatively, use this automated spreadsheet. Students type in the values in binary.

Representing images using integers

• Investigate how images are broken down into pixels and represented using integers.
• Introduce the concept of image resolution and its impact on image quality.

Students should be familiar with the basics of how a computer reads and stores image data. Revise this concept. Explain that when you look at a picture on a computer or tablet, it's made up of small dots called pixels. Each pixel has a specific colour. Computers use whole numbers (integers) to represent the colour of each pixel. Think of pixels as tiny puzzle pieces that make up the whole picture. Each puzzle piece has a number that tells the computer what colour it should be. By combining all the puzzle pieces (pixels) with their numbers, the computer can show the complete picture on the screen.

Ask students if they have heard of the term ‘image resolution’. Develop a shared understanding, asking students to piggy back ideas as student share their ideas.

Image resolution refers to the amount of detail or clarity in an image. It is decided by the number of pixels present in the image. The more pixels there are, the higher the resolution is, resulting in sharper and more detailed images.

Image resolution is usually measured in width and height, such as 1920×1080 or 1280×720. The first number represents the width of the image in pixels, while the second number represents the height. Higher-resolution images contain more pixels and therefore capture finer details. However, they also require more storage space and computing power to process. Lower-resolution images have fewer pixels and may appear less detailed or slightly blurry when viewed up close.

Creating a pixel art image using RGB values

• Engage in a hands-on activity to create a pixel art image using RGB values.
• Discuss the importance of RGB values in defining colours within an image.

Invite students to create their own pixel art images. Provide a link to Piskel – a free online editor for animated sprites and pixel art.

	Note: When on this site, it will automatically set the colour format to be in HEX. To change this to RGB, click on the settings cog and change ‘Colour format’ to RGB.
	Now when students select their colours, they can either type in the RGB values manually or select a colour and see the RGB values in the text box below.

Give students the opportunity to create and share their pixel art images.

Extension

Students who have completed their pixel art can look at several of the RGB values and work out the binary value for each of those pixels. As modelled in the Binary representation of integers part of the lesson.

Advantages and limitations of image representation

• Analyse and compare different image formats (for example, PNG, JPEG, HEIC) based on file size, quality and compression techniques.
• Facilitate a discussion on the advantages and limitations of each format.

Use the below to help guide the conversation on when these certain file types may be best used and why.

In summary, PNG keeps all the details but makes bigger files, JPEG makes smaller files but might have some mistakes or loss of quality and HEIC makes small files while keeping the quality good but might not work on all devices.

Engage students in a reflective discussion about the advantages and limitations of image representation in digital systems.

Use this time to share any extra pixel art as you please, then move on to the following questions:

1. How did representing images in digital systems deepen your understanding of digital technology?
2. What are the advantages of using binary representation in digital systems?
3. How can evaluating different solutions against design criteria and user stories help improve image representation techniques?