by Barbara French
At this point, we turned this column over to Barbara French for a while. Barb is well known on the Internet as the webmaster for the Fanciers Breeder Referral List and she works with images for the web a great deal. Here's her advice:
Processing photographic images for the Web involves two potentially conflicting issues: you want it to look great and load fast. This can be a tricky balance to strike. Images with fewer colors that are saved at lower quality load faster than complex images saved at high quality. However, if you know some of the truth and tricks of image processing for the Web, you can often strike this balance very nicely.
The quality of your photographic image depends on how you scan and process it. The speed at which the image loads depends on how you prepare it for Web display after you've processed the picture.
In general, JPEG is better for complex photographs than GIF format, as it can handle millions of colors and works best when the colors are graded subtlely. GIFs are best for pictures that encounter large areas of flat color, such as illustrations or cartoons. GIFs also only use 256 colors.
That said, you still might want to use GIF for your file format for Web use. For one thing, many cat pictures do not use millions of colors, but can be easily reduced to 256 (or less -- more about color reduction later). GIF also has many advantages for Web use that JPEG does not. GIF images may be interlaced, meaning that they seem to "fuzz" into focus gradually, which means they load faster -- or give the appearance of loading faster. You may also make GIFs transparent, meaning that if you can turn the background of the cat picture into a single color, you can make the background transparent and have a picture of your cat seeming to float alone on your Web page. This is very attractive and there are many good examples of this on many cattery web pages.
There is a new JPEG format called "progressive JPEG" that will allow interlacing of JPEG images. However, most browsers do not recognize progressive JPEG format yet.
To process a great Web photo, follow these tips (explanation to follow):
Scanners vary in how they scan pictures. A scanner is basically a very fancy photocopy machine that transfers the picture into a digital format rather than spitting it out on paper. These machines vary widely in the quality of the scanned results. Most scanned pictures will come out much darker than the original. To do this, you may have to increase the midpoint setting on the scanner program. My scanner returns fairly close-to-original color if I set the midpoint at 20%, but individual scanners will vary. If your picture is dark, increase the midpoint.
Save the scanned image initially as JPEG (.jpg).
Open the picture in a program designed to view and change JPEGs and GIFs. The end of this article lists several for DOS, Windows, and Macintosh. I use Adobe Photoshop, an expensive tool, but the best on the market for this kind of work.
The first thing you will want to do is crop the picture. Cropping means getting rid of extraneous background. Many cat photos have as much as an inch of background with no cat in it. Get rid of it.
Second, decide how large you want the picture to be. You may be tempted to make the picture as big as possible, but big pictures take forever to load. A good size is between two and three inches tall. Some programs, such as GIFConverter for the Macintosh, allow you only to measure this by pixel height, not by inches. In this case, you may need to keep a ruler near your monitor and play with the scaling until it's the right size.
Important: Never scale a picture up if you can avoid it. While you lose relatively little definition and clarity of a picture by reducing its size, there is nothing that ruins a clear, crisp picture faster than attempting to increase a scanned image's size. If you must increase a picture, try to increase it by no more than 10%, and keep the picture's resolution as high as possible.
Most browsers on the World Wide Web only display 72 dpi resolution. For this reason, you will need to reduce the resolution of your picture to 72 dpi. Reduce the resolution to 72 dpi only AFTER you have finished cropping and resizing the picture. Reducing the resolution should be the absolute last step of picture processing. If you reduce the resolution before you reduce a picture's size, you will lose a lot of picture definition and clarity.
There are a number of things you can do to a picture to save load time, or bandwidth. Pictures that take up less memory load faster, and there are ways to do that other than by making the picture smaller: JPEG compression and color reduction.
If you are working with a JPEG image, you can save the JPEG file as one of four levels of quality: Maximum, High, Medium, and Low. While you would think that the quality difference between Maximum and Low would be considerable, with some images there is little visible difference between the two. If you can, try saving four copies of the image at each quality level. A picture saved at Maximum quality can take up as much as twice the memory of a picture saved at Low quality, and a picture that takes up less memory loads faster. Use the picture with the lowest quality setting that is still acceptable to save load time.
GIF files can benefit from color reduction. All GIFs are saved at 256 colors, you can often reduce the colors without a noticeable affect on picture quality. Some programs allow you to define the number of colors. Try saving it at 150 colors instead and see what happens. You may need to play with this to see what works for you. Reduced colors translate to reduced memory allocation and load time.
MACINTOSH programs:
DOS programs:
WINDOWS programs:
