Computer Advice on Website Graphics and Images for the Internet, Learn about Website Graphic design.

While adding text to web pages is straightforward—just a matter of typing it in with a product like Macromedia Contribute or Dreamweaver—users will want to add photographs, charts, or logos too. This isn't quite so simple. But here are some useful tips for users that will help them add images to their website without wreaking visual havoc.

It's a cliché that "a picture is worth a thousand words" but on the web images do require much more downloading time than text. A small 6K image is equivalent to a thousand words, so site contributors should use images sparingly or else risk annoying and alienating readers as they wait for those images to download.

Joe Gillespie http://www.wpdfd.com/ a contributor fro the UK

Luckily, there are ways to minimize the file sizes of web graphics. Just like flat-pack furniture or a can of condensed soup, images can be "compressed" so that they're small while in transit yet are "reconstituted" to their original state (or very nearly so) when they appear in the browser.

To compress an image file, it just needs to be saved in the appropriate file format; the browser does the rest. There are two main file formats that do this, especially for web graphics; the correct one to use depends on the image.

Before compressing an image, however, you should resize it in an image-editing program so that it's at the final size that it will appear on the web page. It's not a good idea to let the browser scale images because this compromises file size and slows down the page's display. The original image should always start out larger than needed before you reduce it. Enlarging a too-small image never gives good results because the detail is just not there to begin with and can't be generated.

Adding photographs with the JPEG format
Placing a photograph on a page requires finding something suitable from a stock photo library. Otherwise you need to scan an existing transparency or print, or take the photo with a digital camera. The original image may have been saved with any number of file formats (TIFF, PNG, PSD), depending on your camera and software. The best file format to use for photographs on the web is JPEG ("jay peg"), which has the file extension .jpg. The way that the JPEG format compresses files is quite complicated, but all you need to worry about is the fact that you trade off image quality for smaller file sizes. The JPEG format is a "lossy" format, which means that some image quality is always lost in the process of compressing the image's file size.

A high-quality JPEG image has a large file size; a low-quality JPEG has a small size. Somewhere between these extremes lies an optimal file size that looks virtually indistinguishable from the original. You have to judge this point by eye. You usually preview the image's quality in your image editing program and make adjustments with a slider control. As the file size and quality lessen, unsightly blemishes ("compression artifacts") appear in areas of flat color and around edges of objects. When these nasties start to appear, back off on the compression a little. When there is little or no trace of compression artifacts, you've reached the compression limit without compromising visual quality.

Here are some examples of what I'm talking about:

This file from a Photo-CD was originally about 62K. With a medium amount of compression, I reduced the size to a more manageable 15K. There is an imperceptible loss of quality.

This version is more highly compressed at 6.5K but the loss of quality is evident, especially around the edges of the clouds.

At maximum compression, the file size is about 5K but the quality is very poor. Considering that it's only about 1.5K smaller than the previous image, you can see how you have to balance file size and quality just right.

After you find the ideal compression size for your photos, be sure to keep a copy of the original, uncompressed file at hand in the editing program's native file format. If you ever resize or resave a JPEG file, you will add more "loss" each time, which will make the image look worse—and probably increase the file size too.

Adding flat-color images with the GIF format
For logos or other images that contains mostly flat, non-gradating colors (no shading, for instance), you're best off using the GIF (.gif) format. (Some people pronounce GIF as "jiff" but it stands for Graphic Image Format so the G should have a hard sound, as in "graphic.") The GIF format is not suitable for photographic images or illustrations with many subtle color blends. In fact, the fewer individual colors in the image, the smaller your GIF will be.

Let me show you what I mean. When saved in GIF format at a comparable file size to the optimal JPEG image, this shot shows how the image is "posterized" into areas of flat color; subtle gradations are completely lost:

To minimize this banding, you either have to save the file at a much higher color-depth or else switch on "dithering," which means simulating gradations with patterns of dots of colors already present. This image is not only larger than its JPEG equivalent, but it looks worse.

Here's how GIFs work. Instead of remembering the color of every single pixel in an image, the GIF format simply counts the number of pixels of the same color in any row. Consider, in the real world, how more efficient it is to say "there are 12 red pencils, 5 blue pencils, and 1 yellow pencil in this box" than it is to say "this is a red pencil, this is a red pencil, this is a red pencil..." etc. Essentially, GIFs count the "runs" of a single color, substituting just the total count for the individual pixel values. This is much more efficient—and compact—than JPEG compression.

