The SAVE FOR WEB Dialogue Box:

Saving a JPEG for the web (or email).

The Save For Web dialogue box (accessed through the File menu in Photoshop) is actually part of Image Ready which has been bundled with Photoshop since version 5.5, so if you have this version or higher you're set. The Photoshop JPEG compression in the Save As dialogue box is not efficient (resulting in larger file sizes), and why I suggest the following method:

First open your photograph in Photoshop. Go to the File menu and select Save For Web.

Your image should now be displayed within the Save For Web dialogue box. If you look on the top left you'll see a series of tabs; 2 Up will show the original image plus the compressed image, 4 Up show the original plus 3 different levels of compression. I find 2 Up quite good, it gives you a before and after view of your image.

On the right are the controls. Around half way from the top are two more tabs, the interesting one is Image Size. In this tab you specify what dimensions the compressed image will have. For this website we use 400 pixels on the longest side, so you simply type 400 into either the width or height box depending on which is longest. Make sure that the ‘constrain’ proportions is checked and the quality is Bicubic then press the Apply button. The images on the left change to reflect your new size settings.

Next we look at the Preset area, this is where we specify what kind of compression we use and how compressed the image will be. Photographs compress best with the JPEG compression method, and how good they look will depend on how much you compress them, 100 gives you most detail and larger file sizes, 0 yields an ugly picture with a very small file size. Saving for the web is, therefore, a compromise between detail and file size.

At the top of the Preset area is a menu with a number of presets (strangely enough), choose JPEG High for starters. The menus and fields directly below change to reflect your choice, and you can change them further to refine the JPEG compression on this image.

Check the Progressive box, this allows the photo to be downloaded in stages so there is something to see quickly. Otherwise the image will show up at the end of its download, which can be lengthy sometimes.

How do you know how much compression to use? Personally, I start with a High level of compression (High or Maximum) then work down to see how low I can get before I can notice the JPEG compression artefacts. When I begin to see blocky areas where it should be smooth colour, I know its time to back up a little with the compression. Below, the image "Mana" on the right is over compressed showing a bad case of compression artefacts (the 4 screenshots above are also over compressed, look next to the text).

Compression artefacts occur in areas of high detail, high contrast or around sharp edges. Avoid compression artefacts.

This is how I fine tune my settings... Say I have a fairly detailed image that starts to break up when I take the compression from Very High down to High. As I do this the Quality field changes also, from 80 down to 60, 60 is too much compression but 80 gives me a file that's too large. The solution is to enter a number between those two figures, e.g. 70 or even 65, in the quality field to get in between the presets (press the tab key or click on the grey area of the dialogue for your entered amount to take effect, pressing enter will take you to the Save dialogue), making the smallest file possible without visible artefacts. Brilliant!

File size? The properties of the image are shown directly below it, the compression type, file size and how long it will take to download. Very useful information, keep an eye on it as you change the settings.

The Save For Web dialogue box in all its glory. (The photo is London Eye by Graeme Crowther).

Don't forget to save it. When the Save dialogue pops up you'll see that it replaces the spaces in the name with hyphens, that's OK let it. It would be useful if you could change any upper case letters to lower case (internet servers are case sensitive so there are fewer problems if all files have lower case names). Then there are the options at the bottom of the Save dialogue box; the important one is Format and should be on Images Only, Settings on Custom, and slices should be greyed out as there are no slices.

Just a few more things about the Save For Web dialogue box... The little earth icon with the red question mark on it will show the compressed image in your default browser. Also in the lower regions of the dialogue box is a Zoom menu so you can see you image at different magnifications. I find, though, that only 100% in the Zoom menu will give you a proper idea of how your image will look.

I hope you try this out and find this useful.

Patrick Bish