Getting Your Photos Web-Ready

by Gary David Bouton

Pictures—being able to see them on-line and share them with the world is what changed an academic chat line into the World Wide Web. Pictures of your family, your pets, your neighborhood, things you love... and, oh yeah, pictures that illustrate the products and services your business offers. You probably have a ton of pictures lying around in shoe boxes that you'd love to put on your personal Web site, and you're positive that everyone in the company will want to see all of the pictures you plan to take at the next company party.

• Steps to perfect pictures: Acquire, edit, and publish.
• Taking the picture: Did you use a camera with film or a new digital one?
• Sizing digital images: Why you can't just make them as big as you want.
• Scanning: Getting the picture from the "real" world into the computer.
• Color correction: Making the colors in your image look "right."
• Export: Getting your image into Web-ready format. Always use JPF format for photos!
• Publish: Getting your pictures on the Web.
• As simple as possible: Start with the least you need to know, then learn as you go.

OK, so just how do ordinary human beings do whatever it is you have to do to get pictures up on the Web...and have them look marvelous without a degree in photographic engineering? Just read on. Stick with me—it's easy.

Steps to perfect pictures

There are three basic areas of interest for those of us who want to publish images on the Web.

• First, there's the Acquisition Phase—or more simply put, getting your "real world" (a.k.a., analog) images into digital format and onto the hard drive of your computer.
• Second, there's the Editing Phase, which sounds intimidating, but it's not. You'll see in this article how to correct the exposure of an image and how to correct the color so the people in the image look like flesh and blood, and not like sun ripe tomatoes! And no rocket science stuff—I'll simply walk you through what you need to do.
• Finally, there's the Publishing Phase, probably the area that entails the least effort (at least with NetObjects Fusion).

But before we go through our "phases," you need to take a picture first!

Taking the picture

Point a camera at someone or something, focus, and press the shutter button. The kind of camera you use–the traditional kind that stores the image on film or the electronic camera that stores the image as data on a diskette or on a memory card—determines what you do next. To post a photo on the Web, the image has to be written or converted into a computer file, usually a GIF or a JPG file.

If you already took a picture and had it printed on photographic paper, click here to read about scanning .

For pictures taken with a camera that uses film

Take it to be developed. Your developing choices are:

1. Traditional film and print. The good thing about this choice is that you have a negative, from which you can make a print to any size you need. The bad aspect of this is that the print from the negative still is not in digital format, and if you scan the print, you are one generation in quality away from the original image.

2. Traditional film and print and have the images scanned and stored on a floppy (Picture Disk). This is a better choice because now you have a floppy disk that contains your images. Plunk the diskette into your PC and you're off. The only downside to Picture Disks is that the images are small in resolution (dimensions on screen), so if the images are large enough for your Web site, then peachy. If not, you need to scan the prints or have the negatives made into a PhotoCD.

3. PhotoCD. Very popular and very cheap, considering the quality of the images. Whites are whiter on a PhotoCD, and everything looks colorful and attractive because Kodak scans the negatives—bringing your image one generation closer to the source of the image. The downside to PhotoCDs are that they take a while to get processed (from three days to weeks), and you only have five choices of image size on the CD to use. And only the smallest size is appropriate for posting on the Web.

Why can't you scale a digital image to any size?

Let's take a moment to dispel some popularly held myths about what computer image editing software can and cannot do. Yes, a gifted Photoshop artist can put Oprah Winfrey's head on the body of Ann-Margret, and artists who work for the Enquirer have to dream up a photorealistic picture of the invading aliens of the week.

But what no one can do is restore the focus of an image that has been blurred. This should mean two things for you: First, always make sure the image you're using is in sharp focus, and second, make sure it's the right size at the time you convert it to digital format. If you resize an image in an image editing program such as PaintShopPro or Photoshop, the program is going to add or cast away picture elements (building blocks called pixels). And, although you can use a sharpening filter on the image (the images accompanying this article were sharpened), you never really recapture the focus of the image because original information has been deleted, and computers are stupider than you think!

