TAPESTRY: The Art of Representation and Abstraction
The Web: Graphics
What's it all About?
On the web the single most important commodity is time. There are all sorts of consequences of this fact. For instance, most browsers will store, or cache (please note the spelling, it's a French word for "storage place") downloaded documents. This allows the documents to be retrieved much more quickly the second time. Knowledgable web designers take advantage of this characteristic by reusing graphic components, not just to provide visual uniformity to a series of pages, but to save download time.Download time, of course, relates to how much content there is in the file(s) being downloaded. Web graphics (which are almost invariably raster) are squeezed, bled, and trimmed in a variety of ways to make them as small as possible.
The most effective "diet" depends on what the graphic is intended to convey, and the amount of degradation that the host webmaster is willing to tolerate in the name of speedy downloads. "How is that?" you might ask.
THE ISSUES
Compression and Decompression: Symmetrical or Not?
Most images contain vast amounts of exactly or nearly identical information. Computer scientists and mathematicians have developed a number of ways of squeezing out the "extra" information, leaving only the "essential" parts. These are called compression schemes, and they fall into two generic types, distinguished by what you get back if you compress and then decompress an image: lossless compression in which the original image is exactly reproduced, and lossy compression in which the decompressed image isn't quite the same as the original. Nine out of ten viewers might not be able to tell the difference, but the image isn't quite the same.Content
Images which we might characterize as "drawings" are generally composed of pure colors in specific patterns over a uniform background. Contrast that with "photographic" images, which are composed of widely varying colors over a variable background. These two different kinds of images may (and do) respond differently to different compression schemes.Transparency
Not all images are rectangular. However, ALL web graphics are rectangular. The key to creating apparently irregular graphics is the assignment of a "transparent color" to those pixels of the image which are to be see-through.Interlacing
If people are going to have to wait while your graphic is downloaded, it might at least be entertaining if the rough outlines of the graphic could appear first, followed by the detail. This is generally called interlacing.Color Palette
Raster images and displays are both characterized, in part, by the number of bits per pixel which they use. Different computer hardware and additional memory is required for display of more colorful images. Thus, not all computers can display the same number of colors. An "8-bit system" displays at most 256 unique colors. A "24-bit" system can color each pixel with one of 16.7 million unique colors.In addition, some colors are reserved for the operating system itself and cannot be used by the program.
By comparing the operating system and software ideosyncracies of Netscape and Internet Explorer, on both Macs and PCs, web designers have been able to identify 216 colors which should appear the same on both platforms (aside from gamma considerations). This collection is known as the 216 color palette.
Dithering
What happens when the image needs colors that the hardware cannot display? The browser attempts to approximate the color by placing available colors next to each other, a process known as dithering. Dithered images can look ok, but the results are often NOT what the designer wishes.Gamma
Different computer systems display the color "white" in slightly different ways. Lighting experts would say they have different "temperatures". Computer monitor makers describe this difference as a different in gamma. The Macintosh and PC universes are different in that the standard gamma on a Windows PC is a little lower (or darker) than a Macintosh. For this reason, inexperienced web authors often create images which look great on a Mac, but appear "dark and muddy" on a PC.A TALE OF TWO FORMATS
There are MANY file formats in the world for storing graphics. They are different in the ways they store pixel data, how the colors are defined, and how image redundancies are eliminated in order to reduce the file size, or compress the file. The two most common at this time are
GIF
The name stands for Graphics Interchange Format (I think). It was pioneered by CompuServe in the dark ages of web, about 10 or 15 years ago. It is a lossless compression scheme, but is limited to 256 (8-bit) color, so you've got to throw away a lot of color information before you achieve that losslessness. GIF images may be interlaced, and can have a transparent color specified. There is no provision for adjusting gamma.
JPG or JPEG
The name stands for "Joint Photographic Experts ......(something)". This is a lossy compression scheme that should generally NOT be used on drawings, but works well for images. There is a not-very-popular standard for progressive (interlaced) jpeg images, but there is no provision for a transparent color, or for gamma correction.
CONCLUSIONS
Use GIF for graphics that need transparency, interlacing, or consist of drawing content. Use JPG for graphics that consist of scanned or synthetic images.Last updated: April, 2014
