Five Image-Editing Programs to Polish Your Web Site

Just as you wouldn't paint your house without the proper assortment of brushes, rollers, and dropcloths, you shouldn't add images and graphics to your organization's Web site without a few design essentials. One of the most invaluable tools in making your site look professional and polished? Image-editing software, which can help you crop, resize, and enhance graphics and images, optimizing the visual -- and emotional -- impact of your site.

The many image-editing software packages out there can make choosing one overwhelming. To help you select the software best suited for your organization's Web needs, TechSoup compared the features of five popular commercial and free image-editing applications, ranging from free downloadable utilities to full-featured software used by professional graphic designers.

• Adobe Photoshop CS2
  $60 from TechSoup Stock, $649 new; runs on Windows 2000/XP and Mac OS X
• Corel Paint Shop Pro X
  $99 per license, nonprofit discounts available ; runs on Windows 2000/XP
• FastStone Image Viewer 2.4
  Free; runs on Windows 98/Me/NT/2000/XP
• GIMP (GNU Image Manipulation Program) 2
  Free, open-source (requires GTK Runtime environment ); runs on Windows 98/Me/NT/2000/XP, Mac OS X, and Linux.
• IrfanView 3
  Free; runs on Windows 95/98/Me/NT/2000/XP

If you're simply converting a batch of image files from one format to another, a free application might get the job done just fine, whereas more advanced adjustments may require a professional-grade tool. To help you identify which image-editing features you need, we've listed some of the typical tasks you might perform in the course of adding graphics to your Web site, including converting, resizing, cropping, enhancing, batch processing, optimizing, and even creating images. Read on to find out which of the applications we surveyed best suits your particular requirements. (Please note: this article isn't a full-fledged review, but rather a comparison of some of the more common features found in image-editing programs.)

File Conversion

Each of the five applications we surveyed convert images to JPEG, GIF, and PNG formats (the three most popular image types used on the Web) and openmany other filetypes as well. The number of output-conversion formats varies between applications, however: Corel's Paint Shop Pro, for instance, saves images in nearly 40 formats (including lesser-used ones such as EPS and RLE), while FastStone Image Viewer will output to just 15 file types.

Resizing

When it comes to resizing images, all five programs are quite flexible and fairly standard, allowing you to make an image larger or smaller by manually adjusting the dimensions (either by percentage or in units), or by scaling the image with your mouse. Each editing package also provides multiple filters for resampling, the process of adding or removing pixels to optimize the quality of the resized image. (For more on image quality, see Optimizing for the Web, below.)

Cropping

One way to zero in on the most important section of an image is to cut away the rest. To do this quickly, you'll want a cropping tool.

The cropping tools found in each of the applications we surveyed are fairly similar. Each allows you to select the area you wish to crop with your mouse or by entering the dimensions manually. If you need a finer degree of control, Photoshop and Paint Shop Pro may be your best bets.For example,Photoshop lets you to rotate the crop box so you can straighten a crooked photo as you crop it, and Paint Shop Pro allows you to pinpoint the placement of a crop by entering its coordinates.

Cosmetic Enhancements

In the course of building or updating a Web site, you're bound to run across photos or graphics with noticeable imperfections, such as an undesirable color balance, noise, or a poor level of contrast. As such, you'll want your editing package to have at least a few features for fixing cosmetic flaws.

Each of the packages we looked at offers an assortment of image-enhancement tools, but someare more extensive and automated than others. Below is a basic overview of common image-correction features and how each application addresses them.

Color Correction

IrfanView and FastStone Image Viewer both offer simple color-correction tools that let you adjust the image's overall levels of red, green, and blue (aka RGB channels), the three primary colors used in Web design. Both of these applications also provide tools for tweaking color saturation and lightness.

If, on the other hand, you intend to make detailed color adjustments, one of the other, more full-featured programs would be a better option. Both Photoshop and GIMP allow for a greater degree of color control by letting you adjust the RGB levels for an image's shadows, midtones, and highlights. These two programs, along with Paint Shop Pro, also include features that allow you to tweak the saturation and lightness of individual colors. And Photoshop and Paint Shop Pro both boast automated color-correction features -- handy if you don't have the time or patience to manually adjust flaws.

Brightness and Contrast

All of the applications we surveyed provide at least rudimentary brightness- and contrast-adjustment tools, but again, the more advanced packages feature a deeper level of customization. For example, rather than providing a single brightness-adjustment tool, Paint Shop Pro and Photoshop let you lighten or darken a photo by specifying thevalues of shadows and highlights. Image Viewer, IrfanView, and GIMP offer a brightness and contrast slider, but, unlike the other two, won’t let you makedetailed adjustments.

Sharpness

FastStone Image Viewer, GIMP, and IrfanView all take a fairly basic approach to correcting sharpness issues. FastStone and GIMP both provide a slider for altering sharpness, although the latter lets you fine-tune sharpness on a scale of 1 to 100. By contrast IrfanView can only apply sharpness automatically and won’t allow you to tweak the intensity of the effect.

Photoshop and Paint Shop Pro, on the other hand, include filters for both automating and manually adjusting an image's sharpness. Photoshop provides several one-click sharpening tools, as well as a mode that lets you adjust sharpness and blurriness levels. Similarly, Paint Shop Pro offers both an automatic sharpness tool and a high-pass filter that allows you to adjust the radius and strength of the effect and choose from three different blending styles.

Noise Removal

Digital photos are commonly affected by a phenomenon known as "noise," small pixel aberrations that result in reduced image quality. As such, many image-editing suites have begun including noise-removal options. However, these more sophisticated features aren't available in free programs like FastStone, IrfanView, or GIMP (although this tutorial explains how to remove noise using GIMP's selective Gaussian blur filter).

