Enhancing & Color-Correcting Images for the Web

(The examples in this tutorial were all prepared with Adobe Photoshop 4.0 -- a commercial package -- but the same results can be achieved with other programs, such as GIMP. Photoshop 4.0 is very old, but modern versions -- and even the current version of GIMP -- are quite similar.)

This article discusses what to do with your digital photographs (from a scanner, a camera, or video) to "fix" their color and brightness and other defects before making them into JPEGs (.jpg files) for the Web. This advice applies to most any photograph, but not to line-art (cartoons, icons). (As I've said before, photos -- continuous-tone images -- look best and compress best as JPEGs, while cartoons and icons -- solid-color images -- work best as GIFs. The advice in this article is not intended to work with GIFs, only JPEGs or other "photo-quality" file formats.)

BEFORE AND AFTER

The methods I show are illustrated with screen images from the Macintosh version of Adobe Photoshop 4.0 -- if you have a different version of Photoshop (3, 4, or 5, for Mac, Windows, or UNIX) the techniques are essentially the same, although your on-screen gadgetry may be a little different. These methods should also work with other professional-level photo-retouching programs, provided they offer equivalents of Photoshop's "Levels", "Curves", and "Hue/Saturation" functions (many programs imitate Photoshop's interface.)

Below are links to four high-resolution images that came straight out of my digital camera. I selected these four to be example images because they all came out with rotten lighting, underexposure, weird tints, etc. -- these are the worst photos I've taken lately. Each image is about 250k; I suggest you download at least one to your computer to practice with as I talk about the techniques.

Creeping sign (used in most of the following examples): example_image_1.jpg

Alewife garage: example_image_2.jpg

Jar Jar Binks's tongue: example_image_3.jpg

The Y2K tornado: example_image_4.jpg

Before you start enhancing photos, set up your monitor to show colors as "accurately" as you can. (Monitor calibration is a whole can of worms I don't have the space cover here.) If you don't have calibration hardware or at least software tools to do it, a good rule of thumb is to turn both the contrast all the way up, then turn the brightness down until the black border around the screen is completely black (look at the little red blue and green dots through a magnifier to see when they disappear.) In other words, max out the contrast, and then get the brightness as bright as it can be without the black turning to gray -- this ensures that anything intended to be very dark gray will be visible. A monitor's brightness often shifts when it gets warm, so I like to let it warm up for an hour before I do photo-retouching.

Also, your monitor must be in 24- or 32-bit color mode (called "millions of colors" on Macs or "true color" in Windows) if you want to be able to see what you're doing accurately -- go to your appropriate control panel ("Monitors" or "Monitors & Sound" on Macs, "Display" in Windows) to make sure you're not in 256-color mode. (16-bit, aka "thousands" or "high color", is better than 256-color mode, if you can't do the really good mode.)

Now let's get started. Experienced Photoshop users who have internalized how all the operations work may know that many of these steps could be combined (for instance, I'm going to make three trips to the "Levels" function when one could suffice) but I will illustrate this broken up into this many steps to make it clearer what operations are being done in what order. I'll show examples of images improving as I describe the steps.

Step 0. Get some photos.

The first thing to do, obviously, is to get some photos into your computer. Whether they come from a flatbed scanner, a digital still camera, or a video-capture card, the same color-correction techniques can be used. (Different devices tend to produce different kinds of defects in your images, but the procedure I describe here covers a wide range of defects.)

Whether you're using a flatbed scanner or a digital still camera, it helps to know what the optical (real) resolution of your device is, versus what the advertised "maximum" resolution is. For instance, some cheap cameras have a 640x480 (300,000-pixel) sensor, but they save 1000x800 photos -- which are enlarged from 640x480, and thus slightly blurry because they're enlargements. Similarly, if your scanner is optically 600dpi, running it at 2400dpi won't yield a more detailed image, just an enlargement of a 600dpi image. So I suggest you use your camera at or below its physical, optical, actual resolution, if that is different from its advertised "maximum". "Digital zoom" should also be avoided in favor of actual optical zoom. In all these cases, if you want your pictures to be bigger, you could enlarge them in Photoshop with the same results.

Step 1. Rotate the pictures, if needed.

An image which is sideways or upside-down can be fixed with the ninety-degree rotations (which have special menu items such as "Rotate Clockwise 90 degrees") without any image-quality degradation. However, freely rotating an image to any other angle (such as to fix a crooked photo) will blur it slightly. As a result, feel free to rotate things 90 degrees at a time, but think twice before rotating to any other angle -- if your photos are large, the slight blurring won't be visible after the image is scaled down, but if the photos are small, it might make them look fuzzy. If your crooked images came out of a flatbed scanner, you could just re-scan them a few times until you get them straight. (That's frustrating but it yields great results if you're finicky enough to scan them a few extra times.)

(Advanced technique:) If your photo has perspective that you want to change (such as a rectangular sign photographed from an odd angle, and you want to make it lie flat) select the whole image ("Select All") and use Photoshop's "Perspective" transformation to stretch it flat.

(Advanced technique:) If the image has a "fish-eye" effect, use the "Canvas Size" adjustment to add margins to the canvas so it's a square 1-1/2 times as big as the longest dimension (i.e. if it's 1000x800, change it to 1500x1500) and then use the "Spherize" filter with a small negative value (somewhere from -2 to -10, usually) to take out the spherical distortion. (Then remove all that extra margin with the cropping tool. You needed that margin because "Spherize" only affects a circular area in the middle of the photo.)

