Welcome to Blazingfibre - web hosting, website development, custom software, network administration, technical support - London-based
+44-7944-731-092

Image processing basics

  knowledgebase  :: network status

Getting an image into or out of a computer is a task that can be done well, if some care is taken; poor image quality and/or oversized images are the usual alternatives. This article explores some of the issues that are encountered when attempting to process an image with a computer.

To scan an image, the first item required - aside from an image, and an installed, functional scanner - is image processing software. The software must usually support TWAIN. Photoshop and LView Pro are two examples that both work well; Photoshop 6 is used in this example. Most image-processors work similarly, so reading this while using Paint Shop Pro is fine.

Broadly speaking, the process to be followed when scanning an image is as follows:

  1. scan the document
  2. adjust the image
  3. crop the image
  4. resize the image
  5. choose an image format
  6. save the image

scan the document

From within Photoshop, click File.. Import.. and then select the name of the device you're using to make the scan. The exact process varies between scanners, however a window will appear allowing you to control the scanner. The essentials are basically previewing the image, selecting the area you wish to scan in detail, and setting various controls such as image resolution. These steps are broken down as follows:

  1. preview the scan: this means, get the scanner to take a quick look at the scanning surface (the glass plate that you put your photos on) and display all of it on the screen. This is for the purposes of step 2. Click Preview to tell the scanner to start.

  2. select the area: this means using the mouse to draw a box around the part of the previewed image that you'd like to scan. Point at the previewed image, then click and drag to make the box. When you click 'Scan', the scanner will scan in detail just that area, and send that bit to the computer.

  3. adjust properties: this means setting such parameters as scan mode (colour, grayscale), image resolution, and scaling. These can mostly be left alone, unless you want to play - however be sure to set the image resolution to a sensible value. If you're scanning a large area at 600 dots per inch (DPI), it will consume a lot of memory. Make sure you have lots of RAM, or your machine may run slowly. Similarly, if you're scanning a small area at 72 DPI, it will be very low quality, and detail may be lost. Find a balance between image quality and processing time that suits the end application for the image. That is, if it's for the web, the image can be done quickly at relatively low quality, while if the image is to be stored over time, perhaps a larger, higher-resolution image would be more appropriate.

  4. press Scan:Click the button labeled 'scan'. The scanner will then scan the selected area and send the image to the scanner control window, which will in turn send it to your image processing software (such as Photoshop). You will need to wait for Photoshop to finish importing the image before you can edit it. Click cancel to close the scanner control window and return to your image processing application.

adjust the image

Once you have the image inside the computer, first rotate it (if necessary) so you can see it properly. In Photoshop, Click Image.. Rotate Canvas and select an appropriate direction to rotate.

Next, check the image for defects. Are details legible? Is the contrast balanced? Is the image bright enough? If detail has been lost, rescan. If brightness, contrast or colours need adjusting, use the image processing software to do this (in Photoshop, click Image.. Adjust.. Brightness and Contrast). Sample the results of 'auto' functions such as auto-levels and auto-contrast; then tweak manually as appropriate.

If your colour photo came out all greys, you need to rescan the image, taking care to select 'RGB color' instead of 'greyscale' in the scanner control window.

crop the image

Cropping is the process of removing unwanted border material from the image. For example, if the photo is of three people posing together, the left, right and upper regions of the photo are likely to show the surroundings. While these can prove descriptive, they detract attention from the focus of the image, and certainly where filesize is an issue, they take up space. Extraneous image should be cropped, so as to minimise filesizes and maximise viewer experience.

To crop an image in Photoshop, first select the area to be preserved, then click Image.. Crop. Everything except the selected area will be deleted.

resize the image

Before resizing, consider again the end use of the image. For what purpose are you scanning it? For posterity? Is it a quick snap for a friend? Or intended to support a business proposition? If the image needs to be good quality, consider not resizing it at all. Every retouch you do reduces the quality of the image, sometimes drastically. If the end use has exact size specificiations (say, 100x100 pixels) then resize the image to those values. If you're not sure, as a rule of thumb, a decent size for a photo is 600 pixels across; a generous size for a photo is 800 or 1024 pixels across.

To resize an image in Photoshop, click Image.. Image Size.. and enter the new values. If you wish to adjust the height of the image proportionately to the width, ensure the box [ ] constrain proportions is checked. Leaving this box unchecked will produce distortion in your image, should you resize it.

If you're sending artwork to be professionally printed (flyer, menu, poster etc), you'll want to resize the image to a specific DPI (300 DPI is a good number to use here). To do this, when you're done editing the artwork and are ready to print, in Photoshop, click Image.. Image Size.. and enter the desired DPI value in the "resolution" box. Ensure that the box next to this reads "pixels/inch". You can then save the resized image. Note that you should not save the original Photoshop file in this resolution, as bitmap data will have been resampled - just save the resized image as JPEG or TIFF.

