Amadou Diallo | Software Techniques | Published Aug 31, 2011
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.
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.
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.
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.
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.
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.
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.