If noise-removal capabilities are on your short list of must-have features, you'll want to consider Paint Shop Pro, Photoshop, or another high-end image-editing suite. Photoshop's noise-removal tool has a number of advanced options, including those for removing JPEG artifacts and reducing noise on individual RGB color channels. Paint Shop Pro provides an automatic noise-removal option as well as separate tools for combating JPEG artifacts and moiré patterns, a crisscross pattern often found in scanned images.

Batch Processing

The ability to make changes to many files at once -- such as transforming hundreds of larger images to a standard thumbnail size in a single step -- can save you a great deal of time and labor. If you expect to work with large volumes of images, it's important to select an editing program that can automate the tasks you'll be performing frequently.

IrfanView handles two of the most standard batch processes: renaming and converting files to another format. FastStone Image Viewer takes things a bit further, allowing you to make different combinations of fixes to a batch of files. Besides converting and renaming files, FastStone will rotate, resize, watermark, and crop images in bulk mode. Additionally, the utility can automate jobs like simple color, contrast, and brightness correction.

Unlike IrfanView and FastStone, GIMP lacks a built-in batch-processing tool, though savvier users can work with multiple files by running a script from the command line (see this tutorial for instructions). It's also worth noting that you can find plug-ins that allow GIMP to batch process files in a more user-friendly manner.

Photoshop and Paint Shop Pro have the most robust batch-processing features of the bunch, allowing you to apply any customizable combination of edits to images in bulk. Although both applications come with a few built-in batch presets, they also allow you to record your own Actions (Photoshop) or Scripts (Paint Shop Pro) to automate frequently used editing tasks. You could use either program, for example, to create a batch process that would resize a group of images to 120 by 90 pixels, rotate them all 180 degrees, and apply a sepia tone or other artistic effect.

Optimizing for the Web

High-quality digital imagestend tobe quite large, using up precious space on your nonprofit's servers and resulting in poky load times for users trying to access your Web site from modem-based Internet connections. To avoid this, you'll want to optimize your images, the process of maximizing quality while reducing size. The applications we surveyed offer a range of optimization tools that let you compress images, decrease colors, or even slice up graphics.

