Using Photoshop to optimise web images

Most people can muddle around Photoshop and get a result out, but good results are very rare. It’s not hard, so here are some simple steps to creating better looking (and more efficient) images on the web. This isn’t an exact recipe, just a typical ‘tweak’ that gives most images a lift.

We’ll start with this typical digital camera image of the iconic college clocktower.

It’s already been resized to use in a page or sidebar, and although it isn’t a bad image, there are areas that are a little muddy and some detail is fuzzy and the filesize of 35kb is quite hefty for a small pic, so let’s open it up in Photoshop and get started.

Most images need a lift. Open the Curves dialog Image → Adjustments → Curves...

Look for the shadows in the graph and drag the curve upwards to lighten them. In this example, I had to make a second point to pull down the curve and prevent bleaching of the highlights.

Don’t worry if it looks a little washed out at this stage.

Open the Hue and Saturation dialog. Image → Adjustments → Hue/Saturation...

Simply lift the saturation by about 20. Some images need more or less than others.

At this stage the image seems to have lost some definition. Open the Smart Sharpen dialog. Filter → Sharpen → Smart Sharpen...

Adjust the Amount setting if necessary, but avoid increasing the radius above 1.

Always use Save for Web & Devices... in the File menu.

Consider this as a one-way trip for your image. You should never edit the file once you’ve saved for web, so you can afford to compress it as much as possible. This one is at quality 25, and there is still no significant degradation. The file size is a much neater 10kb.

If you want to keep a copy of this image to edit, then make sure you also save a version in a lossless format like tiff or psd.

OK this is not a step in the process, but it’s a chance to see what we’ve done with a few simple steps, remembering that we’ve come from 35kb, down to just 10kb.

This has been a very ‘quick and dirty’ tutorial, but hopefully it gives some guide to help you get better looking images into your pages and emails.