Pick up a flatbed scanner. Make it easy on yourself and get one that attaches to your "parallel" printer port. These almost install themselves. Look for the word "TWAIN" (which stands for "technology without an interesting name," I kid you not). This is the de facto standard interface between things such as scanners and software. You can get a decent scanner these days for under $100. I've had good experiences with those from Umax.

If you use Windows and don't have a genius 12-year-old nephew, avoid anything that says SCSI (pronounced "scuzzy").

Scanners come with software that lets you save whatever you scan to a file on your hard disk. The good thing about flatbed scanning is that you are not limited to any specific size for the digitized image until you specify so (so focus is always pretty good), and you're not restricted to scanning photographs. You work for a cereal company? Put some Saran Wrap over the flatbed's imaging surface, and pour a box of flakes on your scanner, and then hit Scan. You'd be amazed at the quality of "directly scanning" real-world stuff. Scanner electronics have the precision of a microscope. Check out the coffee beans shown here. Could you get this image with a camera?

For pictures taken with a digital camera

Transfer the images you took with your digital camera to your computer's hard disk by following the instructions that came with your camera. This may be as simple as placing the floppy or flash memory card your camera uses into an appropriate drive and reading it like any other data. Or, you may have to hook up a cable or establish an infrared (cordless) connection. The downside to this "immediate gratification" type of image taking is that really decent cameras cost more than film-based cameras, although prices are dropping fast. (Editor's note: I recommend digital cameras from Olympus because I've found them to produce the best quality image—and you take pictures for the image, right?)

Which leads me back to the most economical, versatile way of acquiring an image—the flatbed scanner. In the section to follow, I'll explain how to digitize a printed photo.

Scanning

Scanning is not always accomplished as simply as plugging the scanner into a wall socket. Even if your genius nephew installed the hardware, the interface software for the scanner, and the host program (called an image editing program—PaintShopPro is such an application), there are still a few things you need to learn to make this a fun and productive experience.

1. This has nothing to do with electronics but more with optimizing your real-world sample (your picture). Dust off the picture, and clean the glass imaging surface on the scanner. I've used a small amount of Windex and a dust-free cloth purchased from a camera store with good results.

2. Take the time to place the image at a right angle to the edges of the scanner's imaging surface. Image editing software cannot tilt a crookedly scanned image without paying the price of getting an out-of-focus image you can never completely correct. If the horizonin your photo is crooked, however, ignore this advice, and try to align the horizon parallel to the top edge of the imaging surface.

3. In the image editing application, choose File>Select Source from the menu. All scanner manufacturers have different interfaces and drivers, but Select Source seems to be a constant. In the Select Source box, click on the scanner make and model you own. This selects the correct software driver for the scanner. Click on OK, and then choose File>Acquire. This is the big moment—the interface for the scanner controls pops up over your image editing interface.

4. Get a sandwich, pick up the owner's manual, and then click on Preview in the scanner interface. It'll take a while for the scanner to build the preview of the image, sandwiches can be very nutritious, and the owner's manual might provide a nugget of wisdom or two for the future.

5. Once the preview appears, click on the crop tool in the scanner interface, and drag a marquee that tightly crops the image. The more empty space around your image, the more wasteful bytes of data will need to be transferred to the computer. See the figure below.

6. Somewhere on the interface, you will see the following options:

• Unit of measurement--Set this to pixels because every image on the Web is measured in pixels, not inches or gallons).
• Resolution should match that of a computer monitor, which is 72 for Macs and 96 for Windows. So type 72 in the Resolution field.
• Original cropped image size will display the size of the marquee box surrounding the image. Chances are good that the size shown is too large. In this figure, you can see that my wedding image is 504 pixels wide, and I happen to want it to be 400 pixels wide, so I type this value in the appropriate field, and then press Tab to go to the next field. Most scanner interfaces will automatically adjust the height of the scan.

