Web Design Tips - Scanning images for the web.

Improve Image Quality With Proper Scans

Look around and you will find an enormous amount of bad images on the web. Compressed low resolution 72 dpi images are used on web pages to speed loading time. Just because an image is low resolution is no reason for it too look bad. Learning to handle your images properly will make you web site look much better.

Start with high quality scans. Scan images at 300 dpi and then reduce to 72 dpi. This is especially important if you are scanning printed material, like an existing brochure. The dot pattern will show up if a printed image is scanned at 72 dpi. Many scanners have the default set to scan at 72 dpi or ppi and you will need to change this. All scanners are different so you may need to check your help file or scanner manual to locate the settings.

Postcard scanned at 300 dpi then reduced to 72 dpi.	Postcard scanned at 72 dpi. Dot pattern is clearly visible.

You won't notice much difference in a photograph scanned at 300 dpi or 72 dpi. If you or your web designer plans to do any work on the image, such as removing imperfections, removing the background or cropping then it is still better to scan at 300 dpi. The larger images are much easier to manipulate because they contain more pixels. Scan time is less than 60 seconds on the average image. Why not do it right and make your page look it's best. *Scanning at high resolution makes very large files so if your computer is short on RAM you may find it easier to scan at 150 dpi, still an improvement over 72 dpi.


300 dpi photograph scan with HTML border set to 3	72 dpi photograph scan

Photographic images should be saved in compressed jpg format for the web. Do not compress the image till you have finished working with it. You loose quality every time the image is compressed. Save the file as a .tiff or .psd file until it is ready for the web. If you give your web designer bad quality scans they can not fix them. The image on the left has an HTML border around it. If you don't have the time or know how to make borders in your graphics program you can still use a simple HTML border to give the image a finished look on your page. <IMG SRC="gir300dpi.jpg" WIDTH="132" HEIGHT="146" BORDER="3"> Using height and width tags on your images will speed your page loading. Downsize your image to the size you want in your graphics program. Many people will take an extremely large image and downsize it with the HTML. This causes excessive load time because you are really just loading the large image file into a small space. Start with the best possible image quality for the best final output. Prices on digital cameras have dropped considerably over the years. If you have a low resolution camera it may be time to upgrade! Visit Cameraworld.com if you need to upgrade your equipment.



Need a quality scanner fast? PC Connection ships overnight!