It's a well-known paradox within the digital photography industry that as consumers flock to cameras with ever-increasing resolution, the number of images that actually get printed is very, very small.

The print medium places very high demands on image resolution and one of the primary benefits of having more megapixels is that you can make larger, more detailed prints. With the ubiquity of email, social networking sites and blogs, however, the overwhelming majority of images being captured are distributed online. And with 10 megapixel+ sensors now being the norm for low-end ultra compacts, this means that every time most people press the shutter they create a file far too large for its likely destination; the web. So before you clog someone's inbox with a file that requires scroll bars in their web browser, let's take a look at how to properly optimize files for online use.

Images destined for the web don't need to be large. This image measures 520 pixels by 390 pixels. Viewed at this size, on-screen, this shot has pleasing detail and resolution. If we were to print this same file, however, it would yield a high quality print of only 2 inches wide.

The first piece of order is to understand just a bit about pixels and resolution. Resolution is most commonly expressed in terms of pixels, which you can think of as the building blocks of a digital image. The more pixels an image contains, the higher its resolution. Camera makers tout image resolution of their camera sensors in terms of megapixels - one megapixel being equal to one million pixels. So, a camera that outputs images which measure 4000 x 3000 pixels is a 12MP camera (4000 x 3000 = 12,000,000).

The screen area of the monitor sitting on your desk is also measured in pixels. Let's suppose your display has a resolution of 1600 x 1200 pixels. If your camera has a resolution of 3000 x 2000 pixels, then an uncropped image from your camera, when viewed at 100% (actual size) expands beyond the edges of your screen. You will have to scroll to see all parts of the entire image.

When viewing an image than contains a greater number of pixels than the device on which it is being displayed (simulated here with a blue frame, to represent the boundaries of a screen), you have to either scroll to see the hidden parts of the image or reduce view magnification until it fits entirely on the screen. Proper image sizing avoids the need to do either, while also reducing the file size.

By taking into account the device on which your images will be viewed, you can make it easier to view, as well as save space on your harddrive, by not saving an image larger than it needs to be. So, with all the different monitors on the market, how do you know which one to account for? The answer is that you don't. But we do know that people view web images in a browser. And since websites are typically designed with page widths of less than 1000 pixels wide ,you'll rarely need to create a file of even that width. And of course, if you are emailing images, the preview panes in email clients are much smaller than that.

Suffice to say then that the largest web-destined image you are ever likely to need is about 800 pixels wide. For most uses, 400-600 pixels will be plenty. As a point of reference, the images accompanying this article are 520 pixels wide. Keep in mind these recommendations are for "full-size" images. For thumbnails, avatars and profile pictures on social networking sites, you need only a fraction of that resolution.

Now that we have an understanding of how large web images should be, let's look at how to resize them so they look their best. We're using Adobe Photoshop CS5 here, which offers a flexible one-stop save function specifically designed for this purpose, called Save for Web & Devices. Go to File>Save for Web & Devices to bring up the dialog you see below.

Here you can choose image size, file format, compression amount, profile conversion and downsampling algorithm. Best of all, you can visually preview the effects these changes will have on the new image version before you commit to the change. All within a single dialog box. 

The Save for Web & Devices dialog provides one location where you can optimize file settings and produce an image tailor-made for its intended use. The options here are so complete that I'm going to use them to walk you through the hows and whys of creating an image that looks great on the web.

The reduction in file size that this dialog provides comes chiefly at the expense of image quality. Using the 2-Up configuration shown here allows you to see how changes you make to the original image (left) will affect the web optimized image (right).

Our first task is to choose a file format and quality setting. We make these crucial adjustments in the group of menus and checkboxes at the top right of the dialog window.

For photographic images, JPEG is by far the prefereable choice. The Quality box is the easiest place to set the compression amount. The range goes from 0-100, with 100 equaling the highest quality option. Check the Optimized box for the smallest possible file size at your selected pixel dimensions. Clicking the Embed Color Profile option is always a good choice. And you absolutely must click the Convert to sRGB checkbox.

One crucial choice that is often overlooked is conversion to the sRGB color space. I'll spare you the colorgeek explanation, but many web browsers, tablets and other non-colormanaged devices may display wildly inaccurate color renditions of your image unless this conversion takes place. If your image is not already in an sRGB color space, this is the time to do it.

 At the bottom of the dialog window we have the all-important option to set image dimensions, designated in pixels. With the chain link icon present, you simply type into either the width or height box and the other one updates automatically to maintain the same image proportions. The Quality pulldown menu offers a selection of resampling algorithms. 

When we resize an image by any significant degree, its perceived level of sharpness can change. The Bicubic options offer a quick and easy method for retaining a similar degree of apparent sharpness between the original image and the resized version. As a general rule, images that are being reduced in size will benefit from the Bicubic Sharper option.

If you're the type who likes lots of choices, the 4-Up configuration places your original image at top left, and the version with your chosen settings top right. What follows are two additional versions set at progressively lower quality settings. You are free to click on any of these, however, and alter these settings on a per image basis. Keep in mind though that any change to image size will carry through to all four versions, so that you are always comparing images of identical pixel dimensions.

We've taken a very brief look at the major areas of concern when repurposing your images for online use. Following these simple steps will allow you to transmit appropriately sized files while maintaining control over image quality. Although the amount of options can seem overwhelming at first, most of us end up using the same, or very similar settings over and over. So the next time you're getting ready to email or upload your latest masterpiece, take a few moments and prepare an optimized file that elicits joy from the recipient instead of frustration.

Amadou Diallo is a technical writer at dpreview, photographer and author of books on digital image editing and travel photography. His fine art work can be seen at diallophotography.com.