RocketTheme Blog

Image Optimization Solutions

Friday, 06 September 2013 00:00
Ryan Pierson

One of the best ways to improve the performance of a sluggish websites comes in the form of image optimization. As sites become increasingly visual, it’s easy to get carried away and add significant amounts of data to each page load. This can quickly bog down your server, increase load times for visitors, and do a number on your bandwidth bill.

One simple and easy solution to this problem is to run your site’s images through an image optimizer. By reducing the file size without significantly impacting an image’s visual appeal, you can achieve faster page load times and lower per-visitor bandwidth usage which will make you and your visitors very happy.

The problem with many of the current image optimization solutions out there is that they degrade the quality of your images significantly. This is a problem across the board. If you reduce the amount of data in each image file, corners get cut and quality is sacrificed. It’s because of this that it’s important to try multiple solutions in order to find the workflow that works best for you and your site.

There’s no question that a professional-grade image editor like Photoshop or even GIMP will get the job done for you. For the interest of this article, we’ll go over some of the quick and easy solutions we use here at RocketTheme to make images we use on our sites load a bit faster.

ImageOptim

alt ImageOptim

ImageOptim is an excellent choice for anyone that frequently deals with PNG files and GIF animations that just wants something they can drag the files into and have it handle the rest.

ImageOptim handles PNG, GIF, and JPEG images through an number of different algorithms with the goal of reducing the size of your image files without actually changing the way the image looks.

It works fairly well. It typically reduces the size of images somewhere in the neighborhood of 20-60%. It works especially well in cases where large areas of an image have a consistent color and pattern. There are some compression artifacts to be found here and there, though it does a fairly good job given that it’s a free and open source solution.

ImageOptim does a great job, but it should be noted that transparency (especially with a gradient fade) is a tough job for any image optimizer. By reducing the size of your file, you’re potentially losing out on some of the quality in more demanding areas of the image. It’s best to test before committing your site to any of these solutions.

JPEGmini

alt JPEGmini

We love this app. JPEGmini is clean, quick, and remarkably consistent. It can reduce images by up to 5x, though the typical reduction we’ve seen hovers around 1.6x, which is still pretty impressive given the quality retention on either side of the optimization process.

Using JPEGmini is pretty easy. Just drag your JPEG files into the window and watch them shrink. JPEGmini only works with JPEG files, so you’re out of luck with this tool if you wish to optimize PNGs or GIFs. The original files are replaced with optimized copies, though you can configure it to create a second file in order to preserve the original.

Unlike ImageOptim, JPEGmini is commercial software. There is a free (Lite) version available which gives you basic optimization tools. You’ll probably want to throw down the $20 for the full version to make the most out of your experience.

Kraken

alt Kraken

Kraken is one of those solutions that is just too handy to leave off the list. Boasting better compression rates than Yahoo! Smush.it (also a great alternative), its Web interface makes it handy in a wide variety of situations.

You can use the free Web interface to great effect, though there is a paid version that gives you the ability to upload larger source files (up to 4 MB). Kraken’s price plans are a little confusing. You’re paying a monthly subscription for a set number of images and source maximums.

The reason it made its way to this list is simply because of its Web interface and reasonably good performance. You can choose between lossless and lossy output files and throw together an optimized site from virtually any computer with a browser.

Yahoo! Smush.it

alt Smush.it

Yahoo knows a thing or two about image optimization, and it’s made Smush.it available to anyone with an image that needs to be optimized. You can use the Web interface to upload or direct the tool to a URL containing the image you’d like to have “smushed."

Smush.it will then analize the file, remove any unnecessary data, and give you a lossless image that you can use on your site. If you upload or direct it to multiple images, you’ll be given a convenient link to a zip file with all of your optimized photos ready to be deployed.

The optimization itself isn’t going to make a world of difference in terms of file size, though it will maintain image quality and give you some level of improvement over the bulkier original.

Honorable Mention: TinyPNG

alt TinyPNG

If PNG files are the source of clutter for your site, then TinyPNG.org might just be the best solution for you. It has a quick, clean click-and-drag interface allowing you to upload your PNG file and receive an optimized version in its place.

It’s quickly becoming a favorite tool for shrinking the size of PNG files without having to install applications to do so.

Testing

We decided to test the front-runners in our roundup using a 535KB JPEG file with plenty of color and details to compare with. The original file, as well as the optimized results, are available below.