Pictures on Computers:

Digital Image is often used to describe a computer generated image.

Digital is referring to the two digits of the binary number system...0 and 1. Each binary number is called a "bit".

All the information and commands used within a computer are expressed in this binary number system. Computers may offer higher forms of notation such as our alphabet and the decimal numbers, but they are first stored as combinations of 0s and 1s.

A group of eight bits is called a "byte". It might look like this: 01100111. If you add up all the possible combinations of eight 0s and 1s you will arrive at the number 256. This is 2 to the eighth power.

Think about it...a binary number system (base 2 in math talk)...a byte containing 8 bits... 256, or 2 to the eighth power, of possible combinations. Coincidence????

Bytes are handy for defining 256 levels of color in images but they are also the computer "words" used to describe the letters, numbers and characters of the alphabet.

Raster Image is often used to describe images made of pixels.

A digital image is a collection of data, displayed on a display grid. This grid is called a raster.

The raster image is a collection of data. Each pixel is defined by numbers expressed in bits. A 1-bit number can describe two colors for each pixel.

If we assign more bits to each pixel, we can get more colors out of every pixel.

Every bit doubles the number of colors: 1-bit describes 2 colors, 2-bit describes 4 colors, 3-bit describes 8 colors, 4-bit describes 16 colors...and so on. Our computers usually work with of 8-bits of data. This gives 256 colors, or levels of gray tones.

The RGB or CMYK channels in Photoshop are not necessarily a "color"; they are data, which displays in a channel as a gray image and will be translated to color only when interpreted by an output device - monitors, printers or printing processes.

Photoshop channels in additon to the image channels are used as masking or selection tools.The pixels in a mask channel can be instructed to apply an effect on image pixels at the same raster location.

 

Computer pictures are really information, describing tones or colors. This is stored in a file similar to a spread sheet.

Let's look at a computer picture.

This picture is really a grid with 400 squares across and 257 down.

Now take a look at an extreme close-up of the red logo on the can of beans...

Look, it's really row after row of little squares. These squares are the most basic building blocks of any computer graphic; they are called PICTURE ELEMENTS...

PIXELS, for short.

Each and every one of this photo's pixels is recorded in the computer file. The file has the location, or address, of each pixel on the grid (440 x 257 squares) and the description of the color of each pixel.

Bitmapped image is a term that comes from this "map" of pixels. Below is a small portion of the map of a 24-bit image.

This is a huge amount of information and that is why graphics files are so large.

How do we define a color?

For any graphics displayed on a color computer monitor we have swiped a trick for the good old human eyeball. Did you know...

We can only see 3 colors! This sounds absurd...but here is how it works.

Inside our eyes the images we see pass through the lens and focus onto the retina. The retina is covered with special cells which are sensitive to light. These cells come in three types: Red sensitive, Blue sensitive and Green sensitive. Everything we see is gathered as a collection (like a grid!...again we have a grid) of red, green and blue information. This information is sent back to our wonderful brain where it is interpreted. By analyzing the strength of the red, green and blue signals from the eyes, the brain creates our perception of images and all the colors of the rainbow.

This happens continuously and in great detail (resolution)...our brain is one SUPER computer!

Welcome to the RGB Color Space.

There are more than one way to describe color. Red, green and blue (RGB) is one. CMY, cyan, magenta and yellow is another color space. This is the basis for the inks used to print color in magazines. Because the inks can't do a perfect job of making colors, printers also use black ink (referred to as K) and the printer's color space is called CMYK.

How does the Monitor do it?

Remember those pixels in the image above? They are a pattern of multicolored squares. Can the monitor display those pixels?

Here is the old eyeball trick! The monitor is built to display three colors...Red, Green and Blue. Mixed together, they can more or less create the same range of colors that our eyes and brain can see.

The monitor uses an electron gun to shoot a stream of electrons (electricity) onto a chemical called a phosphor. When electrons strike a phosphor, the phosphor glows, sending off light. The phosphors come in three types; one emits Red light, one emits Green and one emits Blue. They are like tiny colored light bulbs, each on its own dimmer switch.

Now it gets tricky. To create a full screen image the electron gun is swept across the screen horizontally, row by row from top to bottom. It must do this cycle very quickly and repeat itself to keep those phosphors lit up. This cycling speed is what is called the refresh rate. This is usually around 75 times a second, or 75Hz.

The phosphors are arranged in a pattern and a very thin metal mask is used to define the pattern precisely. Below is a close-up a a monitor (this is a very old non-multiscan model, so the pattern is very simple)...

