How to Optimize Your Photos for the Web

Photography Tips

Sometimes when uploading an image to the web, the colors look off or the sharpening just isn’t right. If this has happened to you, chances are you haven’t been saving your images in a way that works best with the way that browsers render images. Luckily, optimizing your images for the web isn’t particularly difficult, as Aaron Nace demonstrates below:

These days just about everyone uses the web for showcasing their photos, whether it’s an online portfolio, a blog, or Facebook. If you’ve never optimized your photos, there’s a chance that you’ve noticed a distinct difference between what you’re editing in Photoshop or Lightroom and what you see once they’ve been uploaded.

In the video above, Nace begins with enhancing the existing colors in his image. Now obviously, if you’ve already finished your workflow on one of your own images, you shouldn’t have to do this. But if you’re working with someone else’s image, you’ll probably want to check everything from curves to color before calling it good.

A before and after of the color enhancements.

Resizing

Where optimizing your image really begins to occur (outside of your normal workflow) is with sharpening. As you probably know, sharpening is pretty much the last part of any workflow, and Nace brings up a critical point that many people overlook: you need to resize the image to its actual display size before sharpening. This is one of the biggest reasons for sharpening to be off. If you sharpen a large image and then reduce its size, the sharpening effect will be very different for the smaller image.

(If you don’t know the actual size of the final photo, just do your best and guess. Most web platforms will have the actual image sizes somewhere in their documentation.)

Sharpening

While there are many ways to sharpen an image, Nace prefers Photoshop’s “Unsharp Mask” feature. With the threshold set to 0 or just above 0, Nace moves the Amount and Radius sliders to where the point in which they’re clearly over-sharpened and then backs them off until the image looks good to him. Be careful with this process, though. It’s super easy to over sharpen and/or enhance any noise in your photos and not quite see it until later.

Using Unsharp Mask for sharpening

Saving

Perhaps the most critical piece of optimizing for the web is how you save your images. Photoshop’s Save for Web and Devices feature takes care of the rest of any translation errors by allowing you to convert to sRGB (the color space most browsers use) and saving at the proper size for quickest uploading. (Though this wasn’t covered in he video, it’s seriously important, especially if you have image heavy content.)

One of the great parts of the Save for the Web option in Photoshop is that it allows you to see the before and after adjustments up in the tabs at the top of the dialogue box. So if you find that you need to reduce the quality to a point that it will upload more quickly, you can definitively see where to stop—where the difference in the quality of the image is obvious to the eye.

Taken together, sharpening the actual image size, saving in the correct color space, and managing your file size can make a concrete difference in both your viewers’ experience of your photos and the functionality of your website/blog.