CSCI 102T:: The Socio-Techno Web

For this week's lab assignment, you will explore images and gain some familiarity with common image compression techniques. After this lab you should be able to:

Explain how compression reduces the storage requirements of an image.
Define the terms "lossless" and "lossy" as applied to data compression.
Explain when you might use lossless and lossy image compression.
Explain how human perceptual needs influence acceptable levels of lossy compression.
Calculate the compression ratio between an original and a compressed image.
Graph the storage in bytes of an image as the level of compression is increased.

Note: This lab uses content found in the book Computer Science: An Overview, 11/E by J. Glenn Brookshear.

An image is a sequence of points, called pixels, each one with its color. We use 3 bytes, or 24 bits (recall that 8 bits = 1 byte), to represent each color. Each color is some combination of the three primary colors, Red, Green and Blue (RGB). When working with colors, we (humans) use the Hexadecimal number system for convenience. This way we can refer to any color as a combination of only 6 Hex symbols, instead of a sequence of 24 0s and 1s.

For example, consider a pixel, which has the color red. This means that the its red component is "turned all the way up," while the green and blue components are down to zero. In binary, this looks like this:

which is much easier for us to deal with.

Given the aforementioned paragraph, you might guess that an image of size 9x9 pixels would consist of:
9x9=81 pixels x 3 bytes per pixel = 243 bytes.

Let's test this hypothesis. Here is an image:

Right click on the image, choose Save As, and save the image on your Desktop. Now select the image on your Desktop by clicking on it, and type Command + i to get information about this file. Expand the "More Info" section of the Info window. What are the dimensions of this image? What do you expect the file size to be? What is it actually (see Size under the General section)? Why do you think this is?

Note: The remainder of this lab is strongly based on the sample lab from here.

Digital computer images come from many sources, including digital cameras, scientific experiments, space probes, Earth satellites, computer animations, image scanners, and many others. Images from all these sources can be very large and require considerable storage.

Example: As discussed above in the prelab, an image with dimensions of 1,000 by 1,000 has 1,000,000 total pixels. If each pixel requires 3 bytes of storage, the entire image would take 3 million bytes. That's a lot of bytes for a single image!

High end digital cameras can easily take images larger than 3,000 by 2,000 pixels, and images taken by satellites over the Earth can be 7,000 by 5,000 pixels. The storage required by these images is immense and costly, and large images can be difficult to transmit from space rovers or satellites. Another transmission problem is the size of images used for web pages, because the larger they are, the longer they take to download when viewed. Users are often impatient when images take a long time to appear on a web page.

Because images can take large number of bytes to store, and a long time to download, they are often compressed to reduce their storage. Image compression attempts to reduce the stored size of an image while at the same time keeping the image looking at close as possible to the original version.

One basic way to reduce the storage requirements of an image is to reduce its dimensions to make it smaller on the computer screen. This happens when NASA displays satellite images on public web sites. An image that was originally 7,000 by 6,000 might be reduced to 700 by 600 or 350 by 300 for public use. While an obvious and useful way to reduce image storage, this is not what is generally meant by image compression. In the most common image compression methods, the compressed image remains the same dimension as the original, so a 7,000 by 6,000 image would stay 7,000 by 6,000.

The process of compressing an image takes the original, processes it to reduce the storage, and then stores the compressed image for later use. The process of uncompressing an image takes the compressed version, processes it to recreate the original dimensions, and then presents it for display or further processing.

In lossless compression, the space taken by the image is reduced with no loss to the raw data of the image. This is the best choice for valuable, scientific data since each bit of the data may have meaning. The recreated, uncompressed image cannot be distinguished from the original.

In lossy compression, data may be lost as the image is compressed but the appearance of the image remains close enough to the original to be useful. The recreated, uncompressed image can be distinguished from the original by a careful comparison of the raw data, but on the computer screen the original and compressed versions may look the same.

A compression artifact is a visible sign of the compression. Artifacts can include blurry lines, a blocky appearance or changes in color. In lossy compression that is light, the appearance of the compressed image may be virtually identical to the original with no compression artifacts. By the human eye it might difficult to tell the difference, although a comparison of the raw data would show up differences. In lossy compression that is heavy, the appearance of the compressed image is quite different as it becomes obvious that information has been lost. The image might be look blurred, smudged, or otherwise distorted because of the compression. The raw data can be quite different and show a number of compression artifacts.

This leads to a trade-off of storage requirements and image quality. If we use light compression, we save less space but get higher quality images. If we use heavy compression, we save more space but pay for that in lower quality images. Whether to apply light or heavy compression depends on the use of the image. When we see glossy photos in an expensive magazine, any compression used is probably light as the photographer and publisher want the image to look sharp and attractive, and they are willing to spend more on image storage or transmission. When we see satellite news video broadcast from overseas, the compression may be very heavy because the transmission of the images is difficult and storage must be greatly reduced. The level of image compression that is acceptable depends on what the eventual user of the image would find useful.

This leads us to the primary objective of this lab. How does the level of image compression influence the appearance of an image? When can you tell an image has been compressed, and at what level of compression does an image become unusable because of compression artifacts?

In the lab you'll be estimating the trade off between a qualitative and quantitative measure, which is a common task in computer science. There are some characteristics of data that we can measure precisely using a numeric scale, so the characteristic is quantitative such as image size. Other measures resist precise measurement, such as the quality of image as judged by human eyes, so these measures are qualitative.

You will use the ImageApplet (below) to vary image compression from light to heavy and as you do so record the quantitative measure of image size and the qualitative measure of image quality as you judge it, as well as describing any visible compression artifacts. (I apologize for the typos in the Applet! I didn't create it.)

Since human eyes, computer monitors and lighting can vary as people view an image, the qualitative measure of image quality may vary from person to person. In the lab you are to give your personal best judgment that may not match someone else's.

You may need to play with your security settings and/or install Java in your browser to get this to work. It will not work with Chrome. For Safari, you must open the System preferences application and click on the "Java" icon. Then in the Java Control Panel, click on the "Security" tab, and add an site exception for http://cs.williams.edu/. This will allow you to run the Java Applet below.

Your browser does not support Java, so nothing is displayed.