Ask the Teaboy

Q: How do I optimise an image for screen or email? (i.e. NOT for printing)

A: Okay, you've been grumbled at by your siblings, and met with stone cold silence from your mate at work, after you've emailed them pictures of your cat that were taken with your new digital camera. It's not that they're 'dog people' - rather, they're just a little upset that downloading your tabby tied up their phone line for almost two hours! If you want to keep your friends, you've gotta learn the art of sending sensibly sized email attachments. This issue alone could keep the planet from imploding.

The image optimisation question is one we're often asked, and would be an easy one to explain - if it weren't for the fact that the answer largely depends on the software you have at your disposal! We will today demonstrate how to optimise your images for screen or email using a late version of the industry standard - Adobe Photoshop. Some other programs use a very similar interface, so many of you should be able to follow along even if you don't have Photoshop. The basic principle is the same.

Firstly, lets get one thing straight right from the start. Do not, under any circumstances (well... almost any circumstances) email Tiff files, or Bitmap files, or Photoshop files. JPEG's are your friends - and these are the guys we're going to work with today (and are the file type that most of you will be getting out of your digital camera).

Step 1 - Sizing: Let's start by opening an image in Photoshop (sorry, I don't have a cat). After opening the image, choose Image/Image Size from the menu at the top, which will display the Image Size dialog box - where we can.. um.. adjust the size of the image. When we're preparing an image for screen, please note that you can disregard the 'Document Size' section, and simply deal only with the 'Pixel Dimension' section (ensure 'Resample Image' and 'Constrain Proportions' at the bottom is ticked first however):

Then, simply type in an appropriate pixel size (somewhere between 400-800 pixels wide is generally good for screen use, or about 200-600 pixels high). Here we've chosen 640 pixels wide, and (since the 'Constrain Proportions' box is checked) the height will change automatically to maintain the proportion:

The resulting image may now look tiny on the screen, but that's because Photoshop is still displaying the image at a percentage of actual size. By choosing View/Actual Pixels from the menu at the top you'll see the actual screen size (or, alternatively, simply double-click the magnifying glass on the toolbar, or right-click on the image itself - on a PC - and choose 'Actual Pixels' from the menu that appears). If you're happy with the size, proceed to the next step - if not, choose Edit/Undo from the top menu, and then re-enter different values in the Image Size dialog box.

Step 2 - Sharpening: This step is not compulsory, but can make an image really 'pop off the screen' when viewed. There are a dozens of ways to sharpen, and we don't want to get too technical today, so I'm just going to tell you the quickest, easiest way to a good result.

From the 'Filter' menu, choose Sharpen/Sharpen:

If you find the result is a little strong (which it may, depending on your file), just choose Edit/Fade Sharpen from the menu at the top (on the later versions of Photoshop) - and drag the slider to reduce the amount of sharpening to taste.

Step 3 - Saving: We're almost done. From the file menu, choose File/Save for Web (once again, later versions of Photoshop only), where the following dialog box will appear. Choose the '2-up' option at the top, so you can see a before and after view of the settings we will now adjust:

Choose JPEG from the drop-down menu at right, and then adjust the 'quality' slider to about 30. This slider is adjusting the JPEG compression, and the 2-up view is giving you opportunity to preview the results of the compression applied. At the bottom you'll see the new size indicated. At 30 the quality of the image will likely look a bit rough - so now try bumping the slider up incrementally until you're happy with the result. Your mission at this point is to find a happy balance between a small file size and an acceptable quality of image. As a guide, and depending on the complexity and detail in the image, your resulting file size should be somewhere between 20 and 200kb's. Once you've found this happy balance, simply click on 'Save' at the top, and choose a location to save your file (choosing 'Desktop' can be a good idea - to make it easy to locate for attaching to your email).

Here's our finished article (albeit with a copyright logo somehow magically appearing..) - we now can email a 25 kilobyte file, from an original 1.5 megabyte file! That's a sixtieth of the original size! Where the original JPEG would take about 5 or so minutes on a dialup connection (or over an hour if sent as an uncompressed Tiff file), the optimised version would take about 2 seconds:

Step 4 - Don't destroy your original file!: Yes, there is a Step 4. It's an easy one - Just close Photoshop - but, when it asks you if you want to save your JPEG file, be sure to say NO!!!! If you choose 'Yes' you'll be overwriting your original file with a very low-res version. You have been warned.

You can now open your email software, and attach the file from wherever you saved it (don't ask me where you saved it...), and with a bit of luck - your family and friends may even appreciate finding your cat in their Inbox.

--ooOoo--

Note: If you don't have Photoshop, consider downloading the excellent freeware program called Irfanview. With this software you can do batch resizing of images (i.e. you can do dozens of images in one go - specifying a different folder for outputting the resized images), and can have sharpening (and other adjustments) applied at the same time. The Help files from within the program itself will assist you to use this program.