Blog

How to Scan Images For The Web

It’s easy to screw up an image scan. You’ve seen them: blurry, bleedthrough from the back if they’re from newspapers, bad color, stretched, or just poor resolution quality. How can you create a perfect scanned image for your website?

Start with a really good image yourself: preferably something on a matte, not shiny, medium, and something that does not have a patterned grain to it. Ideal is something that has been produced on bright white paper. It’s more likely, however, that you’ll have a photograph or a newspaper clipping. These are okay, but you may need to rescan the photo several times before you get one that doesn’t have a glare to it.

Newspaper clippings should be scanned with something black behind the paper to make the bleedthrough of the page printed on back not quite so bad. You may still need to take the resulting scan to Photoshop to clean it up; a color correction and despeckler will take most of it out.

When you scan, the scanning program will ask you what resolution you want to scan at. Start with a good resolution, at least 600 dpi, and later, when you’re editing the image to use online, you can reduce it to the 72 dpi that is appropriate for on-screen display. Another option is whether you want full-color or grayscale; if the image is black and white, ALWAYS reduce to grayscale. If you don’t, you’ll wind up with foreign color speckles or auras in the image that will need to be removed, and that’s a lot of work.

After you’ve scanned it, you’ll need to decide what format to save it in. For simple two-color or few-color images (like cartoons or text), save it as a .gif. If you need photographic quality, save it as a .jpg. You don’t need to worry about any other file formats unless you’re planning to use it outside of the Internet.

Also, when you’re ready to save your image, reduce its size to 72 dpi, as suggested earlier. This will ensure that the image you insert into your web page is exactly the size you want it to be. Why not just scan it at that size? Because it picks up bad rastering – that’s a grid pattern that your picture is really saved in – and the edges of each color look bad.

You should also understand what RGB means. The primary colors you were taught in grade school are yellow, red, and blue. When you’re creating a file to display using a light technology, however, they are red, green and blue. Yellow is produced by adding red to green in order to cancel out the blue. Your image file is saved in pixels; each pixel has a specific RGB value attached to it that determines its actual color. The values are numbered from 0 to 255; an RGB of 0,0,0 is black, while an RGB of 255, 255, 255 is white. This isn’t important in saving basic files, but it will be important if you need to start correcting colors.

What does 4/0, 4/1, and 4/4 mean?  It has to do with CMYK and the printing world. Make sure to check out that post and learn more about it!