Valeria was frustrated. It had been almost a year since she and Jonathan had finished their long-awaited dream house, a sleek contemporary sensuously wrapped in dark green glass and inconspicuously set on fifteen acres of rolling woods. She was having a terrible time finding art for the house. She had spent months aimlessly slogging through the galleries with the wine and cheese set, smiling faintly as she remembered a favorite saying of one of her artist friends; "............so many art galleries, so little art". She needed something extraordinary for her reading room, a quiet little cove bathed in soft, filtered afternoon light overlooking the stream behind the house. It had a large, comfortable chaise, and it was her favorite room, a needed respite from the hectic world of medicine. It deserved something special, but she wasn't having much luck finding it.

     One rainy afternoon, just on a whim, she went looking for art on the Internet. Being somewhat of a skeptic, she had expected to find endless ads for "sofa-sized" paintings starting at $39.95 and little else. What she actually found was a complete surprise. A tour of the Louvre. Priceless collections from every corner of the globe. On-line classes from world-renowned conservators. And galleries. Real galleries.

     About an hour into her travels she selected a small thumbnail sketch of something that caught her eye. Here's what came back...........

"Ambiguity of Desire" by Helen Golden.

30 x 40 Digital Collage on Acid-Free Paper - Limited Edition/20 - $1200

 

     It was perfect. The color, the composition, the mood.......... it reminded her of flying, of fresh air, of kind words and soft kisses, of all things far away from the world of needles and hospitals and beeping machines. She picked up the phone and called the gallery. A week later, her favorite room was finally finished.

 

Even though the Web started out as a text-only medium, it has quickly evolved into a rich visual world, complete with high quality images and motion-based graphics. While text-based pages can open up a whole new world of data, they convey only a small portion of the information which is available on the Web. Most Web experiences are at least enhanced by graphics, and if you happen to be shopping for art, touring the Louvre, or watching black holes collide, the pictures are the experience. Because so much of the human brain is devoted to processing visual information, it should come as no surprise that most of what we learn is acquired through vision. It is the world of pictures which can instantly transport you to a distant land, effortlessly traverse time and language barriers, or explain the inexplicable. Graphics can provide new experiences and easily convey concepts that couldn't be understood in any other way. In the world of the Web, a picture truly is worth a thousand words. Unfortunately, breakthroughs in the field of imaging have led to an explosive proliferation of file formats, and we have reached a point where the world of computer graphics has become an almost inscrutable rat's-nest of mostly incompatible data structures, formats, color models, compression schemes, bit orders, and programs to convert images from one format to another. Because the Web was conceived and designed as a way to provide universal access to information across the Net, it has become necessary for the standards committees to select a few formats to receive universal support. In this section we're going to introduce you to some of the basic principles of computer graphics, discuss some of the problems you'll encounter when adding graphics to your site, and tell you about some of the more popular Web formats. 

Oh, Say Can You See?
The light in what we call the "visible" part of the electromagnetic spectrum includes the entire set of wavelengths from about 380 to 770 nanometers. We perceive anything that falls between those two wavelengths as a color. While there are a huge number of colors that we can actually see, the fact that our eyes contain a limited number of color receptors means that we are only capable of resolving about 10,000 colors at the same time.

     Human vision has a few other quirks. Our eyes are typically more sensitive to green light than red, and more sensitive to red light than blue. They are also more sensitive to differences in contrast than they are to absolute differences in color. This means that our eyes tend to smoothly blend groups of pixels containing small color differences into larger, single-colored objects, further reducing the number of colors we perceive in any one scene. Our ability to perceive color at all also varies widely from person to person. It is estimated that about 8% of the population has some form of color blindness, which is easily verified by spending an hour at almost any mall.

     Our perception of color is also affected by environmental factors, such as the amount and color of the ambient light. In the world of the Web, the whole subject is further clouded by the fact that no two computer monitors reproduce color in exactly the same way, even if they are the exact same make and model. When you add all of these factors together it becomes clear that color, like beauty, is truly in the eyes of the beholder. Still, we need to devise some way of consistently reproducing color that the computer can work with.

