Representing Text and Images

Active learning works because students need to see binary as more than numbers to grasp how text and images become digital files. When students convert letters to bits or mix RGB values, the abstract becomes concrete, building lasting understanding of encoding systems.

• Secondary 3
• Computing
• 4 activities
• 30 min–45 min

Learning Objectives

1. Analyze how a sequence of binary digits can represent both alphanumeric characters and color values.
2. Explain the relationship between bit depth and the resulting quality and file size of a digital image.
3. Compare and contrast the digital representation of raster and vector graphics.
4. Calculate the number of possible characters or colors that can be represented with a given number of bits.
5. Demonstrate the process of converting text characters to binary using ASCII or Unicode encoding.

Case Study Analysis

⏱ 30 min·Pairs

Binary Text Encoder: ASCII Challenge

Pairs receive a secret message and an ASCII table. They convert each character to 8-bit binary, then transmit to another pair for decoding. Discuss errors from bit flips to highlight data integrity.

Prepare & details

Analyze how a sequence of bits can represent both a letter and a color value.

Facilitation Tip: During Binary Text Encoder, have students work in pairs to convert their initials to binary, then swap with another pair to decode, reinforcing both encoding and decoding skills.

Setup: Groups at tables with case materials

Materials: Case study packet (3-5 pages), Analysis framework worksheet, Presentation template

• Analyze
• Evaluate
• Create
• Decision-Making
• Self-Management

Case Study Analysis

⏱ 45 min·Small Groups

RGB Pixel Mixer: Color Creation

Small groups use online RGB tools or colored paper strips to mix values and match target colors. Record binary for each component, then predict outcomes for bit depth reductions. Share creations class-wide.

Prepare & details

Explain the relationship between bit depth and the quality/size of a digital image.

Facilitation Tip: For RGB Pixel Mixer, provide students with color swatches and ask them to match the RGB values to the binary representations they create, making the connection between abstract numbers and visible colors explicit.

Setup: Groups at tables with case materials

Materials: Case study packet (3-5 pages), Analysis framework worksheet, Presentation template

• Analyze
• Evaluate
• Create
• Decision-Making
• Self-Management

Case Study Analysis

⏱ 40 min·individual then small groups

Raster vs Vector Scale Test

Individuals draw a simple image in raster (grid paper) and vector (describe shapes mathematically). Groups scan and enlarge both, observing pixelation in raster. Compare file representation conceptually.

Prepare & details

Differentiate between vector and raster graphics in terms of their digital representation.

Facilitation Tip: In Raster vs Vector Scale Test, ask students to draw a simple shape using both methods, then physically stretch the raster version to observe distortion and keep the vector version sharp to highlight key differences.

Setup: Groups at tables with case materials

Materials: Case study packet (3-5 pages), Analysis framework worksheet, Presentation template

• Analyze
• Evaluate
• Create
• Decision-Making
• Self-Management

Case Study Analysis

⏱ 35 min·Whole Class

Bit Depth Image Analyzer

Whole class views images at 1-bit, 8-bit, and 24-bit depths using shared software. Predict and measure file sizes, then vote on quality trade-offs via polls.

Prepare & details

Analyze how a sequence of bits can represent both a letter and a color value.

Setup: Groups at tables with case materials

Materials: Case study packet (3-5 pages), Analysis framework worksheet, Presentation template

• Analyze
• Evaluate
• Create
• Decision-Making
• Self-Management

Teaching This Topic

Teach this topic by starting with hands-on conversions so students experience how bits become meaningful data. Avoid lecturing about binary theory first; instead, let the activities reveal patterns, such as how ASCII values cluster for letters. Research shows that when students manipulate data directly, they retain concepts better than through abstract explanations alone.

What to Expect

Students will confidently explain how bits represent text and images, compare raster and vector graphics, and evaluate trade-offs in bit depth. They should use accurate vocabulary and justify choices with evidence from their activities.

Watch Out for These Misconceptions

Common Misconception

During Binary Text Encoder, watch for students who assume binary only represents numbers and ignore ASCII context.

What to Teach Instead

Pause the activity after the first few conversions and ask students to predict what happens if they interpret their binary as a character instead of a number, then test their predictions using the ASCII table provided.

Common Misconception

During Bit Depth Image Analyzer, watch for students who assume more bits always mean better images without trade-offs.

What to Teach Instead

Provide three versions of the same image at 8-bit, 16-bit, and 24-bit depths, then have students calculate file sizes and compare visual quality to highlight storage and performance implications.

Common Misconception

During Raster vs Vector Scale Test, watch for students who conflate pixel distortion with poor drawing skills.

What to Teach Instead

Use a ruler to measure the edges of both raster and vector shapes before and after scaling, then have students record the change in dimensions to demonstrate the difference in storage methods.

Assessment Ideas

Quick Check

After Binary Text Encoder, give students a binary sequence like 01001000 and ask them to identify whether it represents a character or color value, then explain their reasoning using the ASCII table or RGB context.

Exit Ticket

After RGB Pixel Mixer, provide students with two RGB values and ask them to write the binary representation for each, then explain why one color appears brighter than the other based on its bit composition.

Discussion Prompt

During Raster vs Vector Scale Test, ask students to share their observations about scaling and then facilitate a class discussion on which method would be better for a logo on a billboard versus a photo on a website, referencing file size and quality.

Extensions & Scaffolding

• Challenge students to create a short encoded message using extended ASCII (beyond standard 128 characters) and explain how Unicode would handle it differently.
• For students who struggle, provide pre-encoded binary strips for Binary Text Encoder so they focus on decoding patterns rather than initial conversion errors.
• Deeper exploration: Have students research how PNG and SVG files store data differently, then present findings comparing file structures and use cases.

Key Vocabulary

Pixel	The smallest controllable element of a picture represented on a screen. In digital images, pixels are arranged in a grid.
RGB Color Model	A color model where red, green, and blue light are added together in various ways to reproduce a broad array of colors. Each color component is typically represented by a number.
Bit Depth	The number of bits used to represent the color of a single pixel in a bitmap image or the intensity of a single element in a grayscale image. Higher bit depth allows for more colors.
Raster Graphics	Digital images that are made up of a grid of pixels. Examples include JPEGs and PNGs. They can lose quality when scaled up.
Vector Graphics	Digital images that are defined by mathematical equations rather than pixels. Examples include SVGs. They can be scaled infinitely without losing quality.