Compression and Color Reduction

FastStone will only compress images in JPEG format by decreasing the quality of the image on a scale from 1 to 100. By contrast, both IrfanView and GIMP can compress both JPEGs (on a scale of 1 to 100) and PNGs (on a scale of 1 to 10). Also, if you're outputting an image as a GIF in GIMP or IrfanView, you can save it in interlaced mode, which may help the file load quicker on slow Internet connections. While all three of these programs will let you reduce an image's color depth to further minimize its size, none offer a preview of your new graphic or its file size before you actually save it.

Paint Shop Pro offers dedicated tools for JPEG, GIF, and PNG optimization, all of which come with the assistance of a wizard that walks you through each step of the process. These features are generally more in-depth than those found in their free counterparts, helpfully letting you preview the optimized image, its file size, and its estimated download time on different types of Internet connections. Besides offering JPEG compression on a scale of 1 to 100, Paint Shop Pro gives you a good deal of control when optimizing PNG and GIF files. For example, you can decrease the amount of colors found in both PNGs and GIFs, then apply dithering, an effect that makes the reduced images look more natural by blending the transitions between two edges. Paint Shop Pro can also add transparency to exported GIFs or PNGs, giving you another way to make your files smaller.

Photoshop comes with Adobe's Image Ready, an application designed for preparing and optimizing Web images (although the same features are available in Photoshop itself). Much like Paint Shop Pro, Photoshop allows for fine-tuned optimization, but it takes the preview aspect a step further by letting you compare up to four different Web-ready images at once. Image Ready and Photoshop provide compression for JPEGs, as well as transparency, color-reduction, and dithering options for GIFs and PNGs. You'll also find a few preset optimization schemes for each image format.

Slicing Images

Slicing images into multiple segments can make them even more Web-friendly, allowing you to save different parts of a file in different formats or apply heavier compression to areas with less detail.

Neither IrfanView nor FastStone offer image-slicing features. And while GIMP doesn't offer tools to cut up images, this tutorial describes how to slice images in GIMP using a workaround method.

Paint Shop Pro and Photoshop, on the other hand, both provide dedicated tools for manually dicing up images, though less-experienced designers might appreciate Paint Shop Pro's built-in feature that automatically generates a grid of slices with just a few clicks. Both of these editing suites allow you to optimize individual slices according to their format, and to add perks like hyperlinks, alt text, and image rollovers to individual sections. Handily enough, Photoshop and Paint Shop Pro can then generate the HTML code for the sliced and enhanced image, so you can just drop it into your Web page.

Creating Graphics from Scratch

If your organization's site is seeing a spike in traffic, you might want to spruce it up even more with elements such as navigation buttons or header graphics. If you think you'll eventually need this kind of functionality, you'll want to choose a solution that can also create graphics and images. As FastStone Image View and IrfanView are primarily applications for browsing and editing images, they won't be of use when it comes to actually designing images.

By contrast, GIMP, Photoshop, and Paint Shop Pro can create new files and all offer tools for making and editing your own graphics. Adobe Illustrator , avector-based drawing program,is another option to consider for creating graphics. All of these programs support layers, allowing you to create a separate background, then add other images and text on top of it. These applications also offer a number of illustration implements, such as paintbrushes, pens, pencils, and different color palettes. Photoshop and Paint Shop Pro even let you customize certain drawing tools. For example, when working with the paintbrush tool, you can change its size, hardness, and opacity.

Evaluating Your Options

Hopefully, the process of examining various image-editing features in light of your organization's needs will help you narrow down the possible choices to one or two applications. From there, your next step is to take them for a test drive. Fortunately, all the programs we surveyed have downloadable trial versions, so you can try them on for size and make a decision based on your own experiences. With a little time and practice, these applications will help you brave the elements, breathe some life into your site, and keep your visitors engaged and coming back for more.