Preparing Photographs for the Web
Part of How Do They Do That With HTML? by Carl Tashian


How to do it:

For web photo preparation, you will need the following:

Note: For this page I'll give examples using Photoshop, but most other programs (like Paint Shop Pro) have the same features with the same options.

Photo preparation for the web appears easy at first glance, but as with almost any task on a computer, it turns out to be a bit trickier if you want to do it the right way.

Before you begin...

Before you start, it's important to make sure your copy of Photoshop is set up so that colors are correctly displayed for web graphics. On your computer, an image in Photoshop should look exactly the same when you view it in Internet Explorer, but it's likely that your copy of Photoshop isn't configured to do this by default. Why not? Well, to make a long story short, lots of important people have differing ideas about how colors should be managed on computer systems, and Adobe has tried to make their software conform to as many color management standards as possible. As a result, the colors you see in Photoshop are supposed to be "correct", while colors in other programs are not "correct". This is great for professional graphic designers who want the computer's color to match the color on paper when something is printed out, but it's not great for us. All we care about is having colors look the same across programs on our own computer. So lets fix it:

First, go into Photoshop's "RGB Setup" in the Color Settings menu, and set it up to look something like the one I've got on the left. Most importantly, RGB should be set to "Monitor RGB" and "Display Using Monitor Compensation" should be turned off.



Second, go into the "Profile Setup", also in the Color Settings menu. Here, you'll want to set RGB to "Monitor RGB" and turn off "RGB" on "Embed Profiles".



Once you've set these options, quit Photoshop, go back into it, and load a JPEG file. Bring the same file up in your web browser, and do a quick side-by-side comparison. The colors should be consistent across both programs. If so, you've saved yourself a bunch of headaches. Now lets get on to the photo preparation.

Preparing Photos for the Web:

