Preparing an image for the Web site involves four steps.

• Editing the image as desired.
• Cropping the image to the shape required by the ultimate dimensions.
• Resizing the image to the actual dimensions.
• Saving the image in the preferred format with appropriate quality settings.

It is always best to start with the highest-quality, largest image available, usually the original photo out of a camera. The better the starting image, the more data a software program will have to work with and the better the resulting image will be.

Editing the Image

If the image needs to be edited artistically or for enhancement, it is usually better to perform these edits prior to cropping, resizing, and saving. There are two exceptions to this rule:

• If special effects are needed, these may look better if applied to the final image in its actual size rather than to the original image. Sometimes effects do not shrink down well.
• If text is to be added, sizing an image down will often produce rough characters. It is much better to apply the text last, to the image in its final size, because good software (such as Adobe products) will rasterize and anti-alias the fonts at the actual resolution.

Cropping the Image

Cropping an image is the process of removing portions of the image that are not desired in the ultimate image. Cropping preserves an interior space while removing edges all around.

Cropping is usually accomplished by selecting a crop tool, dragging out a rectangle over the image that approximately covers the desired interior space, and invoking the crop operation to remove the exterior space. Most basic crop tools allow a rectangle of arbitrary dimensions.

For the Web site, the initial crop should be done in a way that leaves an image that is exactly proportional to the desired image. For example, if the target image will be 120 pixels wide and 150 pixels tall, the initial crop should be in the ratio of 120:150 (4:5). In other words, the resulting image does not have to be exactly 120x150 at this stage. It might be 240x300 or 2400x3000 - anything in the 4:5 ratio for this example. This ratio is called the aspect ratio.

Most image editing programs have a crop tool that can crop to a specific aspect ratio. The image below shows the toolbar in Adobe Photoshop Elements 6 that allows such settings. Other programs have similar capabilities.

Note that this setting has absolutely nothing to do with the actual size of the image that will result. This setting only controls the ratio. Here the values used were the ultimate image size because that was convenient, but any numbers in the same ratio (4:5, 8:10, 12:15, etc.) would have given precisely the same result.

Resizing the Image

Once the image is in the proper shape (aspect ratio), it is necessary to resize the image to the exact pixel dimensions. Most image editing programs have such a feature although a few simpler ones do not - they can only resize to certain specific dimensions that relate to typical, printed photo sizes. Here is the resize dialog from Adobe Photoshop Elements 6 (almost identical in newer versions).

There are three items of interest on this and dialogs similar to it in other programs. They are indicated by the yellow numbers and the red bounding boxes.

First, there is a checkbox at the bottom called "Constrain Proportions." This is called "Maintain Aspect Ratio" or something similar in other programs. It is important to make sure this is selected because it helps the program do most of the work for you. In this case the box is checked, which makes the bracket with the chain appear in item 2. The bracket is an indicator that the two dimensions are "linked."

Item 2 is where the new dimensions of the image are entered. Because proportions are constrained in this example, it is only necessary to enter one of the new dimensions. The other one will be automatically calculated. In this example the ratio of 946:1182 happens to be 4:5, so if 120 is entered into the width field the height field will calculate 150.

Finally, item 3 establishes the resolution for the resized image. For Web images 72ppi or 96ppi are the right choices. Setting this number higher will not improve the quality of the displayed image on the Web site; it will just make it larger and thus take longer for the browser to load.

Notice that this dialog presents several units of measure, in this case inches and pixels. It is important to make sure the units are set to pixels. Photoshop Elements displays both units of measure in its dialog but other programs present differently.

Saving the Image

The last step is saving the image. Most software provides the "Save As" option and this is the one you should choose. Select the desired format (JPEG most often) and a file name. Be sure to choose a filename different from the original image so that the original is preserved. Depending on the format, the program will present options that relate to quality or special characteristics of that format. Usually the program will display a preview of the resulting image so that the settings for quality can be seen prior to saving.

For JPEG images, choose the lowest quality that gives the result you are seeking. JPEG quality is usually indicated on a scale of 1 to 100% and the quality determines how big the resulting file will be. JPEG is such a good compression scheme that it is sometimes very hard to tell the difference between an image at 90% and the same image at 50%. Therefore, it makes no sense to use the 90% setting when the lower quality setting will result in a dramatically smaller file.

Smaller files are desirable on the Web because they load faster in the browser. When quality is the most important consideration, size can be ignored.

Saving the Image with Adobe Software Products

If you are using an Adobe product such as Photoshop Elements or Photoshop, the resizing and saving operations can be performed in one step called "Save for Web." Adobe's Save for Web is extremely sophisticated and produces the best results of any photo editing this author has used.

The Save for Web operation combines resizing and saving into a single dialog. Use the editor to get the image into the desired aspect ratio, then use Save for Web. The first step is to set the new dimensions and click the "Apply" button. You will immediately see a preview of the resized image. Then select the format and apply any quality settings that format offers. You will see an approximation of the quality settings in the preview. Once you are satisfied, click the "Save" button and follow the prompts.

Choosing Filenames for the Web Site

When saving files for use on the Web site, use meaningful filenames that follow these rules:

• All lowercase letters.
• Contains only letters, numbers, the underscore (_) and the dash (-). Periods (.) can also be used but can sometimes be confusing; they are not recommended except to separate the filename from the file extension.
• DOES NOT contain any spaces.
• Long enough to be unique without being overly wordy.

The use of underscores and/or dashes makes the name more readable. They are the substitutes for spaces. All-lowercase filenames are optional but recommended.

And that's it! Once you've done this a few times it will become second nature and your Web images will be the better for it.

Photo/Image Editing Software

This is a quick summary of available image editing software that can perform most of the tasks described above.

Adobe Photoshop & Lightroom - $10/month (Creative Cloud Photography Edition, includes Photoshop CC & Lightroom CC). The venerable Photoshop is the gold standard for image editing, used by almost every graphics professional on the planet. It is complete overkill for the typical tasks needed for Web work, but if you happen to have a copy it is the best. The user interface is appallingly complex. Available for both Mac and PC. Save for Web is the best, bar none. The Cloud subscription may seem expensive but the standalone Photoshop program used to cost $600 up front. The subscription will cost that much after five years.

Adobe Photoshop Elements - $100 (Highly Recommended - the best $100 you can spend). Photoshop Elements (PSE) is the consumer version of Photoshop for Mac and PC. PSE's little secret is that it is almost as powerful as its big sister. A graphics professional would not tolerate PSE for long because it lacks the features that make Photoshop more efficient and productive for someone using it every second of every day, but for the mere mortal PSE is more than adequate. PSE's Save for Web feature matches Photoshop's! PSE also includes what used to be called Adobe Album, a respectable photo organizing tool.

Note: Although Photoshop and PSE share the same native PSD file format, Photoshop files opened in PSE will not display layers contained in groups. If the intent is to create a Web image from a Photoshop PSD, PSE can handle it. However, if edits to a layer in a group are required, Photoshop will be needed.

ThumbsPlus Pro - $100 ($60 for standard edition). ThumbsPlus is an excellent, advanced, and powerful organization too that also has the basic editing features necessary to prepare Web images. ThumbsPlus is better than average in creating quality resized JPEG images. The user interface for its editing features departs from the expected but is actually easy to use once learned, with helpful tips that pop up to provide guidance. The standard edition contains all the editing features needed; see the comparison. This author has used ThumbsPlus for 18 years and would not be without it; he would not take Lightroom over ThumbsPlus.

IrfanView - Shareware, €10/$12 per seat for commercial use. IrfanView, from Irfan Skiljan in Austria, is a Windows image processing program that has been available since the days of Windows 95. It is quite popular (one million downloads per month) and has all the features needed to produce Web images. It has a huge library of plug-ins. It loads and runs very quickly.

Google Picasa - Free. Picasa is intended as a consumer photo organizer with light editing capabilities. When precision in sizing is needed, Picasa can be difficult. File sizes for resized JPEG files are among the worst of all programs.

Photos for OS X - Free with every Apple Macintosh Computer, replacing the venerable iPhoto in 2015 (in Yosemite). Unlike iPhoto, Photos is part of OS X, not part of an app suite (i.e., iLife). Evolution can be expected on the same timetable as OS X upgrades. Photos can do the tasks required for Web work.

Paint.NET - Free (Recommended). This Windows program is not quite to the level of PSE but it is rapidly closing the gap for editing. It does not have an organization feature. It can handle the cropping and resizing functions with approximately the power and feature set of PSE. Paint.NET supports layers, so it can be used to create more complex images, such as overlaying text on a photo.

As is typical of non-Adobe programs, the quality of saved JPEG images is not as good. However, the quality is acceptable and the price is right. Paint.NET is convenient for "quick & dirty" edits because it starts up very quickly. This author uses it almost daily to create clips of images needed for emails or Web tutorials like this one.

The GIMP - Free. The GNU Image Manipulation Program (GIMP) is an open source project. "The" GIMP, as it is affectionately known, approaches the power and comprehensive nature of Photoshop. The GIMP is available for Windows, Mac, and Linux computers. Although it matches Photoshop in features, the size and quality of saved JPEG images does not match Photoshop's. Most Windows users will find The GIMP's visual interface a bit strange; the program was originally targeted at Linux computers, where the interface design is common. However, the user interface is less complex and a bit more intuitive than Photoshop's.

Camera Software - Free with purchase. Most digital cameras come with a CD containing some kind of photo organizing or photo editing software. Sometimes these programs are capable and sometimes not. Even though the camera manufacturers have a vested interest in promoting the "digital darkroom," their own software efforts have been spotty. In the past few years Nikon, for example, has been through several programs (Nikon View, Picture Project, ViewNX), none of which are truly capable editors. This is a hit or miss proposition - if the software can perform the needed tasks, fine, but don't count on it.

Other Products - $50-$100. PSE is the #1 selling consumer photo editing product. However, there are many others in this price range. This author has not tested such products, but for Web work the key is to examine the cropping capability and the "save for Web" capability. Examples include Corel's PaintShop Pro, ArcSoft's PhotoStudio, Serif's PhotoPlus and ACD Systems' ACDsee Photo Editor.