The decision you have to make with GIFs is this: "How few colors can I get away with?" If you scan a blue logo on a white background and resize it to fit comfortably in the available space on the web page, you have to select a color depth (or bit depth) for the image. This determines how many colors are used to display the picture. The smallest color depth possible is two colors—a foreground color and a background color—but this will pixelate the logo, giving it hard, jagged edges. With four colors, edges start to look better but they're still a little jaggy. Eight colors make them look reasonably smooth. Using more than eight colors for a single-color logo is unlikely to improve the image quality perceptibly and only increases the file size unnecessarily.

What's happening here is that the image is blending smoothly from the blue foreground to the white background using a number of intermediate tones of blue. Eight tonal steps are usually sufficient but if the logo has more than one color, it's a good idea to allow for an equal number of steps for the other colors too. The maximum number of colors that a GIF image can handle is 256—but a 256-color image has a much bigger file size than one with only 8.

Time for another example. The following Jasmine logo examples show the effect of reducing the number of colors in an image. Although the lettering is only a single color with a smooth edge, the logo includes a colorful parrot with subtly gradated colors. It's vital to reproduce the flat-color lettering and retain the subtle colors in the bird:

This 256-color GIF reproduces the image very well but the file size is 4.4K.

Dropping back to 128 colors makes little visible difference but gives a smaller file size of 3.62K.

At 64 colors, the image is still perfectly acceptable and the file size has lowered to 2.87K. This is probably the best we can do with this particular logo.

With 32 colors, at 2.37K, the subtle color blending in the upper wing has separated into three distinct areas.

Further reduction to 16 colors reduces the subtleties even further. If you find this flattening acceptable, this may still an acceptable representation of the logo—and the file size is now only 1.94K.

Even with only eight colors (1.5K), the parrot is recognizable. Note also that the lettering hasn't suffered at all. There are enough colors to provide a smooth edge.

Reduced to only four colors, the file size is now only 1.14K but the parrot is now very basic and the lettering takes on a nasty jagged look because there aren't enough colors to blend it into the background smoothly. Note that we've lost the yellow in the image.

Obviously, two colors are not enough to reproduce this image and the 0.76K file size is ridiculously low. You can only use two colors for simple rectangles.

Saving the logo as a JPEG of similar size to the optimal GIF (2.54K) shows how inappropriate the JPEG format is for this kind of image. JPEGs don't handle flat colors well.

Making a GIF color transparent
One thing that you can do with GIFs, and not JPEGs, is designate one of the colors as transparent. A transparent color allows the background to show through. This is very useful if the web page has a textured or patterned background. Some care is needed here, however, because if the original image sits on a white background and is then stuck on a web page that has a blue background, it won't look right. Since the intermediate tones along the edge of the lettering change gradually to white instead of blue, you end up with a white halo around the type.

For this to work correctly, you should first place the image in the image-editing program on its intended final web page background color and then make that background color transparent. If the background is a texture or pattern, the dominant or "average" color can be used.

Here's what I mean:

Making the white background in this logo transparent (left) and then putting the image on a blue background won't work. As the soft edges of the image graduate to white, they cause a halo on a blue background (right).

Here the original image was on a blue background that I made transparent in the image-editing program (left), giving the correct edge-blending, called "anti-aliasing" (right).

Keeping file sizes (and page sizes) low
Having established that you should keep individual graphic files as small as possible, it follows that the number of them present on a page is also an issue. If you reduce the file size of a photograph to 10K but then place 10 of them on a single web page, the total page size will swell to over 100K, which could pose a problem unless your site's visitors all have broadband connections.

Under optimal conditions, which are actually pretty rare, a 100K web page takes about 15–20 seconds to download in the browser using a typical 56 kbps dial-up modem—which is way too long. When pages take longer than about 10 seconds to load, people lose interest fast and go elsewhere. A maximum page size, including all text and images, should be in the region of 50K (downloadable within 7–10 seconds at 56 kbps). Less is better.

Testing the loading times of web pages on your own machine or over the local network is never going to give you realistic results. It's what the web surfer sees on his or her end that counts. Before any new page goes live, view them from a laptop or home computer that's linked to the web with an ordinary modem. Then what you see is truly what you'll get.

About the author
Joe Gillespie is a new media consultant based in London. Since 1996 he has published Web Page Design for Designers, a site dedicated to the more creative aspects of web design. He also designs screen fonts for web designers, such as the classic MINI 7.

Graphics for the web - a special Internet art