COMM 260 Lecture Synopsis Twelve

COMM 260, Principles of Internet Web-Based Design
Instructor: Ross Collins

Lecture Synopsis Twelve: Images and the web

Some web usability experts contend images on the web should be kept to a minimum for fast down load and easily accessibility. But web designers argue that photographs and graphics make a site more interesting and compelling in the highly competitive world of the web.

Digitally produced graphics are designed in two ways: bitmap and vector.

Bitmapped graphics, like a window screen, are based on thousands of pixels ("picture elements") in a grid pattern. They require more space and RAM memory, based on the need for the machine to keep track of thousands of them.
Vector graphics use a connect-the-dot approach; points are placed on edges of objects, and paths drawn from point to point, then filled with color.

Vector graphics are resolution-independent. That is, a graphic artist can make them larger or smaller without affecting image quality. Bitmapped graphics, resolution-dependent, will change in quality as the pixels are made larger and look like "jaggies." Nevertheless, bitmapped graphics are the web standard, supported by most browsers, while vector graphics on the web mostly are part of Flash animations (SWF or "swif" file format).

Most web designers use Photoshop software to manipulate graphics. Adobe ImageReady optimizes graphics for the web. Macromedia Flash is mainly for animation, but builds handy interactive web banners.

Three common file formats dominate web graphics:

GIF (Graphics Interchange Format)
JPEG (Joint Photographers Expert Group)
PNG (Portable Document Format)

GIF ("jif or "gif") is the oldest graphics format on the web, dating to the late 1980s. As a proprietary format owned by Compuserve (now owned by Unisys), users like Photoshop are required to pay a fee for the ability to save images as GIFs. Despite that, GIFs are most popular image format on the web. It relies on 8-bit "indexed color," or 256 total colors, and uses a "lossless" compression (LZW--Lempel-Zeb-Welch) to make documents smaller without losing data. GIFs are mostly used for images with "flat color," such as logos, menu bars, icons, cartoons or line art. Used for full-color photographs it may "dither" the colors not part of its palette, or try to recreate a color from the palette, sometimes degrading image quality.

GIF also supports simple animation, interlacing and transparency. File sizes are small.

JPG ("jaypeg") uses 24-bit color (256 x 256 x 256=16,777,216 colors) to better render continuous tone ("contone") color and black-and-white photos. "Bit depth," the amount of color information available, may be higher than a monitor (some monitors display only 8-bit color), although most monitors are 24-bit nowadays. JPG is a "lossy" format, meaning information is thrown out to compress the file, although you probably won't notice it unless you save it over and over after working in Photoshop. JPG files are generally larger than GIF files. Progressive JPGs are the equivalent of interlaced GIFs, but JPG doesn't offer transparency.

PNG ("ping") format was developed in 1995 as a way to avoid the proprietary GIF, although it still is not widely used on the net. It can save in 8- or 24-bit color, and also can adapt photos for the gamma (brightness) of a monitor. Photos saved on a Macintosh tend to look dark on a PC; photos saved on a PC tend to look washed out on a Mac.

Color theory
Color mixing systems can begin with all colors and subtract, or no color, and add. The subtractive system is used for printing. Inks act is filters, transmitting or absorbing light from white paper. Primary colors are Cyan, Magenta, Yellow and Black (CMYK). Television and the web rely on the additive system, beginning with no light (black screen) and adding to reach the desired color. Additive primaries are Red, Green and Blue (RGB).

Television and computer monitors project a different intensity of RGB from each "gun," 0-255, 256 total colors per gun. Combinations make any color; for instance, R=51, G=153, B=153 is turquoise. The web-safe color palette, 216 colors that will render accurately on any monitor/browser combination, is based on HTML hexadecimal color code, and not on the RGB numbers. Therefore RGB 255.255.255, or white, is #FFFFFF in hexadecimal. Many web sites offer hexadecimal code equivalents for colors.

Where to get images:

Clip art. On CD, on line, or scanned from clip art books. Free, but sometimes amateurish.
Stock agencies. Mostly on line. Maybe royalty-free (pay a flat fee) or licensed (pay depending on how image is used). Interesting possibilities include the Library of Congress and Corbis.
Your own digital or scanned photos. Many web designers collect a library of their own interesting textures and patterns.
Free-lance work. Artists and photographers will make images for you, if you have deeper pockets.
The mighty Google, click on Images. Careful about downloading if you're publishing a web site. An image may be copyrighted.

Do not download someone else's images from the net and use without asking permission. Remember: your web site is world-accessible. Someone will find out sooner or later, and possibly sue.