Where Antiques meet the Internet

The purpose of publishing images on the Internet is to convey information about an object. Images have two qualities that need to be balanced, file size and image dimensions. If the file size is too large, it takes too long to load. If the image dimensions are too small it conveys no information at all.

Digitizing an image is the process of capturing an image in a digital format. The digitizing equipment samples the image at regular intervals and converts it into a series of discrete pixels (or picture elements). Each pixel has an x-y coordinate and a digital value. The x-y coordinate describes where the pixel is in the image, and the digital value describes the color of the pixel. The more pixels, the larger the image dimensions (good) and the larger the file size (bad). So, once an image is captured, it will probably need some processing in order to achieve a compromise of image dimensions versus file size.

The equipment required for digitizing depends on the media you begin with. Here are some suggestions:

• Photographs and Slides can be digitized with a flatbed scanner (less that $100) and currently yields the best quality picture but also costs the greatest effort since the film must be purchased, developed and scanned, all before the image can be processed.
• Videotapes, laser discs, and a live signal from a video camera can be digitized with a video capture card, common on many new computers.
• Film can be professionally developed and stored on a CD or made available on the developers web site.
• The most practical solution is to take your pictures with a digital camera, especially since the cost of digital cameras has dropped so much.

My recommendation is to purchase and use a megapixel (more than a million pixels) camera. By way of example, a 3.2 megapixel (i.e., 2048 pixels times 1536 pixels = 3,145,728 pixels) camera now costs less that $275. A digital camera will quickly pay for itself because there is no film to buy, no development to pay for, no trips to and from the developer, no scanning and the image is available almost immediately.

Although they are more expensive, I prefer cameras that store images on removable media. When the media is full, you simply replace it and continue taking pictures, you don't have to stop to download the images to your computer. These media include floppy discs, CDs and memory sticks. My preference is the CD because they cost only pennies each, hold 156MB and are archival quality. Floppies are inexpensive, but hold only 1.44MB. Memory sticks hold 128MB, cost about $50 (the price is dropping) and are not archival.

Using the right lighting will save a lot of time spent on image editing. I prefer to take my pictures outdoors on a bright day but not in direct sunlight, my covered front porch works well. When I have to take pictures inside I use 500 watt "daylight" bulbs on tripods with reflectors. Fluorescent bulbs are too blue and incandescent bulbs are too yellow.

Other things that reduce image processing include:

• mounting the camera on a heavy tripod, and
• using the timer to reduce camera shake
• set the camera to large format or fine quality
• place the camera as far from the object as possible and them zoom to reduce lens distortion
• fill as much of the image area as possible with the subject, even if you have to rotate the camera for a better fit.

One example of image processing software is LViewPro, which can be downloaded from the internet for $40 and, once installed, does all the things outlined below. I use this free software, The Gimp for Windows although it is more difficult to install and use. Software may also come with the camera and I am sure there are many other image editors that are acceptable.

Below are the basic steps to prepare an image for use in a web document. Because of the large dimensions and file sizes, I did not load all the examples on this page, there are links to them instead. Click on the links to see the examples. They will open in a new window, close the new window to return to this one.

1. Download and Rename
2. Rotate
3. Crop
4. Reduce the Dimensions (resize)
5. Enhance
6. Reduce bit-depth
7. Finishing Touches
8. Save the image in the proper format

1)  Download and Rename
Create a folder to keep all the images for your web site in one place. Download all the images to this folder. Once there, "right click" on the file name then use "Rename" to give it a name that is meaningful to you; or, immediately after opening a file to edit it use "File" and "Save As" to rename it. This accomplishes two things: first, it makes it easier to associate the image with the item; and second, it preserves an original version should you want to start over. You can delete the original when you are sure you will no longer need it.
Up

2)  Rotate
You may have turned the camera to fill the frame as fully as possible. Your image editing software will have a means for you to rotate the image so that the object is erect. In fact, you may be able to rotate the image a degree or two at a time if it is not quite right.
Up

3)  Crop
Here is a link to an original image, dimensions - 1024 pixels by 768 pixels, file size - 107KB Crop the image to remove any part of it that is not important. This will reduce both the image dimensions and file size. Here is the cropped image, dimensions 680 pixels by 694 pixels, file size now less than 91kB
Up

5)  Enhance
A digital image is an array of numbers, with the numbers mapped to a palette of colors. When processing an image, you can change the digital values of the pixels (i.e., with filters), or the way the palette displays those values (i.e., by adjusting brightness and contrast). There are many options available for enhancing images. Experiment with different image enhancement techniques - but make sure you have a save a copy of the original image in case your experiment fails. HINT:  You can always undo the last several things you have done by clicking on Edit/Undo.

Here is the image with brightness reduced and contrast increased.

Here is the image after sharpening.

Here are the three versions side-by-side.
Up

6)  Finishing Touches
The last editing step is to add Text, outlines, and arrows if you desire. If they are added earlier in the process, they will be corrupted by the resizing and enhancement. If you have the option, use anti-aliasing to prevent text and lines from looking jagged. Creating Killer Web Sites has a nice demonstration of anti-aliasing as does Creating Graphics for the Web designer.
Up

7)  Save the Image in the proper format
In general, photographs are better saved in jpeg (or jpg) format. Jpeg format is a scheme devised to compress image files where the amount of compression applied is variable. More compression means a smaller file size (in kilobytes) and reduced image quality. You can choose the amount of compression when you save the image by clicking on "File" and then "Save As". This brings up a 'Dialog Box', where you can set the "Compression Factor" or "Quality Factor" or something similar. Once an image has been saved as a jpg, some data is lost. Therefore, you should save it as the last step, the lost data is irretrievable (unless you remembered to preserve the original image).

Because many internet connections are slow and because image files contain so much information, Web graphics are by necessity compressed. Different graphic file formats employ varying compression schemes, and some are designed to work better than others for certain types of graphics. The three primary Web file formats are JPEG, GIF and PNG.

For details on JPEG and GIF formats, visit Graphic File Formats. For details on PNG formats, visit A Basic Introduction to PNG Features

Recommended books on web graphics:
Creating Killer Web Sites
by David Siegel, Hayden Books, 1996.

Designing Web Graphics: How to prepare images and media for the web
by Lynda Weinman, 3d ed. Indianapolis, Ind.: New Riders.

Designing for the Web: Getting Started in a New Medium
by Jennifer Niederst, Edie Freedman (Contributor), Oreilly & Associates Inc

Web Site references on style & design 
The Web Style Manual put out by Patrick Lynch at the Yale Center for Advanced Instructional Media is an well-thought out, academic approach to web design. It's been criticized for treating the web too much like a book publication.

Adobe's Tips & Techniques has a collection of seminars on advanced web page design.

Design Tips is glimpse into the Killer Web Sites book by David Siegel.
Up