• 
• 
• 

Make Photos Web Ready —04/18/11

How to prepare your image files for online and email use

This Article Features Photo Zoom

Making images web-ready first requires a basic understanding of digital image resolution. The size of an image is actually a combination of a physical dimension (8x10 inches, for instance) and a pixels-per-inch resolution. For instance, an 8x10-inch image at 300 pixels per inch would have an area resolution of 2400x3000 (8 inches times 300 pixels per inch is 2400 pixels, and 10 inches times 300 pixels per inch is 3000). Coincidentally, that’s also how megapixels are measured. Multiply those two pixel dimensions, 2400x3000, and you end up with 7,200,000—or 7.2 megapixels.

Print resolution is usually optimized at 240 or 300 dots per inch. So that 7.2-megapixel digital image makes an 8x10 at 300dpi. But that’s way more than you need for screen resolution, which is only 72 to 100dpi. That’s the target area you want to get to in order to have a truly web-ready, emailable image file. In Photoshop, you can choose the Save For Web and Devices option in the File menu to see compression and resizing options that make image files small enough to be easily used online. Another option is to simply choose Image Size and resize the image to be 8x10 at 72dpi—or 576x720 pixels. It will still be an 8x10, but only on screen at 72 dots per inch. However you do it, keep in mind that you want to arrive at a total pixel measurement that equates to roughly 72dpi at the size you’d like to see it on screen. And if you don’t know how big a picture is going to be used, somewhere in that 800- to 1000-pixel neighborhood is a good, safe choice for the longest dimension.

Image size is only one part of the ìweb-readyî equation. What about color profiles that tell subsequent users, and devices, how to accurately interpret the colors in an image file? There are practically a million different spaces you could choose, but the sRGB color space is perfect for the web. Its limited size, when compared to Adobe RGB, means that all the colors you see in your image file will be able to be reproduced online.

The next step is file format. Why not just email a TIFF or PSD file to the web designer and let her deal with it? Because those formats aren’t web friendly; they just don’t work. And any time someone else is editing or resizing your image files, as a designer would have to do to get them to work online, you run the risk of encountering two nasty problems: one, they won’t know what they’re doing and require a lot of guidance from you (which is way more annoying than just making the changes yourself in the first place), or two, they’ll mess it up and make your picture, with your name next to it, look awful. So again, after you’ve resized your image correctly for the web, save it as a JPEG. That’s the most common, most viewable, most web-ready format for displaying your photographs online.

That brings us to compression. Compression is what allows you to make JPEG files high-quality or lesser quality, making them either tougher to email and longer to load on a web page, or smaller and faster to email and load. It’s a give and take: less compression makes for a larger file size and a better image with minimal pixilation and JPEG artifacts. But more compression makes files smaller and easier to distribute online—with some sacrifices to image quality. The trick is finding the right balance for your needs. I tend to default to the highest-quality JPEG files with the least compression—especially for portfolio purposes. With proofs, though, I often drop down to 50% quality because I just want my client to be able to see the image. A few flaws aren’t such a big deal since its not a finished image I’m delivering.

Add Comment