Step 2. Reduce to final size now, or later.

If the photos are large -- such as the 1024x768 images that come out of my Kodak camera -- whether you scale the photos down to Web size before or after enhancing them is up to you. I prefer to color-correct and clean them up while they're still large, and then save those working copies so I will have large, pretty versions for future use, and then scale 'em down for the Web. (Remember that once you scale something down, the missing pixels won't reappear when you enlarge it, so save your large images if you think you might ever need big versions.) Besides, operations such as painting out zits are easier on the large files (scaling them down at the end helps hide the evidence of the retouching.)

Step 3. Make the whites white and the blacks black.

This is where it gets tricky.

We're going to adjust the photos to use the full tonal range from brightest white to darkest black, which will make them nice and contrasty with highlights and shadows. In the world of four-color offset printing, making the whites really white and the blacks really black is a bad idea (because it's hard to print 1% and 99% halftone dots correctly) but for the Web, it's okay to make the photos take full advantage of the range of brightnesses your screen can show.

Photoshop novices usually gravitate to the "Brightness/Contrast" adjustments, as they are easy to understand (that's the way we're used to thinking of tuning our TVs!) and the interface is very simple (just two sliders). However, for the best results, "Brightness/Contrast" is to be avoided -- it doesn't provide the extra controls you'll need for fixing certain types of defects, and it also allows you to shoot yourself in the foot (there's no way to tell just how much brightness or contrast you can alter in an image before patches of it turn solid black or white.) I do 90% of my brightness-and-contrast-adjusting with the "Levels" function, which can do everything "Brightness/Contrast" can, and much more. (We'll also visit "Curves" later, which is even more flexible, but less intuitive.)

At this point it might help if you were to open up one of the example images with your Photoshop and found the "Levels" menu item, and then play with the sliders I'm about to talk about to see what they do.

Here's Photoshop 4's Levels interface:

The thing that looks like a mountain (or two mountains, or a squiggle, or a pyramid) in the middle is called a histogram. It is a graph which shows, for each brightness, how many pixels of that brightness there are. The height of the mountain's left end shows how many solid black pixels there are, and the height of its right end shows how many solid white pixels there are. If the mountain spans the full width of its box, then your image already has good contrast and goes from black to white. If it doesn't go all the way across, we're going to fix it.

Ignore most of the numbers and buttons and sliders in this window for now. We only need to worry about three things (which I've marked in red in the picture):

A.) The "Channel: RGB" menu at the top, when set to "RGB", means that we're adjusting the brightness and contrast of the image. If you were to change that to just "Red" or "Green" or "Blue" you could adjust the brightness of one of the color components of the image (we're not going to do this just yet, leave it at "RGB" for now.)