Color Models
While there are a number of color models which are in common use, most of them fall into one of two categories. The print medium is usually built on subtractive color models, and typically starts with a White page (which theoretically reflects all colors equally) . This means that you arrive at a particular color on the white page by subtracting the colors that are the compliments of the color that you want. If, for instance, I wanted to print a red circle on a piece of white paper using a Subtractive model, I would use an ink that absorbed everything except red, leaving only red to be reflected. Your computer monitor, by contrast, works on an additive color model, meaning that you arrive at the color you want by adding color and intensity to a black screen. If you want a red circle, it's simply a matter of generating the color red at the proper intensity to get the shade of red that you want.

Here are the most popular color models used in computer graphics............

RGB
All of the colors that we are capable of seeing, including white, can be reproduced by mixing some combination of Red, Green , and Blue, the three primary colors that can't be broken down any further. RGB color models define pixel color by mixing varying amounts, or levels, of Red, Green, and Blue to arrive at the desired color and brightness.

HSB
The Hue, Saturation, and Brightness model describes a color according to the properties of the color rather than just mixing the colors themselves. The term "Hue" refers to what we commonly call color in the general sense, such as Red or Blue. "Saturation", also known as croma, is a measure of the amount of white contained in a color. A color which is is 100%, or fully saturated, is called a pure color. For instance, the color red at 100% saturation would be pure red, while red at 50% saturation would appear pink. The last term, "Brightness", describes the amount of light that the pixel emits.

