Picture This...... part one

     Everyone likes pictures. What they don't like is... waiting to look at them. The web is a wonderful medium for expression. In building your pages, you can add photo quality images, clip art, 3-D graphics, animation and more to set an appropriate "scene for your story". The hard part is selecting the right graphic types and maintaining that ever present "balance" in your content.

JPEG AND GIF FILE FORMATS

There are essentially two main graphic formats in use on the web today. These are GIF (Graphic Interchange Format) and JPEG (Joint Photographic Experts Group) files. Each file format has its own benefits and limitations. GIF files are limited to a maximum of 256 colors and are best suited to images with little or no variation in shades or hues of the same color (such as clip art or vector graphics). GIF files will give you good results if you want to display flat images or illustrations that do not require high detail. While the image quality may be lower, GIFs allow you to do a few things that are currently not possible with JPEGs. You can create simple animation's by "linking" (not to be confused with a hyper link) several GIF images together within a single file. In the example below, four image "cells" were linked together to make the animated tugboat.

Tugboat Animation	The four individual cells that make up the animation to the left.

     There are a number of commercial and shareware utilities available that will help you create your own animated GIFs. Another unique feature of the GIF format is its ability to assign a layer of transparency within the image. What this means is that you can have a square picture of a beach ball that includes a transparent background. When displayed within a browser, all you'll see is the ball (no square frame or picture background). Notice in the example, the original letter "A" graphic has a white background that contrasts starkly with the textured background of our "simulated web page". The middle image shows the still existing boundaries of the graphic with a transparent layer employed. The image to the far right shows how the same letter blends seamlessly against the textured background as a transparent GIF. Finally, you can save GIF files in interlaced format. This gives your viewers the illusion of faster loading graphics by displaying a "preliminary" image of lower quality on the screen and gradually improving the picture by going over it again and again until it is finally at its intended resolution.

     In comparison, the JPEG file format was designed with photographic imagery in mind. JPEGs are capable of up to 16 million colors and produce sharp, high resolution images (depending on your monitors display capability). JPEG files are capable of displaying subtle variations in shading and hue with remarkable quality. If image detail is important to you, consider using the JPEG format. One additional advantage that the JPEG format has over the GIF is its ability to vary compression of the file. This is discussed next.

FILE COMPRESSION

     Now that you are familiar with the two most common graphic formats, it is important to understand the compression characteristics of each. Compressing your graphics is absolutely essential to good web design. The most immediate effect is a reduction in download time. A fast loading page is one of the best ways to ensure that your visitors will stick around to see what you have to say (for a little while anyway).

     GIF files compress horizontally. What this means is that a GIF file with very little pixel color variation horizontally will compress more

1.3K   2.1K

efficiently to a smaller size. The more frequently pixel colors change on each horizontal line of the GIF, the less compression that you can get out of the image. Notice in the example to the left, each GIF image looks relatively similar to the other with the exception of the direction in which the stripes are running. The image with the horizontal stripes compresses to nearly 50% smaller than it's vertically oriented partner. Single or flat color objects like clip art and line drawings compress quite nicely and are best suited to the GIF format.

     JPEG compression differs significantly. Unlike GIF files, the JPEG uses what is often called "lossy" compression. What this means is that the further you compress a JPEG image, the more image data you will "lose". As a JPEG is compressed, the process looks for similar shades or hues of a color and combines them to form a similar (but larger) "block" of color. The more

Uncompressed   Highly Compressed

you subject your image to the compression algorithm, the more unique colors that it will discard (and the more likely you are to start seeing "artifacts" in your picture - small block like distortions in the image). The example to the right shows a greatly enlarged segment of a JPEG image uncompressed on the left and highly compressed on the right (to 20% of it's original size). Notice the artifacts and the blending of the colors that degrade the clarity of the image as it is compressed. The good news is, depending on the size and resolution of the image, it is possible to achieve as much as a 40-60% reduction in file size while maintaining an acceptable level of image quality. It is up to you to decide what is acceptable for your purposes. In the second part of this tutorial, we'll take a look at how you can use different graphic techniques effectively in your web design.

[Page 2] [Next Article]