Digital Photos: from camera to web quickly

Basic steps using Photoshop CS

PowerPoint Tip

PowerPoint presentations also use the same resolution as a computer monitor (72 dpi). Reducing your photos using these methods will hugely decrease the file size of your presentation without compromising quality.

Related tutorials

The first thing you'll notice when you open a digital camera photo is that the picture is highly reduced in order to fit inside the workspace, probably only showing at 25% or so. If you use View > Actual Pixels, you'll find that the photo becomes suddenly about double the width of the screen. I point this out because an astonishingly common mistake on the web comes from uploading files of this size but forcing the web page to constrain the display size. File size is a measure of the amount of storage space needed to hold all the picture's info (in kilobytes), whereas display size consists of the height and width measurements which the user sees (in pixels).

Reducing the file size

Assuming, for this tutorial, that the photo needs no cropping or other corrections, select Image > Image Size. We want to work from the bottom of the dialogue box up. First, ensure that the boxes are checked and Resample image is set to Bicubic. Next, change the Resolution to 72 dpi (Mac users might prefer to use 96 dpi). The Height and Width should lower accordingly. Type in your target width or height. A common size on the Sars website is: 160 x 120 (note 4 to 3 ratio). Click O.K., followed by View > Actual Pixels.
Reducing image size

If the picture looks slightly fuzzy, select Filter > Sharpen > Unsharp Mask. Adjust to taste, but less is generally better for the web. (see screenshot)
unsharp mask

Compressing the image for the web

Now to compress the image to keep the output size low. Select File > Save for Web. Click the 2 Up tab at the top. On the left is the image as you've just left it, and on the right is one Photoshop's suggestions for web-ready compression. In the dialogue box, select JPEG high under presets. Quality and blur can be adjusted to balance quality vs file size. I find that 60% quality with 0 blur almost always works beautifully.
quality vs file size

While you're adjusting the quality, keep an eye the file size and load time listed at the bottom of the 2 Up tab. The quality is set too low when "halos" or lines appear. If the file size is still too large, consider cropping or reducing the display size of the image before reducing the quality further.
note size reduction


Click save. Save with a meaningful file name (no spaces) and select Save as type > Images Only.