Preparing Images for the Web | 31 Photo Tips

One of the most common things to do with photos these days is to share them on the web. But images that come from your camera aren’t optimized for web viewing – they’re too big and not sharp enough. Decreasing the file size will help your images load more quickly, take up less online storage space and be viewable in a suitable height/width for the page.

Many sites (Facebook, for example) allow you to upload a full size image and then resize it for you. This isn’t ideal for two reasons: 1. An image properly sized will look better than a large image that’s been automatically compressed. 2. You’re providing everyone with access to your full-resolution (ie. printable) files.

Here’s a quick tutorial on resizing and sharpening (an important step that many people miss!) photos in Adobe Photoshop Elements.

We’ll start the resizing process after you’ve done all your other editing and your photo looks the way you want it to. Make sure you save a full-resolution copy of the image first in case you want to print it. Then you’re going to go to the Image menu and select Resize > Image Size.

The first thing you want to change is your resolution. 300dpi is appropriate for printing but monitors only display 72dpi. Keeping it at 300dpi only unnecessarily increases your file size. So change your resolution to 72.

Then you’re going to select an appropriate width and height for your image using pixel dimensions. The exact size depends on what you’re using the image for. Facebook displays images at 960 pixels wide or 720 pixels tall. If you’ve got your own blog, the size will template on your template. For example, the photos here are only 950px wide.

You only need to enter height OR width. Photoshop will automatically change the other measurement to keep your photo in proportion. So if you’re resizing a photo that’s in landscape orientation (horizontal) for Facebook, enter 960 in the width box. If you’re resizing a photo that’s portrait orientation (vertical), enter 720 in the height box.

Your image is now resized to an appropriate web size but not yet as good looking as it can be. It needs some sharpening. All images, regardless of how expertly it was taken or what type of gear you used, benefit from some sharpening when viewed on the web.

From the Enhance menu, select Unsharp Mask. (That sounds totally counter-intuitive, doesn’t it, choosing something called unsharp in order to sharpen. The term is derived from an old film process – you can read the details here or you can just trust me that this is what you should use.)

In the dialog box, you’ll want to adjust the Amount and the Radius. The precise amounts will depend on each photo and how sharp it is initially. I usually start with a .4 or .5 radius and 60% for the Amount. I do not go over .7 Radius or 100% Amount. There is a limit to how much sharpening can be done before it starts to destroy the image and look poorly. Unsharp Mask will help you create a crisper image but it cannot fix out of focus problems. Try playing around with different amounts to get a feel for what each box does, how far you can push it and what looks best for you photo.

Now that you’ve resized and sharpened your image, it’s ready for the web – unless you’d like to add a watermark. Watermarks can be helpful for letting people know who took the photo, especially with the proliferation of things like Pinterest where images are constantly passed on and often not attributed. They don’t always prevent theft but can be a good deterrent.

If you’re just getting started with watermarking, an easy way to do it is to just type right on your image. (Eventually, if you’re watermarking a lot of images, an action or a brush will be helpful).

Select the Text tool from the palette on the lefthand side and click on your photo to type. You can adjust size, font, boldness, etc. Once you’ve typed what you want, you’ll notice that on the right size, in your Layers palette, you’ve got one layer with your photo and one with your text. If you click on the one with your text, you can then use the opacity slider just above it to reduce the opacity of your text. This just helps make it a little more subtle and detract from the photo a bit less, while still being apparent.

Now you’ll want to save all the edits you’ve just made to your photo. Make sure you do a Save As. You don’t want to replace your original, printable file with a web resolution file.

Now you can rename your image. You can do something as simple as adding “web” to the file name: IMG_2930web.jpg Or you can title it something memorable. If you’ve got a blog and you’re trying to get more hits, title your photo with a description – it will help boost your search engine optimization.

. . . . . . . . . .

Now that I have told you how to do all of this step-by-step, I’ll let you know that MCP Actions has a free Facebook fix action set for Photoshop or Photoshop elements. But I think it’s important to know how to do this yourself so that you know what’s going on behind the action and because there will be times when you’ll want to customize it specifically for your photo.