SCANNING & PREPARING COLOR PHOTOS FOR WEB DISPLAY (& PRINTING)
Featuring "Step-by-Step" Instructions for scanning & adjusting color photos images to achieve a balance between loading time, viewing quality, & file size.
INTRODUCTION:
SCANNING IS NO BIG DEAL!
It's easy! Right?
What's so hard about scanning a photo publish on the web?
Download Time; Viewing Quality; File Sizes; GIF,TIF,JPG,TGA, or BMP?
That's the ONLY stuff that's hard to get right!
Getting over the "sticker shock" of purchasing equipment ($ 250 to $1,200 for a scanner), or the $10 to $20 per image charge of a service bureau turns out to be the easy part!
Effective Web usage requires small image file sizes to minimize loading time. But small files don't always provide acceptable viewing quality.
Suddenly you find out how much you don't know. The things that can be done to an image are amazing. The combinations and permutations of image variables seem infinite. And confounding!
Images being prepared for Printing should have larger file sizes, but how large is large enough? Working with files capable of more quality than your printing requires may cause computer slow downs every time you work with the image.
PURPOSE OF INSTRUCTIONS:
These instructions have been prepared to assist you in quickly preparing color images from color photographs that will be an efficient size and of sufficient quality for display the on Web. Instructions specific to preparing images for Printing with Laser or Color Ink Jet printers have also been included. Without having to understand "what" happened!
Procedures for drawings, computer generated art, and black & white images may vary considerably from those presented here. Images to be used for "commercial" printing also may require different procedures.
I've tried to include only the necessary, basic instructions for the scanning, sizing, and storing of images. Hundred of adjustments could be make to improve or alter an image. Most, however, are beyond the understanding of this writer and [IMHO] beyond the needs of the average Real Estate Agent.
These instruction are only "one way" to do the job. They are based on my interpretation of PhotoShop Maillist contributions, a review of the Adobe PhotoShop LE User Guide, information gleaned from visits to many web sites with graphic resources, e-mail from knowledgeable visitors, and my own experiences. I am far from an "expert" in these matters, but am learning to become an efficient "user". Your suggestions for improved procedures are solicited so they can be shared with all our visitors. Contact David Moninger, Webmaster
A COMMENT ABOUT EQUIPMENT, SOFTWARE & SCANNING SERVICES
Many print shops and some computer stores will scan your pictures at a cost of $10 to $20 per image. Larger offices are purchasing scanners for agents use, and equipment prices are not too high for the motivated tinkerer. Handheld color scanners ($250 and up) are a bit fussier to use than flatbed scanners ($350, $550, $800 and up). The bundled, free software works fine, even thought it does not include all the bells and whistles of the full packages ($400 and up).
Low price scanners seem acceptable for most Web publishing and casual print images - but not for commercial work. The key is in the software. Adobe's Photoshop, Corel Paint or a similar high-end package will be desired by the fastidious user. The "light" versions packaged with the scanner should be sufficient for most of us.
My scans are done on an Epson ES-1000C flat-bed color scanner ($800 range) using the Photoshop LE software that was included. The scanner is connected to a NextGen 586/90 powered PC (32 MB), running Windows 95. Image processing time has not been a problem with this setup.
Even if you use a scanning service, you may be happier with the results if you understand what you need and can communicate that to the technician doing the scan. Not all the fine young people who work part-time at the local franchise print shop have mastered the required scanning skills, nor understand the file size concerns, for web image usage. Your understanding of this information can help you ensure you receive what you need the first time.
STEP BY STEP INSTRUCTIONS
We all know how slowly some pictures download when viewed on the web. Fortunately it is possible to create "reasonable" quality images that load relatively quickly. Come on, I'll show you how I do it.
Print out these instructions and just follow the steps. It really IS easy!
denotes Adobe Photoshop LE specific instructions . I suspect that other acquiring software programs will provide similar capabilities in a similar manner.
To keep a picture "square", insure that it is placed so that the scanner will correctly align the top and sides. For Handhelds, that means buying or making a "jig" to hold the photo. For flatbeds, just be sure it's tight against the guides.
(IMAGE / ROTATE / ARBITRARY will allow you to "square up" an image after scanning.)
4" x 6" glossy prints work well. Bigger is better, to the point that multiple scans are required, after which you must "sew" the pieces together - too much trouble for me!
B. - GET ON THE "TWAIN"
Some Word Processors and most graphic design programs, like Photoshop, have an "ACQUIRE" function. Search HELP for "Acquire" to see if your program can directly acquire an image from the scanner.
Acquire initiates the TWAIN software, which is specific to your scanner. Sort of like a "driver". The actual scanning is controlled by the TWAIN software, regardless of the Acquiring program used to initiate the scan.
FILE / ACQUIRE
C. - HOW MANY COLORS ARE THERE?
Scan at 16 million colors. This provides flexibility if you want to "correct" any lighting or development deficiencies of your scanned image.
D. - DPI OR DIP?
Set the scan "resolution", "picture depth", or "dots per inch", to at least 150 dpi. If you're going to be color printing rather than publishing on the Web, 300 dpi or more is better.
NOTE:The large file sizes you generate at this step will NOT be the final file size when you are done. However, on "slow" computers, or those with limited disk space, you may have to give up captured quality to increase your image development efficiency.
For example, for a 4x6 color photograph:
16 million colors at 300 dpi = 6 Mbytes, while 256 colors at 300 dpi = 1.99 Mbytes
16 million colors at 150 dpi = 1.49 MB, while 256 colors at 150 dpi = 509Kbytes
To really "speed" things on a "slow" computer, when scanning for Web use only, try:
16 million colors at 72 dpi = 350 Kbytes, while 256 color at 72 dpi = 117Kbytes
THE SIZE OF THE IMAGE FILE YOU WILL DISPLAY ON THE WEB WILL BE MUCH SMALLER THAN THESE FILES!
E. - PREVIEWS OF COMING ATTRACTIONS
If you're using a flatbed scanner, a "Preview" scan is next. Handhelds do not offer this option, so skip to the next step.
With the "preview" on the screen, use the mouse to "frame" the portion of the picture desired in the final scan. Be generous, it is much easier to "crop" out unwanted portions than it is to rescan because part of the desired image was lost!
F. - IMAGE SIZE (SCALE)
Keep at default size of 100%
NOTE: I suggest ignoring all the image enhancing options of the Twain unless:
The original is very "poor"
and - Your acquiring program does not offer sufficient adjustment tools for correction after scanning
and - You know what you're doing or have lots of time to spend experimenting!
It is important to ensure the twain is set at your desired default or calibrated settings. Mine does not seem to automatically reset
G. - FINAL SCAN OF THE IMAGE
Check that your color selection and resolution are correct, then scan the "framed" image into the Acquiring program. This final scan produces the electronic image that you will be working with. If the original has been moved since the preview, start over with Step 1. A. for best results.
H. - GET OFF THE TWAIN
HELP: I now have to "close" my Twain to be able to work on the "acquired" image in Photoshop. Is this unique to the Epson Twain or is this a universal nuisance? Please, would someone let me know?
I. - SAVE THE SCANNED IMAGE FILE
Save the file in the native format of the acquiring program. (This is *.PSD for Photoshop, use JPG if no obvious choice, to preserve all colors.) If you need to make changes in the image later, this will avoid having to find and rescan the picture.
If you use a scanning service for the original scan, but plan to make the rest of the adjustments yourself, ask for JPG format to insure compatibility with most imaging programs.
NOTE: DO NOT SAVE AN IMAGE TO RECEIVE FURTHER ADJUSTMENT IN GIF FORMAT until the very end!
FILE / SAVE AS with "Photoshop 3.0 (*.psd)" selected as the Format Type, (or *.jpg if the image is to be manipulated in another program).
"Cropping" defines the portion of the total image that we desire to display. Use a cursor tool to the select the rectangular area that you want to keep (inside the box is kept, outside is discarded).
Then "crop" the image.
This is useful to correct oversights in foreground, background, or image centering during the taking of the picture.
The Marquee tool allows definition of the crop area, then IMAGE / CROP.
B. - ENHANCE / COLOR CORRECT IMAGE
If the image is of poor quality, or special effects are desired, make the desired enhancements now.
DO NOT MAKE ANY CHANGES THAT EFFECT COLOR MODE such as saving as a GIF, defining as INDEXED COLOR, etc. I am told this mode change must be made after resizing to avoid significant image degradation.
Because image enhancement is a "trial and error" operation for most of us, be sure you become familiar with the Undo, Revert, Reload, etc. options that allow you to back up a step or more.
I save, using "save as", a new image each time I think I have made a "keepable" improvement. Save in same file format ( *.psd, *.tif, etc.) that you used for saving the original scan. I might save 4 to 6 intermediate images during this stage. This allows me to easily back-up and try a different tack, without having to go all the way back to the original scan. (Be sure you delete these intermediate files when you're all done or you will soon be buying more hard disk!)
C. - RESOLVE THE FINAL RESOLUTION
After all corrections have been made, the final resolution of the image should be set.
For Web Display, Resolution can be set at 72 dpi.
For images to be printed the resolution should be the maximum the printer supports or the maximum file size you can process efficiently on your computer, which ever is smaller.
Resolution affects the physical image size and thus is often set on the same screen that allows size adjustments.
IMAGE / IMAGE SIZE / RESOLUTION (pixels per inch)
D. - SIZE THE IMAGE FOR FINAL PRESENTATION
The largest image that can be displayed on the smaller, low resolution computer displays is an image around 480 pixels wide. If you're going to the Web with your image you should strive to keep the final size under 420 pixels wide to allow for browser borders, etc. This will insure that the viewer will not have to use the scroll bars to see all the picture.
Consider 240 - 250 pixels to be half a screen wide. Thumbnail pictures are usually 75 to 150 pixels wide. This image " " is 11 pixels wide.
Using the Resize or Image Size facility of your program, enter just the critical dimension (width or height). The other dimension will be calculated automatically if you insure that the "Proportional Constraint", "Preserve aspect ration", etc. box is checked. This avoids "skewing" of the image.
If you find you must Increase the number of pixels, consider scanning at a larger dpi or scale up the image during the initial scan to produce better quality images.
Do not assume the picture you're seeing on the screen is the size that you would see when displayed on the web page. Some image programs automatically adjust image size they display when you are working with them. View the Image at "FULL", "NO ZOOM", etc. to see the actual physical size.
WINDOW / ZOOM FACTOR / 1
Images to be PRINTED are size adjusted in the same manner, except the resolution is set higher. You may find it more convenient to work in inches, rather than pixels, when dealing with Print Image sizes.
E. - CAN THE COLORS!
(Do AFTER the image has been sized, just before creating the "final" image file. I'm told this helps retain reasonable quality)
256 is the current "standard" computer color capability (SVGA). VGA screens only display 16 colors. Considerable file space is used to allow representation of 16 million colors. One way to minimize file size is to reduce the number of colors.
E. - 1. If the original scan was done at 16 million colors, go right to step E. - 2.
For scans done at 256 colors, an Indexed Color mode image was created, and is already reduced to a 256 color table. If you want to reduce this number further, you may need to first convert the image to a 16 million color format (RGB format for instance).
The only way I have found in Photoshop LE to reduce the number of colors is during the change from RGB mode to INDEX COLOR mode. This brings up the "Index Color" screen that allows specification of the number of colors or the number of bits per pixel. Can any one tell me of a better way?
E. - 2. The less bits required to represent a pixel (the less number of colors to be represented), the smaller the file size will be. We want to remove as many bits per pixels as possible, without ruining visual quality. For color photographs, start by specifying 200 colors.
MODE/INDEXED COLOR (rather than "RGB COLOR". Check that "Palette" is set to "Adaptive" and "Dither" is set to "Diffusion". Then Click on OTHER in the "Resolution" section, and set the Colors to 200), if not already less than 200.
If this revised image is NOT of acceptable quality, immediately Cancel, Undo, or Revert, etc. back to the last 256 color image, and skip to Step 3.
If the revised image is acceptable, save it with a unique name in the originally scanned format, and then try lesser and lesser bits per pixel until the quality become unacceptable. Save the last acceptable image, by using Cancel, Undo, etc. to back up from the first Unacceptable image.
Some art work can be reduced to 3 or 4 pixels, especially if only a few colors are present. Photographs rarely are acceptable below 5 bits per pixel.
You are ready to save the final image, and it's time to decide on file format type. All graphic browsers support GIF images, most support JPG. These are the only viable web choices available today.
For photo images larger than 150 x 200, JPG file format usually provides better quality with quicker load times than GIF's. Since a small percentage of viewers will not view JPG's "in-line", some web designers choose not to use this format.
GIF's seem to work best for drawings and "thumbnail" size images, but they often produce unacceptable quality when trying to use full sized color images with reduced file sizes. If GIF is a requirement, then you will have to live with larger file sizes and longer downloads.
For printing, GIF, or BMP, or other formats may provide superior quality compared to JPG. Download time is no longer important and larger files can be tolerated. File sizes up to 1 million bytes might be reasonable for images to be printed, as opposed to my 10k Goal & 20k Upper Limit for Web Page images.
If background transparency is desired, the GIF format must be used.
A. - SAVE THE FILE AS A JPG
Save the final image with the desired file name in the proper directory. (Note that HTML on 32 bit systems is case sensitive and so are file names. Be sure your new file has the proper format extension, and letter case!)
To save your file in JPG format, you should be in RGB color mode.
FILE / SAVE AS, then find the "file format type" selection and select JPG.
Navigate to the desired directory/subdirectory, name the file, (Be sure the file extension - JPG is properly entered), and save the image to disk.
When creating a JPG file, you may have the opportunity to select an "image quality" or a "compression %". Adjusting the File Compression allows savings in disk space and transmission time, with a potential degradation in quality of the image. Selecting "LOW QUALITY" or compressing the file to 25% of it's maximum (75% compression) usually will still provide acceptable quality and a reasonable sized file (less than 20k).
B. - SAVE THE FILE AS A GIF
Save the final image with the desired file name in the proper directory. (Note that HTML on 32 bit systems is case sensitive and so are file names. Be sure your new file has the proper format extension, and letter case!)
To save your file in GIF format, you should be in INDEX COLOR mode.
FILE / SAVE AS, then find the "file format type" selection and select GIF.
Navigate to the desired directory/subdirectory, name the file, (Be sure the file extension - GIF is properly entered), and save the image to disk.
Several people and resources have provided specific assistance for the preparation, revision, and advancement of these instructions. To thank them for their efforts, I have provided their name, e-mail address, and a link to their Home Page URL when available.
FIRST, many of the pages at the Island Time Web Site were completed before this research. Therefore , not everything at Island Time was done following these instructions. Changes may eventually be made in the old pages, and all new images will follow these guidelines in the future.
SECOND, the above instructions provide the best results based on my research thus far.
A clear, fast loading picture that can be viewed by most web browsers has been my goal. Managing the interaction between the variables and arriving at a compromise solution is a subjective matter. If you have found a "better" way, have divergent results, or want to discuss this subject in more detail, please Contact David Moninger, Webmaster with your suggestions or comments
Thanks for stopping by. Your comments and suggestions are always welcome, or just say "HI" to let me know you were here.
denotes Adobe Photoshop LE specific instructions . I suspect that other acquiring software programs will provide similar capabilities in a similar manner.
Adobe's Photoshop
Pleased to have been awarded the Pure Gold Web Site Award by the Real Estate Library
