Contributed by Steve Buchanan
Digital Photo Advantage/Ruggeri Photography

Just as in print media, knowing the correct file format to use and how to set it up can make your work look a lot better, not to mention save you a lot of headaches. For the web there are two general file formats, JPEG and GIF. Each has its own advantages and characteristics.

Regardless of which file format used, images for the web are raster or bitmap based, not vector. Also CMYK files will not display properly so RGB is the rule. And finally, images on the web must be saved at 72 dpi, rather than the more common (in print) 300 dpi.

JPEG files use mathematical compression to decrease the file size of a raster image. JPEGs are able to display the full 24 bit (millions of colors) range of colors. This format works best for photographs and illustrations where tonality and color range is important. However, this capability can lead to relatively large files. Pro-JPEG compression enables you to select a level of compression. The higher the level, the smaller the file. But at a certain point the image will begin to degrade. Trial and error is really the only way to determine which level of compression is right for your images.

GIF files are image files with a reduced color range, thereby reducing the image file size. GIFs are capable of displaying up to 256 colors in an image. One thing to keep in mind is that Macs and PCs don't display the same standard 256 color palette. They only have 216 colors in common so when converting images for the web it is generally better to use a web safe cross-platform palette. (This is a choice in Photoshop's dialog box when exporting to GIF.)

You can choose to reduce the number of colors used in a GIF file even further. This can be useful when displaying graphics and designs which don't use the full range of colors. This "custom" palette will map the specific colors used in an image and limit the color palette to those colors. This has the advantage of further reducing the file size. One word of caution: when displaying more than one image on your page using a custom palette, this palette must be the same for all images. One way to accomplish this is to combine all of your images for each page into one Photoshop file, and convert that file to a custom palette. This will force the program to look at the colors in all of the images when building the palette. It will result in a larger palette and larger files but will guarantee they display properly on all browsers.

There are several software applications on the market that will allow you to convert files to web compatible files. The best known is Adobe Photoshop which can read from almost any file format and save to both GIF and JPEG. Adobe ImageReady, with an interface very similar to Photoshop's, is a new application specifically designed to convert and reduce image files for the web. It does a much better job of previewing and comparing the different levels and methods of compression. It also displays the true file size of each image, unlike the Mac's Get Info window which includes both resource and system data in its file size report, thereby inflating the file size. Other software available includes Macromedia Fireworks and DeBabelizer as well as other shareware and freeware programs.

Of course if you still aren't happy with the results after playing with compression and color palettes you can always reduce the actual dimensions (pixel size) of the image. With a little work on the design end your graphics can look great and still download relatively quickly.