Using Photoshop to Prepare Images for the Web

Article and Photography by Ron Bigelow

www.ronbigelow.com

Photoshop CS3 Used in this Tutorial

Recently, on a couple of different occasions, I was approached by people who wanted to know how I prepared my images for display on the web. Apparently, they were not happy with the way their images looked on the web. This isn't surprising. I experienced the same thing a few years ago. I liked the look of my images at full resolution. However, once the images had been down sized and converted to JPEG format, they looked lifeless, dull, and desaturated. Furthermore, the images often suffered from a considerable color shift. This was clearly not how I wanted to present my work to the public.

So, I began to experiment with the workflow that I used to prepare the images for web display. In developing a new workflow, I had two main criteria:

  1. Since I produce a lot of images for my articles, I could not afford to spend much time on each image. Thus, the workflow had to be fairly quick and easy to perform.

  2. Since the images on my web site represent me as a photographer, the workflow had to produce high quality images for web display.

Notice that there was one thing that I didn't list as a criteria -- cost. If I could get a relatively quick workflow that produced high quality web images, I did not mind spending a little bit for software that would enhance the speed or quality of the process. Accordingly, this is exactly what I did. I found a couple of reasonably priced software packages (about $120 total) that fit my needs perfectly. Consequently, the process that I developed and will describe in this article utilizes these two software packages. Some of you may object that you do not want to spend the money for the software packages. That is fine. However, it means that your needs are different than mine. Thus, you will need to develop your own workflow that meets your needs.

For those of you that are still interested, let's get started.

The Image

Figure 1: The Image

Figure 1 shows the image. From a compositional standpoint, this is a very simple image -- a tiger lily against a bright background. The power of the image depends on the bold colors and the contrast between the two major colors (i.e., orange and green). It is critical that these colors remain vibrant when the image is prepared for the web. In other words, the color accuracy, color saturation, and color contrast must not change. This is a challenge since many workflows for preparing images for the web can affect these color parameters. However, the workflow that will be used with this image usually leaves these color parameters intact.

Of course, it is necessary to start off with a high quality image. Thus, this image was shot in raw and edited as a sixteen bit image.

The Workflow

This process utilizes five steps:

  1. Downsize the image.
  2. Sharpen the image.
  3. Save a copy of the image with the layers.
  4. Convert the colorspace/flatten the image.
  5. Convert to eight bit image.
  6. Save the JPEG image.

Downsizing the Image

One of the most important factors in producing high quality, web images is that the image should be left as a high bit image as long as possible (assuming of course that you started with a high bit image). The reason for this is that each of the steps that is performed in the workflow is destructive. In other words, each step degrades the quality of the image somewhat. However, less degradation will occur if the image is a high bit image than if it is reduced to an eight bit image. Unfortunately, this will slow down the workflow somewhat, but it is worth the extra time if a high quality web image is desired. Thus, at this time, the image is left as a sixteen bit image.

Another key factor in producing a high quality web image is the downsizing process. The image must be reduced from its original size (4,368 x 2,912 pixels in the case of this image) to the final web size (600 x 400 pixels for display in this article). The temptation might be to use the Image Size tool in Photoshop. However, this will not result in the highest quality, downsized image. The problem is that the downsizing will occur in one step. A superior, downsized image will result if the image is downsized in steps. In other words, the image is downsized in multiple, small steps rather than in one big step. This process is analogous to the stair-step process that is used to interpolate images (i.e., upsize) to produce large prints.

Now, one could conduct experiments to determine the optimal number of downsizing steps to use and then create an action to automate the downsizing process. The problem is that one would have to analyze the process and create different actions depending on the size of the initial image and the size of the downsized image. Consequently, if a photographer starts with images of four different sizes and wants to produce two different sizes of web images, he might have to create as many as eight actions (four initial sizes x two final sizes). Luckily, there is an easier way. Fred Miranda produces a Photoshop plug-in called Web Presenter Pro (WP Pro). The program can be found on Fred's web site (fredmiranda.com/software) and currently sells for $19.90. This program automates the downsizing process and produces high quality downsized images -- well worth the money.

Figure 2: WP Pro Dialog Box

