Blog

Funny thing about us:

We think your sites should look exactly the way you want them to.

Saving the world with image optimization.

Remember when connection speeds were measured in baud? Maybe you don’t but I sure do, and the painful experience of trying to download a 100kb image in 1996 made me what I am today. I’m an optimizer, a conservator, a steward of the people’s bandwidth and I’m here to help save the world from large images.

“I already Save for Web, thanks.”

I know, and that’s been a lifesaver for many of us over the years. Knowing what format to use for each image and using Save for Web are probably the best things you can do to reduce image size. Thankfully there are applications that can reduce those sizes even further without sacrificing quality.

“I’m an optimizer, a conservator, a steward of the people’s bandwidth and I’m here to help save the world from large images.”

vivavideo on pc

“I’m a busy person. Do I really need to do this?”

Yes. Plus you’ll feel better afterwards. Here are just some of the reasons you’ll want to squeeze every last byte out of your images.

  • Make your web pages load faster

    Unless you’re using Flash or some enormous JavaScript files, your images will likely account for the bulk of your site’s load time. People and search engines alike are becoming less patient so it’s good to try to make both of their experiences as pleasant as possible.

  • Google will like you more

    They may feel like overbearing parents at times but they have good advice. If you’ve ever used Google PageSpeed you’ve undoubtedly seen the Optimize Images suggestion. They’ll let you know when an image could use some tweaking. They even give you a little positive reinforcement by increasing your Google PageSpeed Score after you clean up all of your images ;)

  • Save disk space & bandwidth

    This may not be much of an incentive to some, but for anyone with limited disk space and bandwidth on a hosting account, this alone could make this process worth it.

“Will it distort my images?”

No. You won’t be able to tell the original image from the optimized version. In fact, all of the methods/tools/websites I’m going to recommend use “lossless” compression resulting in a smaller file size without altering the image’s appearance.

“Okay, I’m convinced. What application should I use?”

Well, that’s going to depend on what operating system you’re on. Mac users are in luck because the best of the bunch is made just for you. PC people hang on – I’ll have something for you, too.

I’ve been singing the praises of ImageOptim for some time now and figured it was my turn to tell the world about it. If you’d like more information about how this program can make PNG files so small, see the developer’s fantastic post PNG that Works.

Here are the three main reasons I love this app.

  1. I never have to worry about the appearance of an image changing. I’ve put tens of thousands of images through this program and it has never altered an image’s look.
  2. It’s drag-and-drop. You can drag an entire folder of images onto the app’s window and it will churn through them automatically.
  3. It’s free.

Let’s take a look at some images I exported (Save for Web) from Photoshop and then ran through ImageOptim. As you’ll see below the JPG was only slightly reduced in size (but still reduced) and the PNG 8 lost a little more of its bulk…but the magic happened when ImageOptim tackled the 24-bit image with an 8-bit alpha transparency which was reduced in size by over 50%.

JPG (9.3% Savings)

Non-optimized JPG
Original 49.8KB
Optimized JPG
Optimized 46.3KB

8-bit PNG (10.0% Savings)

Non-optimized 8-bit PNG
Original 2.76KB
Optimized 8-bit PNG
Optimized 2.49KB

24-bit Transparent PNG (51.0% Savings)

Non-optimized 24-bit Transparent PNG
Original 4.94KB
Optimized 24-bit Transparent PNG
Optimized 2.42KB

“I have a Mac but I don’t want to use ImageOptim because I don’t like the name. Is there anything else I can use?”

Sometimes when no one is looking I use CodeKit for quick image optimization. It’s a little off-topic but if you have $25 and do any Less, Sass, Stylus, JavaScript or CSS work, CodeKit is worth taking a look at.

For larger photographs I use JPEGmini. The power of this app lies in its ability to work with large images up to 17 Megapixels (not 17 Megabytes). I was able to reduce the size of my iPhoto library by about 50% using this app and it was well worth the $20 price.

“Is ImageOptim available for Windows?”

No, but there are similar tools you can try. RIOT (Radical Image Optimization Tool) seems to have many, many options for optimizing images. The standalone version of PNGOUT (one of the tools used in ImageOptim) is also available for Windows.

Free Online Image Optimization Tools

For those of you who really like using web interfaces or don’t want to use your own CPU to optimize images, there are links for you, too.

Image Optimization with WordPress

If you’re a WordPress developer you undoubtedly have a set of favorite plugins that you use on most of your sites. You may want to consider adding WP Smush.it to that list. Whether you’d like to automatically optimize your images in the background when you upload them or you want to smush your entire existing library, this plugin has you covered.

What’s your favorite way to optimize images?

Do you have a favorite tool or technique for making images smaller.  Let us know – we’d love to hear from you!

About Matt Sartori

Matt is the owner of Tune Development, a web development company in Indianapolis that specializes in letting design firms and ad agencies take credit for its work.