Preparing an Image for the Web
Clive R. Haynes FRPS
This is a general guide for preparing and saving an image for transmission via e-mail or for inclusion in a web page.
There are no hard and fast rules about this practice - only very general forms & conventions, so here goes.
The first thing to remember is that the monitor used to display or images will operate at a screen definition of around 72 ppi so there is no point in sending images of greater resolution than this. This apparently 'low resolution' also provides something of a safeguard against your images being copied or pirated as the definition is poor for any other purpose than the smallish image for the web.
The next point is to decide on the size of the image as you wish it to appear. Generally speaking, most of the images on my site are between 500 and 600 pixels at the longest side. I find this a convenient size, as the images are perfectly visible and the download time is sensible.
This is what to do.
1 Open the image you wish to use
2 Go to Image > Image Size and tick (check) the 'Resample' box. And ensure that 'Constrain Proportions' is also ticked
3 Set the Document Size Resolution to 72 ppi
4 Set the Pixels Dimensions Width or Height (whichever is the greater) to (say) 600 pixels (the other dimension is linked and will take care of itself)
5 Click 'OK' - probably (but not certainly - depending upon your starting point) the image will shrink somewhat. At this stage you may apply sharpening via Filter > Sharpen > Unsharp Mask if you wish, Some sharpening is usually preferable - but don't over do it! Try: Amount: 50%: Radius: 1; Threshold: 0.
6 This is an optional step. Should you wish to check the actual size of your image on screen, then press the tab key, then the 'F' key, then Ctrl & Alt keys together with 0 (zero) - this will display the image on screen at actual pixel size and be on a grey background. To return to the normal 'Window' screen, press the 'F' key twice and there you are. To display the tool bar and palettes (should you have 'lost them), press the Tab key (the tab key is a 'toggle' and will switch on and off the tool bar & palettes)
7 Go to File > Save for Web
Saving for the Web allows you to choose different options. Choose the 4-Up option,
click on the top right image to 'highlight' it in black outline, and look at the
choices presented. We're looking for a file size of around 100k and a download
time of around 30 seconds or so.
9 On the right hand side, under 'Preset' or 'Settings' area (depends upon which version of Photoshop you are running) choose JPEG, then go to the Quality option and click on the 'fly-out' arrow - this reveals a 'slider' control - try around 70 and look at the changes to the file size and timings in the 4-Up image area. Adjust this slider to optimise the timing displayed.
10 You may wish to click the 'progressive' box (otherwise the default will be 'Baseline'). This determines how the image will reveal itself as it's downloading. 'Baseline' is the default which means that the image will build up line-by-line down the screen. Progressive' will give a low definition whole image, then gradually 'bring it into focus'.
11 When you are happy with the combination you've selected, click 'OK' and either give the image a name or accept the default with the JPEG extension. Save it in a folder.
12 When uploading, choose the 'Attachment' facility in your e-mail program and go to the folder where the JPEG version of the image is stored and select it
13 As an alternative, instead of Step 7, you can Go to File >'Save As' > Format > Choose JPEG (from the drop-down list) and from the simplified box presented, make your choices about quality and file size