I've gotten to a point with photo scanning where I follow the same routine every time: scan, fix colors, touch up, add copyright/caption information, resize the image for the web, sharpen it, blur it, and save it. I have Actions in Photoshop that automate parts of the procedure. All of the photos in my Photo Gallery have been through this process. So let me take you through it...

  1. Scan

    Begin by cleaning the source of your scan, especially if it's a negative or slide. Dust and hairs you can't see on the slide can end up huge on screen, and often hard to remove by touching up.

    I recommend scanning things at the highest optical resolution you can. Many scanners boast 4800 x 9600 dpi scanning, but say (in small print) that the optical resolution is 300 x 600 dpi. This means that anything scanned at resolutions higher than 300 x 600 dpi is mathematically interpolated by the scanner, and it provides more information from the source than a 300 x 600 dpi scan. It is exactly the same as the "digital zoom" on some digital cameras, which simply crops and interpolates in the zoomed area.

    My scanner, the HP PhotoSmart, scan slides at 2400 optical dpi. For a 35mm slide, that's about 3200 x 2200 pixels, which take about 26.9MB of space. Add another 16 or 20MB for Photoshop, plus 20 or 30MB for a modern operating system like Windows 98 or MacOS 9, and you're almost up to 100MB of RAM. So if you don't have at least 128MB of RAM, scan at lower resolutions or be prepared to wait a long time. If your computer is about to keel over, you'll understand why pro photo labs need gigabytes of RAM in order to handle big digital work.

  2. Fix Colors

    OK, so now you have a reasonably large picture scanned into your image editing program. Unless you have some incredible $2000 scanner, it probably looks somewhat washed out and desaturated. The darkest pixels in your scan probably aren't totally black, and the lightest values probably aren't totally white. This is where Auto Levels (in Photoshop's Image -> Adjust menu) comes in handy. According to the Photoshop user's guide: "The Auto Levels command ... defines the lightest and darkest pixels [of your scanned image] ... as white and black and then redistributes the intermediate pixel values proportionately." Your dark values get darker, and your light values get lighter, and as a result, the photograph ends up with higher contrast and more color saturation.


    Before Auto Levels

    After Auto Levels

    If you're still not satisfied with the results after Auto Levels, you can go into the Curves dialog box and manually adjust the curves further. If the dark values are still too light, you can use Curves to manually set the "black point" of the image and redistribute the other pixels once again. You can also manually adjust the contrast of the image using the Brightness/Contrast tool.

    Your image should now look good as far as color is concerned.. but maybe you can still see a few bits of dust or hair to remove from the image?

  3. Touch Up

    Touching up an image will allow you to digitally cover up any stubborn dust or scratches. Photoshop has a tool called the Rubber Stamp that lets you paint one part of an image over another part. That is, if there's a big black dust spot in the middle of a blue sky, you can copy directly from a nearby blue area over the dark spot. It's a surprisingly effective technique for seamlessly manipulating an image. The people at Time magazine use it to remove those unsightly zits or "straighten" a crooked tooth, and the people at the National Enquirer use it to add extra legs and such.

    The Rubber Stamp tool takes practice, but once you get used to it, it really comes in handy. I've gotten a lot more sloppy about dust on my negatives since I started using it, because it's so easy to clean up.

  4. Add Copyright/Caption

    I put a small black border and copyright notice on all of my photographs. If you don't want one, skip this step. To make a simple border around the image, change the current background color to black, then increase the canvas size by 25 pixels in both width and height. After that, you can add the "©2000 your@email.com" in white text. I use Lucida Console at 4.8 points, with no anti-aliasing, and it's somewhat legible. With type this small, I can usually fit the copyright text inside the 25 pixel border, in the lower right corner. Your milage may vary.

  5. Resize the image for the web

    It's time to resize the image for your web site. When you're figuring out what size you'll need the image to be, keep in mind that a typical web browser is about 600 pixels across. So you'll want to keep your images skinnier than that. Unless a photo is THE subject of the page, I usually resize it to around 200x133 or smaller, like the one on the right, with a link to a larger version.

    Unfortunately, you can't just resize the image to its final size immediately. Photoshop's techniques for resizing images add tons of blur, so you have to compensate for it by sharpening the image as you resize. If you're shrinking an image down to less than 50% of its original size, you'll get better results if you sharpen it once for every 50% increment. For sharpening, I use the Unsharp Mask filter with a radius of 0.6 pixels at 100% and no threshold.

    Lets say you're starting with a 3200x2200 image. The process goes something like this: Resize it to 1600x1100, then apply Unsharp Mask. Resize it to 800x550, then apply Unsharp Mask. Resize it to 400x275, then apply Unsharp Mask. You get the idea. If you follow this process, the final image will be very sharp and crisp. This is the best method I've found for resizing images, and to convince you further, here are some examples. For these images, the original size was 1472x976 and they've been resized to 184x122, which is 12.5% of their original size.


    Resized directly from 1472x976 original, with no sharpening applied

    Unsharp Mask applied only once, after resize from original

    Unsharp Mask applied for every 50% size change (3 times)


  6. Blur the Image

    Yes, that's right. Now that we've sharpened the image, we need to blur it. Let me explain...

    The JPEG format, which is best for storing photographs on the web, uses a technique called "lossy compression" to reduce file sizes. You can actually adjust the quality of the file when you save it. An increase in image quality (that is, an image that more closely resembles the original) means an increase in the file size, and vice versa. Low quality files show visible compression "artifacts" around edges, and they can be very distracting. But every image has a different "happy medium" of quality vs. file size, and some look great at low quality.

    Anyway, back to the blurring. JPEG files are larger when they have lots of sharp edges, and since you've been applying Unsharp Mask a lot, your images will probably have sharp edges. If you blur the image very slightly, by an imperceptible amount, you will soften the edges slightly (in the eyes of JPEG) and reduce the final file size. Try applying a Gaussian Blur to the entire image, with a radius of 0.2 pixels. The change should be unnoticeable, but the final file size will decrease:


    (17.9k) No Blur

    (17.5k) Gaussian Blur, 0.2 pixel radius


    If you think there's a visible difference between these images, I assure you it's purely psychological. My slight blurring changed the image from 17.9k to 17.5k, which isn't much; however, for larger images a 0.2 pixel blur can make a significant difference. Photoshop's "Save For Web" feature has blur as an option for JPEGs, so you don't have to apply the actual Gaussian Blur filter.

  7. Save It

    Ahh, the balance between quality and size. When you save a photograph, you'll probably want to use the JPEG file format, as I've discussed above, because it will usually give you the smallest image with the best quality. It was designed for photographs. In fact, JPEG even stands for "Joint Photographic Experts Group." But I digress.

    When you save the file, you'll be given some options. The compression level can be set between 100 (no compression) and 0 (way too much compression). I usually save files somewhere between 50 and 80, but many images look fine below 50. If you want, you can sit around all day trying to find the exact point where the image's quality becomes unacceptably low. But I don't recommend this-- it might drive you totally mad.

    I've shown Photoshop's "Save For Web" options on the right. Other image editing programs will, of course, have similar options. Starting from the top right:

    • JPEG specifies the file format.
    • Optimized removes extraneous information and results in a smaller file (good idea!)
    • Medium is redundant-- it's a name for the quality range between 30 and 59, which I've set specifically to 52.
    • Progressive is an option for Progressive JPEGs, which aren't supported in all browsers and aren't as good as regular old fashioned JPEGs. Leave it off.
    • Blur is the radius of a Gaussian Blur to apply to the image before saving.
    • ICC Profile specifies whether color correction information should be saved with the file. This isn't used by any web browsers yet, so for you it only means extra space. Turn it off.
    • Matte lets you set the color of transparent pixels, which you don't have because you're saving a photograph. It can be useful, however, for making pictures of text with anti-aliasing on non-white backgrounds.
That's it! You're ready to publish.

Resources:
[ return to front page ]

Reproduction of material from this page without written permission is strictly prohibited
Copyright © 1995-2001 Carl Tashian