choose an image format

Again, the end use of the image determines the appropriate format to save it in. Diagrams and line drawings are best saved as GIFs (GIF does not antialias colour variations - JPG will wreck a schematic). Saving as GIF will automatically reduce your colour depth to 8-bit (256 colours), but that's usually OK for a diagram. Photos, or other full-colour (16-bit+) images not needing to be top-quality can be saved as JPEG (which supports 24-bit colour). Any high-quality, full-colour photos or other images should be saved as TIFF (which also supports 24-bit colour).

Photos intended for ultimate saving as JPEG should be saved as TIFF, if they are to be further processed before being saved as JPEG. Each time a JPEG is saved, it throws away some data (this is known as "lossy" compression), which means repeated resaving will result in degraded image quality. TIFF, being a non-lossy format, does not have this problem - however the filesizes are much larger as a result.

save the image

To save an image in PhotoShop, follow these notes:

  • If saving a TIFF, click File.. Save As.. and select TIFF from the Format drop-down.

  • If saving a JPEG or GIF, click File.. Save For Web. This function lets you preview the effects of different JPEG compression ratios, a handy feature.

  • JPEGs: adjust the quality control to suit the image. if the image is for posterity, use a higher quality, however balance this against the increased filesizes that increased quality produces. Use JPEG's lossy compression carefully; it's possible to use JPEG compression to completely mash an image. Setting it too high however will produce little or no reduction in image size; indeed JPEG compression with 100% quality will produce an image almost identical in quality to TIFF. The final size of the file is displayed by PhotoShop in the lower-left-hand corner of the save-for-web window.

  • GIFs: to minimise filesize, adjust the number of colours downwards (this may degrade your image - keep an eye on the preview as you do it).

  • TIFFs: compression (LZW format) should be selected, if the option is presented. Otherwise, the final filesize is large. The compression is lossless (that is, it does not detract from image quality).

  • Once you've saved the image, open it with an image viewer (such as ACDSee) and check that it came out the way you intended.

tips:

  • Avoid resizing the X dimension without proportionally resizing the Y dimension; doing so will produce distortion.

  • Use TIFF whenever you need a perfect reproduction of your image. Use JPEG when you want to minimise disk space and transfer time.

  • Avoid using GIF on images with more than 256 colours; 8-bit colour is all that GIF can handle.

  • To created animated graphics, you must use GIFs. To create 24-bit animations, use Flash.

  • Check the final file size of images you have saved. A JPEG that's more than 300k is likely to be excessively large in some respect. TIFFs of up to 5Mb are not uncommon, however, even with compression enabled.

  • When emailing images to people, consider the transfer time at both ends (yours and theirs) and storage capacity at their end. If you send a 3Mb TIFF to your friend's Hotmail account over a 56k modem, you'll spend maybe an hour uploading it, only to have it bounce because their mailbox would overflow if your email went into it. Hotmail may even send all 3Mb back to you, meaning another hour for you, downloading the bounced message. To avoid this, don't send large images to small inboxes! :)

  • Images scanned from printed material (eg, a magazine, or flyer) sometimes contain a fine patterned effect, which is visible up very close (300%). This effect looks slightly noisy to the eye, and increases filesize significantly. It is a relic of the printing process, which places dots of different colours at different places. Photoshop has a function specifically to remove it, which can be found under Filter.. Noise.. Despeckle. This filter does not need to be used if the item being scanned is a photo.

  • Don't expect TIFF, GIF or JPG to compress with ZIP (or any other compression program), as they are already compressed with a good algorithm, which means that can't really be compressed any more. There's no diskspace advantage to be had zipping up a bunch of JPEGs. Sometimes the ZIP header information makes the resultant file bigger than the total size of the files it contains, in these circumstances.

the difference between TIFF and JPEG

JPG will remove information from the image that it thinks you cannot see. This is usually OK because you really can't see it; however if you intend to reuse the image (say, zoom in on a particular item, cut it out with Photoshop and resize the item really big) you will see distortion (caused by JPEG's lossy compression technique). So, TIFF is best for valuable images. The penalty for quality is size, so trade-off as appropriate. JPEG does allow the compression factor to be set; perhaps use 80% for images you value and 50% or below for an unimportant web graphic (for example). 100% is not equivalent to TIFF quality, due to antialiasing.

If you're building an image library, and you have ready access to stacks of storage space (including the same amount again for backups), then saving everything as massive TIFFs is probably the best long-term solution.