After the plug-in has been installed, it is launched by choosing file/automate/WP Pro. The interface is very simple (see Figure 2). The image size is set using the Decrease image size to or Set image size commands. I choose to set the sharpening option to No sharpening as I will perform the sharpening in a later step.

Sharpening the Image

As always, the sharpening of the image is also a critical step. The problem is that any particular sharpening step requires a different sharpening approach depending on what type of sharpening is being done (e.g., initial or final sharpening), the image content (e.g., fine vs. course detail), the final image size, and the final form of the image (e.g. web image or fine art print). A photographer could analyze each image that is destined for the web and determine how to best sharpen the image. However, that would be very time consuming -- which would violate my first criteria for a web image workflow.

Luckily, there are plug-ins that will sharpen images quickly and will do a fairly good job on web images. The program that I use is called PhotoKit Sharpener. The program can be found on Pixel Genius' web site (pixelgenius.com/sharpener/index.html) and currently sells for $99.95. Once the program has been installed in Photoshop, it is launched by choosing file/automate/Photokit Output Sharpener.

Before I proceed any further, I need to make an important point. I recommend PhotoKit Sharpener for sharpening web images. However, for high quality images (e.g. fine art prints), I manually sharpen my images as I can do a much better job than any sharpening software.

Figure 3: Photokit Output Sharpener Dialogue Box

The Photokit Output Sharpener (see Figure 3) is optimized for the final sharpening of an image. The menu has two settings. To optimize the sharpening for a web image, set the Sharpener Set to Web and Multimedia Sharpeners. To optimize the sharpening for the image size and content, set the Sharpener Effect for the size and content of the image being sharpened. This particular image is now 600 pixels wide, and the detail in the image is medium (as compared to fine or wide detail). Thus the 600-pixel Medium Edge Sharpener setting was chosen.

It is important to understand that this sharpening has now been optimized for:

  • A final sharpening.
  • A web image.
  • A 600 pixel image.
  • An image with medium detail.

In short, the image sharpening is highly optimized for the image's intended purpose, but the sharpening process only took a few seconds. This is why I use this sharpening plug-in.

Saving the Image

At this point, it is a good idea to save a copy of the image with all of the layers. The reason for this is that, even with the best workflow, you may find that you are not happy with the final web image, and you may want to go back and perform some edits to fine tune the image. By having a copy of the image with all of the layers, this can be done without having to start from the very beginning.

The file is saved by choosing file/Save As.

Converting the Colorspace

Figure 4: Convert to Profile Dialogue Box

The image needs to be in the sRGB colorspace for posting on the web. If the image is already in the sRGB colorspace, this step can be skipped. However, if the image is in any other colorspace, the image will need to be converted to sRGB. This is done by choosing Edit/Convert to Profile. In the Convert to Profile dialogue box (see Figure 4), the Profile is set to sRGB, the Engine to Adobe, and the Intent to Relative Colorimetric. The Use Black Point Compensation, Use Dither, and Flatten Image boxes should be checked.

Converting to Eight Bit

All images need to be converted to eight bit before they can be converted to JPG format. The conversion is carried out by choosing Image/Mode/8 Bits/Channel.

Saving in JPG Format

The vast majority of images on the web are posted in JPG format. So, the last step is to save the image as a JPG. This is done by choosing File/Save for Web & Devices. The Save for Web & Devices dialogue box has a number of settings (see Figure 5). For our purposes, two of the settings are the most important. First, the format must be set to JPEG. Second, the quality of the image must be set. The image quality can be set in a couple of ways. One can use the predetermined setting (Maximum in this case), or one can use the Quality setting (100% for this image). The quality setting determines how much the image is compressed. This in turn determines two things: the size of the image and the quality of the image. Lower quality settings will produce smaller files that have lower image quality. I usually save images of menus (such as the one in Figure 5) at 100% quality and images from photos at about 80% quality. The lower left corner of the image shows the expected size of the image after is has been compressed and saved.

Figure 5: Save For Web & Devices Dialogue Box
Figure 6: Save Optimized As Dialogue Box
After the Save button is clicked, the Save Optimized As dialogue box appears (see Figure 6). Once the proper folder is chosen, the image is saved.

That's All There is To It

Now, you are ready to move on to your next image.