B.) The "Preview" check box at the bottom right, if it's not checked, you should check it. Because you'd really rather see what's happening as accurately as possible, no?

C.) Just below the histogram are three sliders, colored black, gray, and white. When you move these left and right to point at different parts of the histogram, you are indicating which of the image's colors should be made deepest black, middle gray, and brightest white. (We won't use the gray one yet, but the black and white ones are the key to this step.)

If the histogram doesn't go all the way across its box, the image doesn't go all the way from deep black to bright white. If this is the case, drag the black or white sliders inwards until they point at the edges of the histogram. (The edges represent what the darkest and lightest colors currently are, and we want these to become black and white.)

An image which is underexposed -- so that everything is dark -- will show a histogram bunched up at the left end. Sometimes digital cameras are fooled by "hot spots" (bright reflections of the camera's flash) and when the camera attempts to adjust the contrast automatically, the hot spot will be a little peak at the right end, and the rest of the (overly dark) image will be bunched up at the left.

Sometimes there will be a few extra-dark or extra-light pixels hanging off the end of the histogram, such as the aforementioned "hot spot". It's okay to move the sliders just inside those pixels to where the histogram looks like it _really_ starts. (This may make the area around the hot spot glow even brighter, turning solid white, but if the rest of your image is too dark you'd rather lighten the dark parts even if it makes the hot spot a little brighter.)

Example image #1 -- the sign with the crawling letters -- is a good example of an image which is underexposed with a hot spot. Look at the histogram of the original image:

To fix this image I will drag the "white" slider inwards to touch the edge of the histogram:

...and click the "OK" button to make the adjustment take effect.

It looks better now, but still too dark and tan and blurry. I'll work on it some more.

Step 4. If there's a color tint (from fluorescent light?), neutralize it.

Okay, I just used "Levels" to do something. Now I will open "Levels" again if the image has a strange tint (often the result of shooting under fluorescent lighting.) Example image #1 certainly does -- after the previous step it went from dark brown to tan, but that sign's supposed to be a lot closer to white or at least gray. So I need to do this step. (Some photos taken under bright lighting, such as full sunlight or a flash, can skip this step.)

In "Levels", now I'm going to change that menu that says "Channel: RGB" to "Channel: Red", then "Channel: Green", then "Channel: Blue", and make the same adjustments made above, to the individual histograms of the red, green, and blue colors.

This image had a red histogram that went all the way across, so I didn't have to fix the red, but the green and especially the blue were too weak (the image is yellow because it has too little blue, yellow is the opposite of blue on screen.) So I've dragged the "white" slider for the blue histogram to where the blue histogram begins, and clicked "OK". Now the tan sign is beige, close enough to white for my purposes! (Further fiddling with these red, green, and blue histograms could make it really gray, but for this sign I won't be that ambitious. This is good enough for now.)

Some photos _shouldn't_ have the full tonal range -- for instance, a photo of a solid purple wall should only be purple -- and in those cases, making these adjustments may put strange-colored highlights into your image. But in general this step will work wonders to images that look yellowish because you shot them by fluorescent light, or under a heat lamp.

(Advanced technique:) Most video cameras and some digital still cameras have a "white balance" adjustment. If your camera has it, you should practice using it because white balancing will take care of color problems caused by funny lighting. If the camera lets you manually white balance, what you need to do is point your camera at something which is bright white (such as a blank sheet of paper, or the inside of a translucent white lens cap) while in the same place you're going to shoot your photos (have your subject hold up a piece of white paper and zoom in on it.) When the camera is pointed at the white thing, hit the "white balance" button and the camera will adjust its colors so that any photos you take under that same lighting will have a normal tint. Some cameras have predefined white balance settings (such as "indoor" and "outdoor") which seldom work well for me ("indoor" can't possibly cover the whole range of incandescent, fluorescent, halogen, and skylit rooms) so if your camera lets you set the white balance yourself you will get the best results.

Here's an example of another image showing how a yellowish color cast (from a small incandescent light bulb) can be neutralized to get the white curtains in the background to not be yellow:

Our creeping-letter sign is starting to look presentable. It's still kind of dark, though.

Step 5. Adjust the overall brightness.