CMYK
CMYK is a subtractive color model which is used primarily by programs which prepare graphics for devices which write to white paper, such as printers and plotters. Three of the colors in the model represent ink colors, each of which absorbs its complimentary colors. Cyan absorbs red, Magenta absorbs green, and Yellow absorbs blue. Because this model works by subtraction, mixing colors can be a little bit confusing at first. If, for instance, you add Cyan and Magenta together, you get Yellow. If you add them all together, you theoretically get black, but in the real world, the quality of the inks used in ordinary printing processes leave you with kind of a muddy brown, so a separate channel, K, was devised. The K channel represents the amount of Black (don't ask) ink used in the printed composite color dot. This system is known as 4-color, or " process" color printing, and is generally not important on the Web unless you're providing your customers with downloadable documents which are designed to be printed on their printers. 

Triplets
In order to provide the computer with the formula for mixing pixel colors on a monitor, most computers which rely on additive color models such as RGB or HSB describe the colors using triplets; sets of three discrete numbers, usually separated by a de-limiter such as a comma. Each number in the set describes a single attribute of the color model. The information needed to describe the color of a single pixel in a 24 bit RGB model, for instance, contains three eight bit binary numbers, each of which is capable of describing 256 levels of Red, Blue, or Green. The table below will give you a better idea of how it works................

One of the advantages of using a model like this is that it provides us with a huge color palette (256 shades of red x 256 shades of green x 256 shades of blue= 16,777,216 possible colors) One of the disadvantages of using a model like this is that you need to store a 24 bit triplet to describe the color of each pixel, even if you're not using all the colors, so this scheme can generate huge file sizes. If you're transmitting this information over the Web, the result is long download times. And because of the sheer number of pixels involved, motion-based graphic formats such as video or animations (which change constantly and require that the computer rapidly re-calculate large portions of the screen ) are almost certain to choke all but the most powerful computers. (If you're still feeling a little bit fuzzy about why using 24 bit triplets is a problem, you might want to check out the side bar below, which will give you a little bit of background on how your monitor works.)

     What if you didn't need so many colors? What if you were using simple graphics which only needed a relatively small number of colors, but you still wanted to be able to pick the colors you used. How would you do it?

Palettes
The answer comes in the form of a scheme which employs a data structure called a Color Look-Up Table. The look-up table lets you assign a number of your choice to each color of your choice, and then provides the computer with the formula for making that color. If, for instance, you were willing to live with only 256 colors in your palette, you could refer to any of them with a single 8 bit binary word (an 8 bit word is capable of describing all the whole numbers between 0 and 255). You could still use a full 24 bit color description if you wanted , so you could pick your 256 colors from anywhere on the palette of sixteen million, but you would only have to store an 8 bit number to call the color. You've just cut your file sizes and your download times by 2/3! Let's use the same 8 colors we used above as the first colors in our new 256 color palette to show you an example of how it works............

     As the computer comes to each of the 8 bit numbers that are stored in your graphics file, it looks in the table for the matching number and the formula for making the pixel color. (While we could technically describe any color in an 8 color palette with a 3 bit binary word, a palette containing only 8 colors wouldn't be all that useful, and most computers use 8 bit binary words, called bytes, as a common word length because that is typically the smallest unit of addressable memory available to the computer.)

     The cube at right shows a palette of 64 colors constructed in RGB Color Space. As you can see, the black square is the one closest to you, and would be the result of the triplet (000,000,000). The colors in this model go from black to red as you go to the right, black to blue as you go to the left, and black to green as you go up, with white, the mix of all three colors, in the corner furthest away from you at the top. If you were to draw a straight line from the closest corner of the black square to the farthest corner of the white square, all of the colors along that line would contain equal amounts of Red, Green, and Blue, and would therefore be shades of gray. Although there are 64 colors in this model, it could theoretically contain as many colors as the computer was capable of describing.

    The problem with using large color palettes across the Web is that they greatly increase the amount of data that the computer must calculate, juggle, download and store. Even using a limited palette of 256 colors, a single frame of a 800 x 600 screen requires that the computer calculate the color values for 480,000 pixels, meaning that almost any kind of full screen motion is still beyond the capabilities of many PCs. You don't even want to know about download times.

     Then there is the question of whether the receiving computer can even display all of the colors in your image. If the system cannot handle the full palette of colors that the image contains, the computer will usually attempt to smoothly dither the incoming colors into a smaller palette, substituting whatever it thinks is close to what you've asked for. In a worst case scenario, the computer won't even attempt to blend the colors smoothly, and blotchy artifacts will appear. The color strips below show what happens to your image as the computer begins to reduce the number of colors in the palette.

     In addition to the fact that this substitution process requires extra time and calculation, the procedure can produce some very bizarre results if the graphic was not carefully prepared, which you can see from the two images below, which I have intentionally mangled to show you what can happen..........

     It seems that we are in a situation that we can't win. If we describe each pixel using large triplets, we can achieve a fairly high quality reproduction of the image, but we will wind up with huge files that would take forever to load. Clearly there is a need for a way to further reduce the amount of raw data that is necessary to describe a screen full of pixels without destroying the quality of the image. This leads us directly to the arcane and somewhat mystifying world of............. 

Compression
Compression is a process that the computer uses to reduce the physical size of a data file. The compression ratio is a set of numbers used to compare the size of the compressed data to the size of the original, or raw data. For example, a compression ratio of 10:1 means the the compressed file is one-tenth the size of the raw data.

Compression methods fall into two general categories.......

Physical Compression uses shorthand descriptions of data in order to make the stored file smaller. Using physical compression, for instance, the string AAAAAAAAAAAAAAA might be stored as A15, or 111111111 might be written as 9-1. In actuality, compression schemes are usually much more complex, but based on the same idea. Physical compression is context independent, meaning that it works regardless of the actual information that the data contains. It accomplishes it's task by re-arranging the data into a more compact form. Almost all image data is compressed physically.

Logical Compression works by logically substituting one symbol for another. Our common contractions, such as the use of can't for cannot, or didn't for did not, are a good example of logical substitution. Likewise, the letters U.S.A. can be logically substituted for the United States of America with no loss of meaning. Logical compression is context dependent, and does not work on all kinds of data. It is rarely used to compress images.

Compression schemes are further divided into another two types........

Lossless compression methods allow the data to be compressed and recovered without changing the contents of the file. The original data is preserved through the entire encode/decode cycle.

Lossy compression schemes throw away some of the data in the file in order to achieve compression ratios that would not be possible otherwise. While you probably wouldn't want to apply lossy compression methods to your only copy of your new screenplay, it can actually be used to great effect on certain types of image files, producing markedly smaller file sizes without a noticeable reduction in image quality. 

Image File Types
In general, there are two basic categories of image files which are used on the Web .............

Bitmaps
The overwhelming majority of images that you'll find on the Web are stored as Bitmap files, which are pixel-by-pixel maps of the image which can be reconstructed, displayed, and manipulated by the computer's imaging software. Because the image is stored a pixel at a time, bitmaps provide the user with an enormous amount of control over the finished image, and allow changes that would be difficult or even impossible in other formats. They are very good at representing complex images.

On the downside, bitmaps can be very large, especially if they contain a large palette of colors. Individual objects in a bitmap cannot be rotated or even spatially manipulated very easily, and bitmaps do not scale well because the computer must either replicate or throw away pixels to change the size of the image.

Vectors
Unlike bitmapped graphics, which display an image by storing the color and position of each individual pixel in the image, Vector Graphics are stored as mathematical descriptions of the elements, or objects, contained in the image. Vector elements are particularly useful for describing line-based shapes such as polygons, circles, and curves. Unlike bitmap files, vector objects can be scaled to almost any size, rotated, and spatially manipulated in real time. Because vector images consist of sets of discrete, mathematically described objects, vector formats are not normally suitable for creating or displaying extraordinarily complex scenes. For instance, you probably wouldn't try to draw a tree in fall colors using vectors. Vector files are also difficult to compress. Unlike a bitmap file, the size of a vector file is directly related to the number of objects contained in the image. 

Anatomy of a Graphics File.........
Most graphics files have a number of data structures in addition to the actual image data. While there are as many ways of organizing this information as there are formats, most of the graphics formats that are popular on the Web contain at least some of the following parts.........

Header
The Header gives the computer all of the information that it needs to decompress and display the file. This information usually includes:

• A file identifier that tells the computer what kind of a file it is
• A file version number which lets the graphics program determine whether it has the resources to support that version of the file.
• An image description that tells the computer how high and wide the image is, the number of pixels per line, the number of bytes per pixel, the number of color planes, etc.
• The type of compression used on the file
• Origin instructions that tell the computer where to start drawing the picture on the screen
• Palette information which tells the computer about the number of colors used in the image and how to construct them.
• Reserved Space which gives the format developers a little bit of extra room if they should decide that they want to add features in later versions

     Header files vary widely from one format to another and from one version a format to another.

Image Data
Like headers, the methods for organizing the actual image data vary widely from one format to the next. In general, image data is usually organized in one of three ways...contiguously, with one row of information following the next from beginning to end; in Strips, which allow the computer to break the image into smaller parts, reducing the amount of memory that it needs to decode the file; and as tiles. In addition to color information, the image data may contain transparency or transflectance information for each pixel, or in the case of vector files, instructions for displaying objects, fills, or attributes such as shading.

Footers
Footers generally contain additional information about the format which wouldn't fit in the header, or in some cases, can't be determined until the file is written, for instance, the number of objects in the file. Footer information can help developers to maintain backwards compatibility as new versions of the software are released. 

Popular Web Formats

JPEG is a method of image compression devised by the Joint Photographic Experts Group, one of the working groups within the International Standards Organization.. Because of the ongoing turf wars among the members of the Standards Committee, JPEG is at this time actually more of a family of compression schemes than an actual file format. JPEG is a lossy type of compression, which means that it makes your image files smaller by actually throwing away a portion of the information that it finds in your picture. The result is not necessarily as bad as it sounds. As it turns out, the eye is much more sensitive to the contrast between two pixels than it is to absolute color differences. JPEG exploits this quirk of human vision by throwing away "unnecessary" color information while performing other processing tricks on your data to reduce the size of the file. Most JPEG compressors allow you adjust the amount of compression to suit your needs. You can make your graphics files very small with JPEG, but the resultant picture will usually be pretty bad because the program has to throw away so much information. Conversely, you can keep the quality of your image high, but it will mean that you'll have to put up with larger file sizes, which will adversely affect download times.

     The most common JPEG format used on the Internet is the JPEG File Interchange Format. JFIF is kind of a generic, bare bones flavor of JPEG without many of the features of some of the other schemes. Although some of the other versions of the JPEG format work better than straight JFIF, most of them are proprietary and not as widely supported. JFIF has become kind of the de-facto standard for JPEG files transmitted across the internet.

Because of the way that JPEG compresses files, it works better on some types of pictures than others. In general, JPEG works well on natural scenes with rich color palettes and elements that blend together smoothly. JPEG does not work nearly as well on images that contain large areas of a single color or sharp, high contrast edges, like lettering and line drawings.

GIFs
The Graphics Interchange Format was developed by CompuServe and designed to be a widely supported format for exchanging image files over the Internet. It is arguably the most popular image format on the Web, and has been enhanced over the years to the point where it now supports a number of extensions which are not available in JPEG. Even though the GIF format is only capable of manipulating a maximum of 256 colors, it is quite good at reproducing high contrast images with sharp edges or large blocks of uniform color. The GIF format is also capable of storing multiple images in a single file, which make it perfect for simple animation.

Transparent GIFs
GIF images also support transparency, which allows your image to appear as if it's been cut out and pasted over the background of your choice. By carefully choosing the background color for your image, you can instruct the computer to make the background of the image "transparent", which basically means that it turns off all the pixels of the color that you have chosen , allowing the background of your page to show through. It eliminates the problem of having to try and match or blend the background of your image to the background of your Web page, and gives a clean, professional look to your site. It must be applied judiciously, however, because not all computers will display it properly.

Motion

Animated GIFs
GIFs have recently become even more popular on the Web since the introduction of the extensions which allow them to be animated. Images created for an animated GIF may be imported from a drawing program or scanned photos and then manipulated in the animation program to produce a series of "cells" (kind of like drawing on flip cards). All of the images are stored as a single GIF file along with instructions for displaying them. Animated GIFs are fairly simple to make, and are a relatively efficient way of adding a little zip to your site.

MPEG
MPEG is a specification which was developed by the Motion Picture Experts Group, another of the working groups within the International Standards Organization. The MPEG format was originally developed to store sound and video on Compact Disks and Digital Audio Tapes. MPEG uses asymmetric compression methods, meaning in this case that it takes much longer to compress the MPEG data stream than it does to de-compress it. The MPEG format uses a combination of two types of compression to generate three types of video frames. Most MPEG formats do not store an entire bitmap for each video frame. Instead, they store key frames (which are actually called I frames) and then use complex algorithms and two additional types of frame files to predict and store only the parts of the picture that change between key frames. When the data stream is decoded, the video is not displayed in the order in which the frames were written, but reconstructed from the three types of frames which are stored in the file. There is also an MPEG 2, an enhanced version of MPEG which was designed to eventually form the core technology for the distribution of High Definition TeleVision.

AVI
The Audio/Visual Interleaved data format is a subset of the Resource Interchange File Format, kind of a Swiss Army Knife set of data structures designed by Microsoft to facilitate the storage and display of multimedia information through their Windows interface. Although AVI files are fairly popular, they must be preprocessed before they can be viewed on any computer which is not running Windows.

QuickTime
QuickTime is Apple's integrated multimedia storage and playback format. In addition to being a format, the QuickTime specification includes a collection of powerful routines, called the Movie Toolbox, which allow you to manipulate QuickTime movies in much the same way that you would use a word processor to change a letter (Cut, copy, paste, edit, etc.) . QuickTime is capable of storing multiple audio tracks which, for instance, would allow you to design a multimedia presentation in five different user selectable languages, or mix multiple sound and effects elements into a single track without leaving the QuickTime format. QuickTime can also be saved in a multi-platform interchange format, which allows it to be viewed by computers running other operating systems, such as Windows, without being pre-processed.

     The QuickTime Toolbox offers a choice of six compression schemes which are optimized for different types of content and are all supported as part of the specification, providing developers with a broad range of options. QuickTime decodes rapidly and yields picture and audio quality at least as good as programming which is taped on a VCR.

VRML
Virtual Reality Modeling Language is an object description language which is modeled after HTML. It was conceived in 1994 by Tim Berners-Lee (the inventor of the World Wide Web), brought to light at the first annual World Wide Web Convention in Geneva, and consequently developed by a huge international team of researchers. VRML uses a subset of the Open Inventor ASCII File Format (developed by the folks at Silicon Graphics) to provide a special VRML Viewer with a complete description of a 3-D scene, allowing the viewer to render polygonal objects, lighting, materials, ambient properties, rotation, scale, and realism effects. It was designed to be platform independent, extensible, and efficient over relatively low-bandwidth connections.

While VRML is capable of producing some spectacular graphic effects, VRML objects aren't limited to graphics. VRML can be used to model almost anything....textures, audio waveforms, even MIDI data. VRML also provides a way to achieve and manage location independence. This means that, theoretically, your home computer might eventually be capable of modeling even complex scenes in real time. Your computer would only need sufficient power to display the graphics primitives, while ten, or twenty, or a hundred high-speed servers calculated the primitives for you and shipped them across the Net. While the original release of VRML never really took off, faster processors and connection speeds, along with new developments in the technology have caused a renewed interest in the language. This is once again an emerging technology with exciting possibilities.

Flash