Contents

• Audience and Objectives 
• About this document...

• Overview
• The basics: bits and pixels
• Getting The Details: Resolution
• Adding color
• Storing Images
• Summary: the trade-offs

When computer storage was designed, it was intended for numbers, and only numbers. That fact hasn't changed at all during the 60+ years that computers have been in use. 

So how do we get pictures in them? How is it possible that computers have become the leading tool for artists?

The answer is that ingenious people thought of a way to store pictures as numbers. This module explains in basic terms how this is done.

How Computers Store Everything 

The main reason why computers have been so successful is that they are based on very simple ideas. In order to keep parts inexpensive and operation reliable, the fundamental unit of storage on a computer is a simple on/off switch. Because an on/off switch can have two positions, and because computers were designed to do arithmetic, the Off position is interpreted as the number Zero, and the On position is intepreted as One. Very simple. 

How Computers Display Pictures 

Very early in the history of computers, people realized that in order to display many kinds of output - text in different languages, mathematical and chemical symbols, diagrams and illustrations - the computer's output displays should work by building up little tiny dots. For standard symbols like letters and numbers, the computer could output a predefined pattern of dots; to represent diagrams and pictures, it could put the dots together in special ways.
The dots came to be called pixels, from picture elements.

This illustration shows a "happy face" magnified so you can see the individual pixels. (How many pixels are used to make up the eyes?)

Precision of Detail is Resolution

• A sharp, clear picture is said to have high resolution ("high-res")
• An image that is blocky or fuzzy is low resolution ("low-res")

• Dots Per Inch (DPI)
• Pitch

Pitch is the distance between the center of one pixel and the next. Inexpensive monitors have a pitch of .28mm, while the more expensive models have .25mm pitch - that is, 4 pixels in each millimeter.

Color: A Quick Review

• The longest wavelength of visible radiation appears as "red"
• The shortest is "violet"
• All the colors of the rainbow lie between these extremes
• When no light reaches our eyes, we say it is "black"
• When light with an even mixture of all the wavelengths reaches our eyes, we say it is "white"

When people want to produce images, we produce colors in one of three basic ways. 

1. Originally, colors were made by putting a colored substance (such as paint or ink) on a surface. The substance is colored because when white light hits it, only certain wavelengths of light are reflected back.
2. Another way of making colors is to shine white light through a transparent substance (such as glass, plastic, or film). The substance transmits only part of the visible spectrum of light.
3. Recently, people have learned how to directly generate light of specific wavelengths. This is done with cathode ray tubes, lasers, and similar light generators.

By combining three wavelengths of light - red, green, and blue, all parts of the visible spectrum can be created.

The principle for storing monochrome images was simple: 

1 pixel in the image = 1 bit in the computer

In other words, an image was stored by taking the pixels that were bright ("turned on") on the screen, and representing them by bits that were "turned on" (= 1) in the computer.

The pattern of on-off bits in the computer's memory could then be mapped directly to a screen or printer. This is called a bit-mapped image.

The original principle used was based on the fact that CRT screens use Red, Green, and Blue (RGB) as "primary colors" to create the entire spectrum of visible light. Most computer color systems were developed based on this principle:

1 primary color in a pixel = 1 bit in the computer

This means that at least 3 bits were needed to represent the spectrum, and the CRT's electronics are controlled in a very simple way by having each bit turn on (1) or off (0) the color for one of the three electron streams at a given spot on the screen.

In the most common system, a fourth bit was added to represent the brightness of a pixel (on = birght, off = dim). This combination gave 16 possible colors by controlling the brightness of each of the three colors.
 

Though the 16-color system was a great leap beyond monochrome, it was very crude for representing images of artwork or photographs.

The biggest barrier to representing "true color" has always been the cost of moving and storing large numbers of pixels.

As the cost of storage and rapid movement of bits lowered, we became able to store more and more colors, so that photographs and gradients can now be represented quite well.

Today's system represents "millions of colors" by representing each of the three "primary" colors with 8 bits. This gives 2 raised to the 8th power shades of each color, from dark (0) to brightest (255). Combined, we get 2 raised to the 24th power, or 16,777,216 colors!

However: not all sixteen million are safe to use on the Web! Only 216 can be relied on...more about this later.

The Problem

The method of representing colors described above is basic for displaying images on all computers. But there's a problem: for each pixel, at least 24 bits of storage are used. For a 3 by 5 inch photograph, at 72 bits per inch, 1,866,240 bits of storage are needed. That's 233,280 bytes: quite a lot considering the picture isn't very big or very high resolution.

There's another problem: suppose, instead of working with photographs, you're working with diagrams such as blueprints or graphs. When you want to change the layout or the proportions, the bit mapping system makes it necessary to move a lot of these bits around.

The Solution

Rather than trying to store and display pictures the way they are displayed on a screen, several more practical ways of storing images have been developed using clever mathematical techniques.

• Compression techniques have been developed to squeeze images into smaller spaces without losing too much detail. This is useful for storing large images and transmitting them over the Internet.
• If you are interested in shapes and objects rather than shades and areas of color, the shapes can be represented using mathematical geometry. This is useful for storing diagrams, blueprints, and graphs.

Two Fundamental Image Representations

This leads to two funadmentally different ways of storing images: bitmap and vector.

• Bitmap images are stored (basically) the way they are displayed: each pixel in the image is "mapped to" one or more bits in the computer. This is good for photos and artwork.
  Other names for bitmap images: you may see these referred to as raster graphics or paint images
• Vector graphics are stored using the coefficients of geometrical equations which represent the shapes of objects and their relationship to one another. This is good for diagrams, typography, graphs, and blueprints. Vector graphics are displayed by calculating the positions of pixels in the image and mapping them to bits in the screen display unit.
  Other names for vector graphics: you may see these referred to as draw images.

For every detail of an image stored in a computer, there is a cost: the more details you want, the more storage space it will require.

The choice between vector graphics and bitmaps also represents a tradeoff: with vector graphics, more space is required for complex shapes and for little spots of color. Bitmap images make it difficult to preserve the integrity of shapes and individual objects.

For each of these trade-offs, the professional needs to know how to balance the advantages and disadvantages to achieve maximum quality in minimum space. That is the secret of success for good computer graphics!

Audience:

Objectives:

1. Explain how computers display images
2. Define pixel
3. Define resolution
4. Explain measures of resolution: pitch, dots per inch (DPI)
5. Explain bit mapping
6. Explain the concept of color depth
7. List the number of colors mapped by numbers of bits commonly used in bit mapping
8. Discuss the two fundamental methods by which which images can be stored on computers
9. Explain the fundamental trade-offs involved in representing quality images on a computer

Module D20c:

Author:

Institution: