Optimizing Images for the Web with ImageOptim

Photographers like to show off big photos. But if you're posting images to the web, there are a lot of good reasons to make the files as small as possible.

If you're emailing photos to someone, keeping the attachments as small as possible reduces the chances of hitting their email attachment size limits.

More importantly, it makes your website faster for your visitors and reduces bandwidth. And there are tangible benefits to having a faster website. There are oodles of studies that show that visitors are more likely to stay on a faster website. And Google now explicitly factors in site speed when calculating your search engine rankings. It can also have a big affect on mobile users of your website who are using their precious data quota to view your site.

In short, smaller image file sizes means a faster web, lower bandwidth bills, and happier visitors.

There are different ways to tackle the problem. Image optimization is one of the best and is something I use with any photo or graphic I put on my websites.

Making Image Files Smaller

Once is to make the pixel dimensions smaller. But that's not much good if you're aiming for a specific size on the page or the whole point is to show off your photos.

Another way is to crank up the compression on your JPEG images. Sure, you'll get smaller, faster files, but the more JPEG compression you apply the worse the images look. That's why it's called "lossy compression." Again, it's not much good if the point is to show off your photos.

But there is also something you can do to significantly reduce filesizes without affecting the display size of the photo or affecting the quality in any way. It's known as image optimization.

What is Image Optimization?

The short version of what happens when you optimize images is that all the redundant information that's usually included in the file is stripped out. If you're using the right settings and not using the "compression" option if the software has one, it shouldn't have any affect at all on the image quality itself.

The types of information that you can strip out safely in many instances are things like color profiles, metadata information like EXIF and IPTCS, and those mysterious "optional chunks." Unless you need that information to be included in your files for some reason, it's just adding unnecessary bloat.

How much of a gain you get depends on how the file your optimizing was saved in the first place. Some software is pretty good about small files. As an example, it's why you usually get smaller files from Photoshop's "Save for Web" option rather than just using the regular save. Some apps do a very good job of optimizing the images when you save. Some aren't so good.

In general, in working with photos, I find that I routinely get savings of 10% to 40%. Smaller files typically end up with a higher percentage than larger files in large part because the ratio of redundant information to image information is higher.

Those savings translate directly into a faster, snappier website. If your site is getting only a handful of visitors each day, that's not going to make a huge difference. But when you start measuring the number of visitors each day to your website in thousands, it adds up very quickly.

ImageOptim for Mac

There are quite a few image optimizer apps and services out there. Many of them are front ends to scripts that you can run from the command line if you'd prefer to have absolute control. But the apps make thing far more user-friendly and convenient.

My go-to app is ImageOptim. It's an app for Mac. It's tagline is "Better Save for Web", and that's exactly what it does. And it's free (you can donate to support the project).

ImageOptim works on JPEG photos, PNG graphic images, and GIF animations. It bundles together a bunch of different image optimization scripts in its toolbox.

Using ImageOptim

Using ImageOptim is simplicity itself. When you first open ImageOptim you'll get a blank window. You can just drag and drop images onto the window. Or you can use the small + symbol at bottom left to browse for the files. You can also put the ImageOptim app icon in the Dock and drag image files onto it there.

As soon as you drop the files there, ImageOptim gets to work--there's no start button to push. As each file gets done optimizing, you end up with a small green checkmark icon to its left.

The important column is the Savings column at right. That tells you what percentage saving you got for each file. Down the bottom you get an overview of the total savings in terms of data size and percentage.

In this example, I've used the screenshots that are used in this post. As you can see, the size savings were significant. Sure, each file is only small. But those small savings add up if you get a lot of web traffic.

If you're getting 0% in your savings column, it means that your image was already optimized for the web.

ImageOptim Options

You have quite a bit of control over how aggressively the optimization is applied. The screenshots below of the ImageOptim preferences tabs give you a good sense of what you can control. If the acronyms are gibberish to you, you can find some links to detailed explanations on the ImageOptim website.

What's the Downside of Image Optimization?

Overall, image optimization is a very good thing for all the reasons I mentioned above. But there are times it's not the best option. There are times that you might need the information to stay in the file.

A common example for photographers is when using metadata to including captions or other information about the photo, embedding contact and copyright information, or using something like the PLUS metadata system. In its most aggressive forms, image optimization will remove all of that. But with ImageOptim you can choose not to remove it by unchecking the "strip metadata" options (unfortunately there's no way to pick and choose what metadata gets included).

Image optimization--at least not this kind--also doesn't work on TIFF, PSD, or RAW files. But none of those file formats are really designed for sharing images on the web.

Integrating ImageOptim with Lightroom

It's possible to use ImageOptim as part of the export process in Lightroom to automatically optimze any photos you export. Here's a guide.