Monday, October 31, 2011
Prep Your Pictures For Email And The Web—10/31/11
How to resize and compress your photos for online use
|This Article Features Photo Zoom|
First things first: resolution. How big do you need a picture, and for what use? Print is one thing, web (or screen size) is another. I make it a policy not to email large print-ready files because they're just too big to email. So if what you need is a high-res image for print, email is not the best delivery option. For that, turn to web delivery—use of an FTP client through your own web site, or turn to one of the many free ad-driven filed delivery sites like YouSendIt and SendSpace that allow you to upload very large files and email only a text link, enabling the end user to download the appropriate print-ready high-res file and freeing you from worry about whether your files will get caught up in email servers and spam blockers because you're trying to send a high-res file.
For everything else—meaning for images that are going to be printed small or used on-screen only—you can go ahead and send them via email. But you've still got to resize them. If you want to send a printable picture at 4x6 inches in size—which is about the limit of what I would send via email—you want ideally to resize the image in Photoshop to 4x6 inches at 300 dpi. In fact, though, you can probably fudge these numbers a bit to save space, and make the image easier to email, by setting the file size to 4x6 inches at only 240 dpi.
For images destined to live on a web site—like a Facebook profile picture or a display image in an online gallery—consider resizing the images to the physical dimension you want them to appear on screen (say, again, 4x6) at only 72 dpi. If you want to cheat that number a bit, and buy yourself a little more wiggle room in case you'd like to make an image appear larger online, up that resolution to 100dpi. Generally speaking, I think of an image that is 1000 pixels in its largest dimension as being plenty large for almost any web use. If someone asks for a picture they can use online, an 800x1000-pixel file is generally going to be plenty, plenty big.
You'll notice that both of these above examples—print and web—reference an actual physical dimension. That's because the common requests for "300dpi" or "72dpi" for print and web, respectively, are only part of the equation. For a dots-per-inch resolution to mean anything you need to know at what size the image is to appear. Three hundred dots per inch spread out across four inches means you need an image that is 1200 pixels wide (4 inches x 300 dots per inch).
If you're primarily concerned with sending an image for reference to someone—they aren't actually going to use it, only look at it, as with portrait proofs—you can get away with sending much smaller image files. In this case I like to envision a file about 4x5 inches on my screen. At 72 dots per inch, that means I want a file that's about 288x360 pixels in size. A little bigger won't hurt, but too much smaller might.
The other thing to take into consideration when resizing images for email and the web is the file format. No matter what format the files currently exist in, once resized to the appropriate dimensions you'll need to save those images as JPEG files. JPEGs are universal, they're compressed, and they're the ideal format for email and the web. Simply choose "Save As" once you're happy with the size of your image files, and select JPEG from the dropdown menu.
So now you know the appropriate sizes for printing and web use and emailing, but did you notice I haven't yet told you how to get there? You can resize your image files in any number of programs, but Photoshop—as the industry standard—is the obvious choice. With an image open in Photoshop, simply choose Image Size from the Image menu to open a dialogue box with all the controls you'll need. With the Resample Image box unchecked, any adjustments you make will simply reallocate pixels per inch without actually changing the resolution—or the pixel area, the physical pixel count—of the image. So, for instance, you can make your 18x20 inch file at 72dpi into a 4x5 at 300dpi. They're the same pixel dimensions, though, so you haven't actually resized your photo. For that, you've got to ensure the Resample Image box is checked.
Speaking of checkboxes, be sure to keep the Constrain Proportions box checked as well, otherwise changing one dimension won't alter the other and you'll warp your image. Scale Styles simply adjusts effects, like text and layer adjustments, proportionally with the overall image. It's generally a good idea to keep this checked too.
From here you can resize the file any way you see fit. I think one of the easiest ways to resize a file for the web is to simply type in the pixel dimensions I want at the top of the window. When you do this you'll also see the file size change, showing you what it used to be as well for reference. This is a great way to ensure you get your emailable files down to a manageable size—say 1 to 2 megabytes before you go and compress them into JPEGs.
The other way you can adjust the image in this dialogue box is to let the program do the math for you by entering the document size. If you know you need only a web-ready 2x2 image at 72dpi, you can enter that into document size and the resizing will occur right before your eyes. When you're ready, click OK.
This is the hands-on manual way of resizing an image, whether it's for email, the web or print. But Photoshop also has a built-in web-sizing option under the File menu: Save for Web & Devices. This opens a dialog box that gives you tons of controls that are especially useful for web designers or photographers who want to make sure their images are as web-ready as possible. With adjustments for everything from GIF transparencies to metadata info, this dialogue really is a great place to not only get the file size right, but to ensure your images display nicely online—and are traceable back to you via file info.
The 2-up before and after preview panes also make for a wonderful way to see exactly how your image will look when you've compressed it for the web with adjustments to compression amount and quality. When you're done tweaking, and the file looks good and the file size gets tiny—say 100 to 200k, ideally—just click Save to proceed to the normal Save dialogue box and put the file wherever you'd like. Then send it on and watch it happily traverse the servers of the world, moving seamlessly across the Internet, never to return. That's a good thing; it's proof you've done your job right and your picture has arrived at its intended destination.