“optimise your images for the web with Photoshop Elements by Steve Nichols”

Learn how to optimise your images

This scenario is played out every day in offices around the world. You get a hi-res image sent to you and have to use it in an intranet feature. But how do you get the best out of it and what are the tricks of the trade?

The problem with hi-res images straight out of a camera is that they are just too big for the net. Typically, you need something about 250 - 350pixels wide, not the 3000-odd pixels that the average Nikon or Canon DSLR creates.

So what do you do? The first step is to make sure that you have a decent imaging program. While PCs come with PhotoEditor, in my opinion it is pretty useless at creating good images for the web. Far better is Adobe Photoshop Elements, which has about 80% of the functionality of full-blown Photoshop, but only costs around 10% of the cost for Mac or PC.

The main difference between Photoshop and Photoshop Elements is that the lesser version can't convert the colour model from RGB to CMYK. That is, it can't prepare images for print. But for web use you don't need that anyway.

So having installed Photoshop Elements what do we do?

First, open your hi-res image and use the cropping tool to crop what it is you want out of the image. Most people include way too much clutter around the images, which must be cropped tightly to maintain impact when used small.

Once you have cropped the image go to "Enhance >> Brightness and Contrast >> Levels"

This gives you a graphical illustration of the tones in the photograph, from the blackest black on the left to pure white on the right. A typical well-exposed image has a full range of tones, but if your image is too dark it is easily fixed - just click and drag the right-hand triangle under the graph and move it down to where the graph appears to finish. You now have a good spread of tones and the image is much brighter, but still not quite right.

But if we move the central triangle towards the left too, the image improves even more. The central triangle defines what is going to be the mid tone of the image.

The new graph may look a mess as we have effectively reduced the overall number of tones in the image, but as it is only for the net this is fine.

This is something you might need to practice with, but the levels are a powerful tool and much better than just using the Brightness and Contrast controls.

Now we need to reduce the size of the image. Go to "Image >> Resize>> Image Size" and change the width to 250pixels or whatever size you use. Make sure you have "Constrain Proportions" and "Resample Image" ticked.

The image is now at the right size for the net - zoom in until the image says it is at 100%. This is now the size it will appear in a web browser.

There is now one final thing to do. Images that have been downsized always look slightly fuzzy. We can sharpen them by going to "Filter >>Sharpen >> Unsharp Mask".

Set the Radius to 1.5 pixels and the Threshold to 5 levels. Now set the amount to somewhere around 50 - 100. You can see the effect you are having by clicking on and off the "Preview" option.

Don't overdo the sharpening. Once you are happy click OK.

Now all you have to do is go to "Save for web" and select JPEG, and a "Quality" level of "High" (about 60%). This will depend upon the image, but if in doubt make the image quality better rather than worse.

Now save your image. The end result will be a file of about 20K, which will load very quickly on a webpage or intranet site.

Click here to get Adobe Photoshop Elements 10