Wednesday, July 19, 2006

Copying an Image for the Web - Part 1.

There are many who would like to copy an image, perhaps a painting or other original piece, for placing on their website. If we leave aside professional services, then there are two prime methods to accomplish this, using a scanner or a digital camera.

In this posting I will look at using a scanner. Modern flat-bed scanners are quite cheap nowadays and are capable of surprisingly good results. The trick is to use it correctly, then if necessary tweak the image in a photo editor - this is not as scary as it sounds!

As each scanner is different I can only talk in general terms. To understand what is going on I will also need to talk through a few numbers - don't worry, there will be no advanced maths going on.

Let us assume we have a drawing 10" by 8" (25cm x 20cm) that we wish to copy. First we have to decide on what the image will be used for, and what its size will be.

Most scanners can adjust the resolution in pixels per inch. This is the number of dots of colour that make up and image. If we want to take the digital file to the local photo shop to get it printed to the same size, we need to scan it at 300ppi (pixels per inch) as 300ppi is the standard resolution for a photographic image to be printed (although you can get away with less than this). Adjusting the printer settings to this resolution will give the optimal results.

Things start getting messy with other print sizes as they are not all the same ratios. For example, half (in length) of a 10" x 8" is 5" x 4" whereas the nearest standard print size is 6" x 4". The most common way to overcome this is to print larger and crop to the size. We do not have to get too precise, modern printing can accommodate just about anything. For a 6" x 4" print a resolution of 150ppi is adequate. This will also give a smaller file size. If you do not adjust the resolution then no harm is done, the equipment at the photo shop will still work OK.

Now assume we want the picture to be printed larger to 20" x 16". Here we are effectively magnifying the image, so ideally we want to scan at 600ppi. Again, it is not too much of an issue if this was left at 300ppi, although you will see that the fine detail is lost when you view close up.

You will see we are nowhere near the resolution limits of modern scanners, which are typically 2,400 to 4,800 ppi. This resolution would be used for when you need to magnify a small image, such as a slide (transparency). If you used this resolution for a normal print or drawing, you would end up with an extremely large, unwieldy file.

Copying for a website is a different proposition. Here we need to know the final image size, not in inches or cm, but in pixels. The pixel count for a web image is a lot less than for a print. Even modern screens cannot resolve to the level of detail that a print can do. Typically the resolution of a screen is 72ppi to 96ppi.

To keep to nice round figures, let us assume we need a size of 1000px x 800px (which is a pretty large image on a web page). For this we need to scan only at a resolution of 100ppi - not a lot. For a more typical image of 500 pixels wide, we only need to scan at 50ppi.

In practice, all this messing around changing settings is a bit time consuming and easy to forget. What I tend to do is scan at 300ppi and adjust the file in a photo editor for the output I want. This makes it easy if I want both a print and a web image.

The file format is important. JPEGs (.jpg) are best for photographic images and are the same type of file output by digital cameras. GIFs are best for large areas of solid colour such as you see in logos and posters.

Different photo editors do thinks in different ways with different names or menu options. Look for resize, rescale or resample, read the instructions for these facilities and choose the appropriate one for your needs.

Many photo editors have a ?save for the web? which makes it easy to get an image ready for the web. You normally need to adjust two settings. The first is the image size, which is usually expressed in pixels, for example 500px by 400px (px = pixels).

The second is a quality or compression function. Jpeg files compress the data in the file to make the file smaller. The amount of compression can be adjusted but there is a trade off. The more you compress, the more detail is lost (permanently) - hence the quality drops, but the smaller the file becomes. Many photo editors show you a 'before' and 'after' so you can see how much the quality drops before it gets too noticeable. The good news is that you can normally compress quite a lot for a web image before the quality suffers.

Finally, what if the original image is too large for the scanner. The options are:

1) photograph it

2) use a professional service

3) Use some stitching software to stitch 2 or more images together.

Stitching software needs another posting...