I've gotten the whites to be white and the blacks to be black, but in the real world, most stuff is in between. What's necessary now is to make the mid-range colors brighter or darker without changing the black or white. (You can't do this with "Brightness/Contrast", only "Levels".)

The middle (gray) slider in "Levels" controls the brightness of the mid-tones in the image. I'm opening "Levels" a third time and moving that slider back and forth until the image looks "right" to my eyes. (This step has to be done by eye.)

One thing to keep in mind about what looks "right" is that Macs tend to show pictures brighter than Windows does, so if you're designing your Web on a Mac, it's best to err on the side of "slightly too bright" (so that Windows people don't see murky, shadowy images); if you're using Windows, just make the photo look right (because if the photo gets a little brighter on Macs that won't hurt anything.) This is because the two operating systems are "tuned" differently (at least by default) and monitors have trouble displaying very dark colors.

Incidentally, adjusting the middle colors with this slider -- without altering the black and white extremes -- is called a "gamma" function, a term you will run into frequently if you read technical literature on computer graphics, photo retouching, or monitor calibration.

I think I've gotten the sign to look much better than it originally did -- it's now a cream color (I'm sure the MBTA intended it to be white, but it was so dark in that area that it will be hard to make this photo really white -- which I don't want to do anyhow because I want to keep a little of the subway gloom. If this photo were not such an extreme example of underexposure, the previous steps would have made it look really beautiful. This one's right at the edge of what's fixable -- if the original image had been any darker, it would have been solid black and nothing could have helped it.)

Step 6. Re-saturate washed-out colors.

If the image is meant to contain bright colors (this one isn't), any severe changes to the brightness and contrast will make the colors seem faded. If you've adjusted things drastically enough to wash out the colors, use the "Hue/Saturation" adjustment to increase the image's saturation just a little (usually +4 to +10 works for me, but it depends on the image.)

I didn't do that for this image, but you'll need to do this when you photograph brightly-colored things in bad light.

I'm done tweaking the colors, now I need to work on the sharpness.

Step 7. Sharpen the image, if necessary.

The "Sharpen" filter (and its relatives such as "Unsharp Mask", the fancy version) is overused by many people -- if you "sharpen" an image too much in a program like Photoshop, things come out with halos (dark letters have white outlines around them, etc.) However, if you have a light touch, a judicious use of sharpening can improve photos that are slightly out of focus.

Here's an example of an image which has already had too much sharpening -- note the white "glow":

(Most digital cameras apply their own sharpening, and sometimes the photos get too much of it automatically... sigh. Anyway, if sharp edges, such as those around lettering, have halos, it's already been sharpened as much as it should be sharpened. There's no easy way to remove those halos.)

An image which is _really_ out of focus is always going to look blurry, and even a slightly out of focus image can't be made perfectly sharp, but sharpening does help. Subtly.

If the image is only very slightly fuzzy, use "Sharpen" (which takes no options). If the image is more blurry, use "Sharpen More" (which has a few additional settings.)

Digital camera tip: If you're trying to photograph something at close range and the camera won't focus, even in "manual focus" mode, zoom out (towards "wide-angle") until you can focus. Or move away from what you're trying to photograph. If you're zoomed in ("telephoto") you will have a hard time taking photos at close range. Most digital cameras will let you get pretty close if you're in wide-angle mode; for instance, a Kodak DC210 can focus on things less than a foot from the lens, and the Sony FD-91 can focus on ants walking on the lens in wide-angle mode. If you like to take shots at such close range, shop for a camera with a "macro" mode or one that allows you to focus manually.

Digital camera tip: If the image is smeared along a particular direction (because the camera shook when you pressed the shutter button), that's a lot harder to fix (sometimes impossible) than the more general cases of slight blurriness. If you have a small camera, be sure to hold it with both hands. If it takes the camera a half-second to autofocus and shoot the image after you press the shutter button (some cameras are sluggish), get in the habit of holding the camera still for a second or two after you fire the shutter!

Here's an enlargement of the image I've been working on:

The letters do seem fuzzy. (And speckly, but that's the next step.) I know from experience that these are too fuzzy for "Sharpen", so I'll use "Unsharp Mask" -- and then I need to drag the three sliders around until I like the way it looks:

It really doesn't help much (this image is fuzzy and grainy and nothing will make it perfect) but it does help a little. (This image will look less fuzzy when I scale it down later.)

Of course, sharpening the example image enhanced all the details, including the "grain" speckles. Now I want to take out the speckles.

Step 8. De-speckle, if necessary.

Although this image is going to be shrunk down later -- which will mostly fade out all the little speckly bits -- I'm going to get rid of some of the speckles now anyway. If your image has little spots (one to two pixels across at the most) use the "Despeckle" filter. The speckles should diminish (this filter works best on really tiny speckles.)

After despeckling:

...that made the edges of the letters a little fuzzier, but the sharpen-and-despeckle combination still yields better results than not sharpening and despeckling. (Usually.)

If your image has really big speckles (such as giant moire patterns from scanning an image which had halftone dots) there's not much you can do. You can try Photoshop's "Median" filter, which rounds off edges and can make the dots smooth out, but in general there's no way to completely remove speckles that are bigger than a pixel or two across.

Digital camera (and video camera) tip: Very low light causes major speckling. Sometimes fiddling with the camera's controls can help, but in very dark places you may have to suffer from serious speckles.

Step 9. If the image isn't its final size, shrink it down.

I like to do this last, you might prefer to do it earlier. If you do it last, you might want to run one last pass with the "Sharpen" filter (if the image still looks a little fuzzy). (But undo it if it makes visible white haloes around dark things!)

Remember to save a high-resolution copy of your image before you shrink it!

Step 10. Save the final JPEG for your Web site.

Whew! Done! All that's left is to save the JPEG, which entails picking an amount of compression (the more compression, the more the image degrades). Photoshop doesn't have a very friendly interface for seeing what happens to your JPEG at different quality levels, so you may just want to save several versions at once and then open them all up in your Web browser to see what the most compression you can use without mashing the image is. (Note that the amount of compression that an image can tolerate before looking yucky is different for each photo. And you want to compress each image as much as you can get away with because some people have slower modems than you.)

There are Photoshop plug-ins available that give you a more interactive way to see the JPEG's quality change as you change the amount of compression, or you could use a different program. I figure that Adobe doesn't put good GIF/JPEG tools in Photoshop, because they sell a companion program (ImageReady) which specializes in making GIFs and JPEGs. I save my Photoshop images in a lossless format (such as TIFF or .psd) and then open them with ImageReady to turn 'em into JPEGs. (Photoshop is capable of making GIFs and JPEGs, but not as elegantly as ImageReady.)

Here's how the example image with the wacky letters looked when I started and when I finished:

BEFORE AND AFTER

Advanced Technique: Brightening the shadows

What if you have an image where the dark parts are almost solid black, but you don't want to lighten all the other stuff?

In addition to "Levels", Photoshop's "Curves" function can be used to make the equivalent adjustments. However, instead of showing a histogram with three sliders, it shows an X-Y graph where you draw a curve to change how the current brightnesses (across the bottom) map onto the new brightnesses (running up the left side.) This is not for the faint of heart, but it allows you to fix images where you want to lighten up just the shadows.

The default curve -- one which says "don't do anything to this image" -- is a plain diagonal line:

In this image, the dark areas need extra oomph, but I don't want to make that bright sky significantly brighter. So I'm going to pull up on the left-hand side of the curve to lighten the darkest colors, while not moving the right-hand side much:

...this would replace Step 5, where you would move the "gray" slider in "Levels". It's a more flexible version of the same operation (moving the "gray" slider would be the equivalent of making the curve in "Curves" bulge upwards or downwards uniformly, and to brighten just the shadows we need to be able to make asymmetrical curves.)

A final tip

Remember that I said not to fiddle with the other sliders in the "Levels" window, the two at the bottom? Once you're comfortable with "Levels", if you play around with the sliders at the bottom you'll discover an easy way to make extremely light (or dark) images for use as faded-out Web backgrounds.

(Kibo, for "Today on The World")

Back to The World's Web page creation help