Search billions of records on Ancestry.com
   

Scanning Photos for Web Publishing

photoOne of the most popular additions to web pages is photographs. A quality image can add a great deal to the appeal of your page; and if you have a genealogy site, it is wonderful to be able to share your treasured photographs with family and new found cousins. But whether you are adding a single image to your home page, or creating an album of family photos, your photo reproductions should be the best possible quality.

That photo of your grandson should not look like he just crawled through the can of green paint you used to paint the porch floor. Faded photographs, or ones that have darkened with age can and should be improved with a graphics program. Damaged photos can be retouched easily on your computer. Gamma and tint, brightness and contrast, can all be corrected using your scanner or graphics software. Learn to use your software's tools and take advantage of the magic they can perform before putting your photos on line. Remember, the whole world will be watching.

Format

The preferred image formats for web publishing are GIF and JPG. PNG is a relatively recent format introduced for web graphics to replace the proprietary GIF format, but is not fully backwards compatible for older browsers. The GIF format is limited to a maximum of 256 colors, and is intended for simple graphics like buttons or icons, and some textured backgrounds. The more colors there are in the image, the larger the file size will be.

Continuous tone photographs (either color or gray scale), should be saved as JPG files. JPG is capable of reproducing millions of colors or tones. But JPG files can be compressed, which allows you to create a reasonable file size from a fairly large original print. Photos are occasionally saved as GIFs, but the limited color palette can sometimes result in a cartoonish quality; and the file size will almost always be larger than the same photo in compressed JPG format. The photo below happens to look fine as a GIF, but look at the difference in file size!

Scan saved as JPG
(25% compression) = 10K
Scan saved as GIF = 28K
Taj jpg Taj gif
"Taj" 1985 Pat Asher

File Size

What is a reasonable file size for web publishing? There are no hard and fast rules, but a good rule of thumb is to keep your total page to no more than 50 to 100 Kilobytes. This includes everything on your page: HTML, graphics, JavaScripts, and scanned images. A 50K page might contain 15Kb of text/HTML, and 35Kb of graphics and photos. So, if you're using just one or two images on your page, 25Kb might be reasonable. But if the page contains several images, it's better to keep them in the 10 to 15Kb range or smaller.

While broadband (DSL or cable) internet connections can be very fast, many of the visitors to your genealogy site may still be using dial-up. Approximate download times for a 100K page using a stable connection are:

14.4Kb modem - 56 seconds
28.8Kb modem - 28 seconds
56Kb Modem - 14 seconds
256Kb (Std) DSL - 3 seconds
Standard Cable - 200 millisec

Resolution and Image Size

photoHow many times have you cut short your visit to a web site because you were tired of waiting for the images to download. Many online photos take too long to download because they've been scanned at a resolution for printing. Photos for printing should be scanned to match the printer output, commonly 300 or 600 dots per inch. This results in a same-size print of optimum quality, but can make a huge file that takes forever to download over the web.

Scanning for web publishing at the higher resolutions used for printing does not result in better image quality. What it does do is create a large file (which takes longer to download), and produces a larger on-screen image. The 1-3/8 x 1-7/8 original print at the left was scanned at 72 ppi, and saved as a JPG file with 10% compression. The image size is 100x132 pixels and the file size is under 5Kb. Scanning the same photo at 300 ppi results in a much larger image and a file size of 36Kb.

Most monitors have a screen resolution of about 72 pixels per inch, so many people mistakenly assume they should scan all of their web photos at 72ppi. While this may result in a reasonable file size, it is not necessarily the optimum choice for web publishing.

What is the best resolution? Scan at whatever resolution will produce the desired image size on-screen. The formula is:

Screen size/nominal photo size=scan resolution

The new flat screen monitors have exploded both size and affordability, and 2048 pixel displays are no longer rare, but it is still good practice to design to the smallest display your visitors are likely to use, i.e. 800 x 600.  Since part of the screen is taken up by menu and scroll bars, let's work with a nominal size of 740 x 500 pixels. A 3 x 5 inch vertical print scanned at 300 ppi results in a 900 x 1500 pixel image, 3 times the height of the display.

To scan a horizontal 5x3 inch print to fill the screen side to side, divide 740 pixels (the horizontal screen measurement) by 5 inches (the horizontal dimension of the image) and scan at the resulting 148 ppi. That's right! There is no law that says you have to scan at 72, 100, 200, 300, or any even number of pixels per inch.

If your scanning software has preset choices, choose the next smaller number than what you have calculated as the optimum resolution.


photo

The Right Size

The 72 ppi scan of this print produced a thumbnail image, and the 300 ppi scan results in the visitor having to scroll to see all of the image if s/he uses a small display. Most of your site visitors will be uncomfortable with this. The same print scanned at 145 ppi (200 pixels/1-3/8 inches) results in an image that is 201 x 264 pixels. It is large enough for easy viewing, yet still fits comfortably on a small monitor.

This scan was saved as a JPG with 10% compression, size 11Kb. More compression would produce an even smaller file. However, since this photo booth image was not "sharp" to begin with, more compression could result in some loss in quality. Most photo scans in JPG format can be saved with compression up to 50% before the quality loss becomes objectionable.

photo

Enlarging Digital Images

If lower scan resolutions produce smaller files, why not scan everything at 10 or 20 ppi and just enlarge the display in the browser? There are limits to what computers can do. Even the best graphics program can't create detail that isn't there. They enlarge the image by duplicating existing pixels. The image at the right is the 72 ppi scan enlarged to 201 x 264 pixels. The resulting pixelation causes a serious loss in image quality.


photo

Reducing Digital Images

Reducing an image works much better than enlarging. When you rescale an image to a smaller size, pixels are discarded by sampling. While not perfect, many graphics programs do a very good job of sampling as long as the reduction is not extreme. The amount of compression you choose when you save the file will affect the image quality much more than the discarded pixels.

This image is the 300 ppi scan reduced to 201x264 pixels (about 52%)



Do not use the IMG height and width attributes to reduce an image in the browser display. These do not change the file size, so the image will take just as long to download as if you had displayed it full size. Use your graphics program to rescale the image to the desired size and save as a new file for display on your web page.

The Bottom Line

In the best of all worlds, you would always be able to make at least two scans, one for printing and one for web publishing. If you can only scan once, or if you must work with someone else's scan, it is always better to scan to a larger size and reduce rather than enlarge an image for web publishing

To learn more about scanning for both web publishing and printing, see
A few scanning tips by Wayne Fulton.

TOP

counter

Pat's Web Page Tutorials
Copyright 2000-2017 Pat Asher
http://freepages.computers.rootsweb.ancestry.com/~pasher/scanning.htm