Web Image Editing
Do Choosy Mothers Really Choose GIF's?

This aspect of design is in some ways much simpler than it would seem, provided you have access to the right tools. It also has a very significant impact on the impression your pages create, as casual browsers are a lot more tuned into the overall look and feel of things than the text content and details of quality graphic design.

The two primary concerns when planning and designing web graphics are file size and color rendering. We're not going to get in-depth here (check out our recommended links instead) but in a nutshell, the trick is to choose the file type that will keep file sizes small while maintaining image quality.

File Types

There are three common file types used for images on the web: GIF (Graphics Interchange Format), JPEG (Joint Photographic Experts Group), and PNG (Portable Network Graphics).

The Practical Basics:

GIF
Especially suited to solid blocks of color in logos and other graphic elements. GIF's allow transparency, animation, and excellent compression of file sizes provided the palette is in a web-safe color range. Not well suited to photos or complex gradients, as the "dithering" of the 256 colors used in GIF's will create splotchy or spotty images when used for these sorts of images.

JPEG
Especially suited to photographs, JPEG's can display over 16 million colors. JPEG's don't support transparency or animation. When compressed intelligently and with the right software, an excellent balance between file size and image quality can be achieved. If poorly compressed, images will look scrunchy or rippled at the edges of contrasting colors or bright and dark areas.

PNG
Originally designed as a replacement for GIF's to battle some "copyfight" issues, PNG's also utilize a 256 color palette, but achieve better compression, better gamma correction (cross-platform rendering of image brightness), and more sophisticated transparency. They do not support multiple-image animation. Unfortunately, Microsoft seems to have no interest in supporting PNG's in Internet Explorer, so their best features are slow to gain recognition. Most of these features work in FireFox, Safari, and other browsers, however.

The Tools
There's More To Life Than Photoshop

For web imaging there are several tools that are actually a lot more productivity-oriented than Photoshop, which of course remains the pervasive and obviously sophisticated choice for advanced image editing.

Ulead PhotoImpact
Especially if you opt to not install some of its consumer-oriented features like album-creation and photo sharing, PhotoImpact presents a streamlined and relatively intuitive interface that makes for quick editing of existing files for the web. It also has a very adequate set of features for new image creation, including 3D objects and text, but is not especially suited to print graphics. It is usually available for under 100USD.

Macromedia Fireworks
As well as plugging in nicely with Dreamweaver, Fireworks provides excellent compression results, works nicely when "image-slicing", and has a very intuitive interface as well.