Full teaching narration is free with Private Starter.Create free account
Back to curriculum
Computer ScienceGrade 7· U.S. National — Common Core & NGSS
Aligned to:U.S. educational frameworks

Compressing Digital Images: Balancing Quality and File Size

Students compare simple image-compression methods, calculate changes in file size, and use evidence to recommend an encoding that balances image quality with storage needs.

Compressing Digital Images: Balancing Quality and File Size

Illustrations are auto-generated and may be placeholders. They can be refreshed to match the narration.

Full teaching narration is included free with a Private Starter account.Create free account

How Computers Represent Images

A digital image is a grid of tiny squares called pixels. Each pixel stores a number that represents a color. In a simple black-and-white image, 0 might mean white and 1 might mean black. A 4-by-4 image contains 16 pixels, so its uncompressed data could be written as 16 bits read from left to right and top to bottom. Color images require more data. In the RGB system, each pixel records amounts of red, green, and blue, often using values from 0 to 255. For example, RGB 255, 0, 0 represents bright red. Image files may also contain information such as width, height, and color format. Compression reduces the data needed to represent the pixels while trying to preserve the image’s useful features.

A 4-by-4 pixel grid appears beside an enlarged red pixel showing its RGB values and image dimensions.
A 4-by-4 pixel grid appears beside an enlarged red pixel showing its RGB values and image dimensions.Source: Illustrated for this lesson

Trying Run-Length Encoding

Run-length encoding, or RLE, stores repeated values as runs instead of listing every value separately. Suppose one row contains black, black, black, black, white, white, black, black. RLE can represent that row as four black, two white, two black. The encoder records each run’s color and length, and the decoder repeats the color the stated number of times. This method is lossless because decoding restores every original pixel exactly. RLE works well for icons, diagrams, and simple artwork with large areas of one color. It may work poorly for photographs or patterns in which neighboring pixels frequently differ. Both the encoder and decoder must also follow the same rules, including the scan direction and the number of bits used for each color and run length.

A row of eight pixels is grouped into three colored runs that pass through an encoder and decoder.
A row of eight pixels is grouped into three colored runs that pass through an encoder and decoder.Source: Illustrated for this lesson

Comparing Original and Compressed Sizes

To evaluate compression, compare the number of bits before and after encoding. Consider a 16-pixel black-and-white row containing eight black pixels followed by eight white pixels. The original uses 16 bits because each pixel needs one bit. Suppose an RLE record uses one color bit and four count bits. Two runs then require 2 times 5, or 10 bits. The savings are 16 minus 10, or 6 bits. The percent reduction is 6 divided by 16 times 100, which equals 37.5 percent. However, a row that alternates black and white has 16 runs. Its RLE size would be 16 times 5, or 80 bits, five times the original size. The same method can therefore shrink one image but enlarge another.

A comparison chart shows a two-run row shrinking from 16 to 10 bits and an alternating row growing to 80 bits.
A comparison chart shows a two-run row shrinking from 16 to 10 bits and an alternating row growing to 80 bits.Source: Illustrated for this lesson

Evaluating Quality and Storage Tradeoffs

A design solution should be judged using clear criteria and constraints. Criteria might include readable text, accurate colors, and small file size. A storage limit is a constraint that a solution must meet. Lossless methods such as RLE preserve every pixel, but they may not produce the smallest file. A reduced-color encoding can use fewer bits by replacing many similar colors with a limited palette, but this lossy change may create visible bands in a smooth gradient. For example, an original school logo might be 20 kilobytes, an exact RLE version 12 kilobytes, and an eight-color version 7 kilobytes. Students can score each version for size, clarity, and color accuracy. The smallest version is not automatically best if important details become unclear. Likewise, perfect quality may not be practical when storage is limited.

Three versions of a school logo show different file sizes, color palettes, and clarity under one storage limit.
Three versions of a school logo show different file sizes, color palettes, and clarity under one storage limit.Source: Illustrated for this lesson

Making an Evidence-Based Recommendation

A strong recommendation includes a claim, supporting evidence, reasoning, and an acknowledgment of weaknesses. Imagine that a class website must store 100 logos within a 1,000-kilobyte limit. At 20 kilobytes each, the originals would require 2,000 kilobytes. RLE files averaging 12 kilobytes would require 1,200 kilobytes, so they would still exceed the limit. Eight-color files averaging 7 kilobytes would require 700 kilobytes and leave 300 kilobytes available. If side-by-side inspection and class ratings show that the text remains readable and the colors remain recognizable, students could recommend the eight-color encoding. A counterclaim is that RLE preserves colors exactly. The response is that RLE fails the storage constraint in this situation. Students should also state a weakness: results from a small sample may not represent every logo, so additional images should be tested before final adoption.

A recommendation chart compares storage totals for 100 original, RLE, and eight-color logo files.
A recommendation chart compares storage totals for 100 original, RLE, and eight-color logo files.Source: Illustrated for this lesson