Do you see the pattern and the color gradation? The light and dark tones are created by varying the amount of electricity the electron gun shoots at each pixel. The more electrons the brighter the color. The brightest area around the lettering is what you would see as white when you look at the screen. Because they are too small for our eyes to separate, the red, green and blue lights are seen as white when they reach our brains.

Red, green and blue are called the "Additive Primary Colors" because they form white light when added together.

Here is an even closer view.

Each of those triangular clusters of a red, green and blue dot is the method your monitor uses to portray each of those pixels we saw above in the can of green beans photo. A square pixel is displayed by a 3-color cluster of phosphor dots on the monitor.


So, let's get this straight! Suppose your monitor is set to display 800 pixels wide and 600 pixels tall. The electron gun knows how many electrons to shoot at every red, green and blue dot on the screen. The beam of electrons zips across the rows of dots, lighting up the phosphors. It goes line-by-line, top to bottom shooting 800 red, 800 green and 800 blues dots on every line. It does each of the 600 rows to cover the screen. The phosphors only glow for an instant, so the electron gun shoots the entire screen 75 times every second to keep the image bright.

By the way, the electron gun is a stream of electrons which pass by a set of electromagnets which deflect the stream. The variance in the magnets is what moves the beam from side to side and up and down. This all happens in a vacuum inside the picture tube of your monitor.

Those new flat panel displays... The new flat panel monitors are much more direct. They are a grid of tiny solid state light emitting thingies...like tiny light bulbs on a reader board sign, and they simply light up. No electron guns, etc.

Now that we have the monitor working...

We have a computer file which defines a grid of pixels. Each pixel has a color value. The monitor converts each pixel's color value into a red, green and blue intensity which it shoots at the 3-dot cluster representing the pixel.

What kind of information defines a pixel?

Computers didn't always have the power to make color. The early models had only two options...a pixel was on or it was off. This was 1-bit information.

Early color monitors only had limited numbers of colors. Early computers only "knew" how to make 16 colors so a pixel required the information to provide 16 choices. This could be done with 4 bits of information.

Monitors today potentially display 256 colors, about 65,000 or 16.7 million colors. These are 8-bit, 16-bit and 24-bit, respectively. The computing power of the display card in the computer determines the number of colors.

An 8-bit display only has 256 choices of color. It can pick any set of 256 colors from the possible 16.7 million colors that the monitor can create. The 8-bit color display card must remember the 256 choices. It does this by putting the 256 color definitions into a Color Lookup Table (CLUT, also called the Color Palette). It must use those 256 colors to display everything on the screen at any moment.

16 and 24-bit displays have larger choices of colors. They can create nearly any color and don't rely on the Color Lookup Table.

Graphic files can contain varying amounts of color data ranging from 1-bit to 24-bit. 32-bit files include a layer of masking information.

Indexed Color - 8-bit meets 8-bit

The Internet and multimedia frequently use 8-bit graphics and displays to keep file sizes small to accommodate the limited transmission speeds of the hardware they use.

An 8-bit graphic has 256 possible colors, no more...but it can have less. The 8-bit graphic uses a CLUT, just as the monitor does. Every pixel in a graphic image is associated with a color on the CLUT. If a color on the CLUT is edited and redefined to be another color, the pixels in the graphic which used that position on the CLUT will change their displayed color to the newer color.

This relationship of graphic pixels to CLUT color positions is called INDEXING. An indexed color image has its own CLUT stored with it. If no other graphic has control of the CLUT contents, a new image can load its CLUT when it displays. If it can't, there may be some inappropriate colors.

What does 24-bit do?

24-bit images contain three 8-bit channels of information; Red, Green and Blue. Every pixel is assigned three values, as shown in the bit mappped image example shown above. Since each color channel can have 256 variations, the total number of color combinations for every pixel is large, about 16.7 million colors. Most print grapics use 24-bit or 1-bit images. Some systems use more than 24-bit files but they aren't common.

On the Internet, 24-bit graphics will display as best they can on the viewer's computer. If they are on a computer with a 16 or 24-bit monitor they will look great. If they are displayed on an older 8-bit monitor they can only use the 256 colors currently used by the system. Some hardware and software can make adjustments on the fly to improve the display color selection. Some systems will not ...they use what ever Color Table (Palette, CLUT...same thing) is active. This may mean that if your computer can not find any blue colors in the palette to match a blue sky it will display the next closest match...a turquoise or purple, possibly.

This has been a quick introduction to computer color display. Be sure to visit some of the web sites offering more detailed explanations of color.

BACK TO THE TOP