Color Depth--This specification refers to the number of available colors that can be contained in your image. Most color flatbeds offer 24-bit color (a.k.a., "millions of colors" for Macintosh users), grayscale, and line art (which turns the image into a digital image made of only black or white pixels—only use this setting for pen and ink drawings). Your choice 99% of the time should be millions of colors (24-bit, or 16.7 million colors...all the same color space description).

If your scanner has on-board color correction and you have a good view of your image in the scanner interface's preview window, you might want to tweak the image a little by adding contrast, reducing the midtones, or changing the relative hue of the picture (this is called color casting correction). Here you can see the options I have with a Umax scanner. Some scanners have an "automatic exposure" button, and this can make scanning easier for those starting out.

My professional advice is this: If the image looks fairly good in the preview window, do not fuss around with the color correction controls to your scanner.

Hit the Scan button, wait a moment while the scanner makes dishwasher sounds, and then save the image when it appears in the image editing program's interface. A good file format is TIFF, because TIFF is capable of saving all of the colors your scanner can scan—plus there's no quality loss with this format. You'll be working with a copyof your scan when you work on it for Web display.

Color "correction"

I'm going to use Photoshop in the next few examples because chances are better than 50/50 that your scanner came with a limited version of Photoshop—Photoshop 4 LE, or some such name. Equivalent commands can be found in PaintShopPro and with Alien Skin's Xenofex filters—a fun bunch of creative filters for Web page designers.

One of the most common problems with amateur and occasionally professional photography is that the lighting isn't perfect. You either change the lighting (if you're using outdoor lighting, good luck) or try to compensate, for example with a brilliant background, by overexposing the frame, so the people in the foreground look OK, but the sky becomes this light cyan blob. We have a problem in the following picture: The foreground folks are way too dark while the sky is washed out and the greenery is perfect.

Now, the most important area of this picture—for brightness, contrast, and color balance are the folks, naturally, specifically their faces (there's not much detail in the gentleman's black tux, so we skip isolating this area). What I'm doing in Figure 5 is painting over the faces of the folks with a soft edge, large brush while in Photoshop's Quick Mask Mode. When I'm done marking the areas that need correction with this special overlay tint of color, I will switch back to Standard editing mode. The tint will disappear and be replaced with marquee lines—telling me that only the area inside the marquee is available for selection. The nice thing about using a soft edge brush is that the selected area makes a gradual transition to outside areas that are protected from editing.

After taking perhaps 15 seconds to define the area I want masked, a click on the Standard Editing mode button creates a marquee around my friends' faces. Because the faces need to be brighter, I use the Brightness/Contrast controls, as shown in Figure 6. Advanced tip: Whenever you brighten an area, chances are that you'll want to add contrast to the same area. Adding contrast helps prevent an area from looking washed out, and that's why the Contrast slider is at +35 in Figure 6.

As a partial result of lightening the selected image areas, my friends now have an unflattering, unrealistic complexion. No problem: Most image editors have a feature that allows you to move specific areas of the visible spectrum into other areas. For example, PaintShopPro has the Colors>Adjust> Red/Green/Blue feature and Photoshop has the Color Balance control, shown in Figure 7. What I'm doing here is moving the selected areas toward cyan and away from red, and also moving the face areas a little toward yellow and away from blue. As you can see, this is a much more realistic flesh tone than I uncovered by lightening the image.

One last trick here before we move on to exporting the image. You'll notice the sky is a very washed out color, and it looks like it's all one tone. If you have a photograph of a nice blue sky with a few clouds, you can insert this picture to replace the original sky in the picture. What you do is this: Almost every image editor has a Magic Wand tool. Click in the sky area (you might need to change the Tolerance setting so the whole sky area gets selected), and then paste a copy of the nice sky image into the marquee selection. This is not as hard as it sounds and would take 30 seconds to dramatically improve the overall color of an image such as mine here. See Figure 8.

