Adobe Photoshop CS5 – Save For Web

It is very surprising how many photo professionals still don’t know how to optimise a photograph for websites, emails etc. Many still use the feature – Image > Image Size (see image below)

Image Size dialogue box
“Image > Image Size” dialogue box

While this method can get you the right size, it does not get you the optimum quality for a given size.

Adobe Photoshop CS5 has a feature which is ideal for getting images ready for this purpose and here we’ll show you how.

First open any sized image in Photoshop and then click on File > Save For Web & Devices

“File > Save For Web & Devices”

This will open up a new dialogue box inside Photoshop as below.

Save For Web & Devices
Save For Web & Devices

This dialogue box is where all the optimisation happens.

We’ll start with Image Size at the bottom right hand side. In this instance, the width and height are 1965 x 2953 pixels. As you can see in the main viewing window, this is far too big to display on the average screen. The viewing window displays the photograph at the actual size that it would be displayed on a website.

So what should we change the size to for optimisation?

I use a simple theory that some people still use screens with a 800 x 600 pixel resolution. So therefore if I changed the width of a photograph to 800 pixels it would take up their entire screen. Given that my photographs are going to be viewed on a website using a browser, I must leave room for title bars, address bars, tool bars and task bars on a screen, the height of my photographs must be reduced to around 500 pixels. In terms of width, the browser only has a scroll bar so the width of my photographs should be reduced a little to say 600 pixels.

So in my opinion the longest edge of my photograph is reduced to a maximum of 500 pixels whether it is the width or the height. Although on occasion the width can be extended slightly.

So in the Save For Web dialogue box under Image Size, change the largest number to 500 and press Tab on your keyboard. You will see the Image in the preview window resize and become wholly visible on screen.

Now we have optimised the correct size, we must now optimise the photograph for quality.

The two areas to look at are Quality (top right) and File Size (bottom left)

Quality settings - Save For Web
Quality settings
File Size - Save For Web
File Size

With the quality setting set to 100% we can see that the file size of this particular photograph is 256Kb. On a 56Kbps modem, this photograph would take 47 seconds to download in a browser. If there were any other images on that particular web page then the download time would increase to unacceptable times. So ideally we need to reduce the file size of the photograph thus reducing the download times. It might be worth acknowledging at this point that very few people use 56Kbps modems any more, but like screen resolutions it is always better to work based on the minimum probable.

The first thing you need to look at again is the pixel size. Does the photograph need to be 500 pixels on the longest length? Can you get away with making this smaller? If not then we go to the next step, Quality.

The quality slider can often be reduced to 80% without a noticeable loss in photograph quality. Here you will have to use your own judgement because each image will require a different setting. As a general rule of thumb, move the slider between 50% & 80% while looking at the photograph and settle on an optimum setting. As you use the slider, keep an eye on the file size. Sometimes reducing or increasing the quality has little effect on file size.