Web-Development Online News Articles Information

Optimizing Photos for Web and Email

Optimizing your photos consists of: 1) reducing their file size which will make your web pages load faster and use less bandwidth; 2) making some small adjustments so that your photos will look much better and have more impact.

I use Photoshop throughout this article, but most other photo editing software has the same controls and the techniques I describe can be used with them. If you don't have any editing software, there are several good online tools available.

Change Width and Height

Most modern digital cameras take photos that are much too large to use on web sites or in emails and need to be reduced in size.

For web pages, the exact size will depend on your page design, but it's unusual to need anything over 500 pixels and often you'll need the photo to be 200-300 pixels.

When emailing photos, I usually use a maximum of 600 pixels. This is large enough to see the photo properly, but small enough not to be not to take up a lot of space in the receivers mailbox.

To change the image dimensions, select the Image->Image size menu. In the Image Size dialog box, make sure that Constrain Proportions is selected, then, under Pixel Dimensions, enter either a new height or width. The other dimension will automatically be calculated for you so that your photo remains correctly proportioned. If you're not sure of the final dimensions you want, enter the largest you think you'll need; shrinking it further later is no problem, but increasing the dimension will lead to the photo becoming pixelated.

Fix Brightness and Contrast

Photos taken directly from a digital camera are usually lacking in contrast and may need the brightness adjusted if the exposure wasn't correct.

Use the Image->Adjustments->Brightness/Contrast menu and, as a starting point, increase the contrast to between +10 and +20. Adjust the brightness up or down as needed.

Sharpening Photos

All photos that come from a digitial camera need to be sharpened. Make sure that the image is displayed at 100% then select Filter->Sharpen->Unsharp mask. You should only use the unsharp mask filter and any of the other sharpening filters as they offer no control over the results.

For photos sized for web or email, start by setting the amount to a value between 50 and 100, the radius to 1.0 and the threshold to 0. Adjust the amount until you get a result you're happy with but be careful not to over sharpen the image or you'll get strange colored halos around things.

JPEG quality setting

The quality setting of your JPEG photos has a large effect on resulting file size, with reductions of 50% or more possible with the correct setting. The trade off is that JPEG throws away some of the information in your photo and taken too far your photo will start to look degraded. In Photoshop, the best way to do this is to use File/Save for Web. Make sure that the file type is set to JPEG, not GIF or PNG. You can choose to either use the pull down menu containing the values "low", "medium", "high", "very high" and "maximum" or use the quality slider to set the quality from 0 to 100. The resulting file size is show below the image.

In general, a quality setting of "high", or 60, is about as high as you want and you probably won't see any difference in image quality with higher settings, but you will see the file size increase. You can often go as low as "medium", or 30, and still have a good looking image a with significant reduction if file size.

If you don't have Photoshop, use the file->Save As option of your editing software and select an output type of JPEG. You'll be able to adjust the quality settings, although not all packages will give you a preview of what your image will look like.