Exporting to web format

Always save photos in JPG format. Always. Always. Always. Always. Always. Did I make that clear enough? Most graphics programs these days allow you to save to JPG, and control how much compression you use. The more compression, the smaller the file, but also the "worse" your picture looks. Some programs allow you to experiment--try more compression, see how it affects your image. Then you can choose the best balance of size and image quality. I go to too many sites on the web where people have 80K images that take 40 seconds to view, when the same image, looking virtually identical, could be 18K and take nine seconds to view. Don't waste your viewer's time--they probably won't stick around to see your site if you do.

If you have a lot of images you want to publish to the Web, do yourself a favor and spend $39 on Ulead's Smart Saver plug-in. I swear by this program because it virtually guarantees that an image saved in GIF or JPG format will look as good as possible and will be as small as possible in terms of file size (as measured in kilobytes). You need to convert the format of your image to either of these formats because Web browsers can read only GIFs and JPGs—and both these file formats require that some of the thousands of unique colors in your images are cast away and replaced with similar colors. This is because both file formats offer tremendous compression so your Web site is a speedy place to visit. As a result of the compression, some original data in the image needs to be discarded. This is why I recommend that you save your scans to TIFF format, and only work with a copy of your scans!

Here are the things I really like about Smart Saver:

• It shows you how the original image looks when compared to any degree of compression you might choose.
• It shows you GIF vs. JPG formats, so you can see which format is the best choice.
• It will run "what if?" scenarios on the image, hypothetically compressing the image to about nine settings, and then tells you which level of compression offers the smallest file/best quality image.

Here you can see the interface to Ulead's Smart Saver. The utility, when installed is found under the File>Export menu.

Once you've exported a copy of your image(s) to the best format, your editing work is done, and now comes the easy part!

Publishing your photos

Publishing to the Web is not exactly a straightforward process (well, unless you use a program such as NetObjects Fusion), and there are lots of articles on eFuse that explain the finer points.

Me? I'm simply going to outline here what I'd do to publish this picture I've been showing. First, I'd get a really good HTML editing program such as NetObjects Fusion because the program insulates me and other artists from the mind-boggling amount of HTML code that goes into an HTML page. You see, you can't simply post an image to the Web. You need an HTML document that references where the image goes, how large it is, whether it's aligned with any text, and so on. HTML is a lot like stage directions if you've ever been in a school play. The directions in this instance are:

(HTML code): Hi, folks. I'm going to show you an image now.

(HTML code calls image of wedding couple to center stage—the middle of the screen).

My analogy might be corny, but it holds true. In the next picture, I'm assembling the HTML page in Fusion version 4. This program allows you to place different elements on a page, and that page will look exactly as I've composed it when it is published to the Web.

As you can see, there's a Publish button on the top toolbox. When you think you are ready to post your document, click on this button, and Fusion will collect and organize all of the text and graphic elements for your Web site, and send them through the Internet to your account with your Internet Service Provider. Naturally, this means you have to have an account before publishing, but this is easily arranged with your provider, and the charges vary from minimal to free.

As you can see in the next image, I've "gone live" with my Web page—it's playing from my account to my Web browser.

Closing thoughts

One of my editors had an arm-wrestling contest with me once over the use of the word "simply" in a computer book. She insisted that by its nature, nothing is simple with computers, computer software, and the Internet. And she's right. What I've provided you with in this article is the absolute least you need to know about the process of getting an image onto the Web. Please check out other articles on this site that expand upon the process, and check back here next month when I'll remove the haze of TechnoSpeak from some more really cool graphics stuff you'll want to learn!

About the author

Gary David Bouton is a seasoned advertising art director who is familiar with traditional design tools and their electronic equivalents. He has written over 14 books on computer graphics, from modeling to multimedia. Mr. Bouton, along with his wife and co-author, hold four international awards in desktop publishing and design. Visit his web site.