How to Optimize Your Websites Images And Why You Should

High resolution images look stunning, but they also tend to be larger (in terms of filesize), which translates to longer loading times. If your website is full of them, chances are some visitors won't want to stick around waiting for them to load.

Fortunately, there is a way around this problem without having to resort to low resolution graphics. The fact is, there are plenty of tools you can use to ‘compress’ or optimize your images to the lowest possible size, without incurring a noticeable reduction in quality.

In this article, we’re going to explore just how important loading times can be, before introducing you to two outstanding tools to help you optimize your images. We’ll even test them to see if they live up to their claims, so let’s get started!

Why Optimizing Your Images Is Important

Simply put, the larger your images are, the longer it's going to take for your pages to load. Of course, there are plenty of other factors that might affect your site speed, but large file sizes certainly won’t help matters.

The longer your website takes to load, the higher your bounce rate will be. Users these days are notoriously impatient when it comes to waiting for websites to load. Simply put, a slow website leads to a poor overall user experience.

As if that weren't enough, long loading times can also impact your Search Engine Optimization (SEO). Google has used site speed as a ranking factor for years, so it’s definitely worth paying attention to.

2 Free Tools to Optimize Your Website’s Images

In this section we will introduce you to two free image optimization tools and explain how to use them. As a bonus, we also tested the tools to help you make the right choice.

First, we’ll give you a quick run down of our testing method. We put together a basic webpage displaying a set of unoptimized images and measured how long it took to load, using the Pingdom Website Speed Test.

We then ran the images through each tool and measured the differences in loading times after optimization. At the start of the test, our page weighed 1.7MB and loaded in 0.789 seconds.

Let's take a look at the tools and how they fared!

1. TinyPNG

Despite its somewhat misleading name, TinyPNG enables you to optimize both PNG and JPEG files. Simply upload images from your computer to the website via the homepage, and the tool will automatically compress them.

TinyPNG can handle up to 20 images at once, with a maximum filesize of 5MB each. Once they’ve been optimized, you can download them individually by clicking download next to each file, or in a single compressed file by selecting the green Download All button.

If you're a WordPress user, you're in luck – there's also a plugin version available, which enables you to automate the optimization process.

Without further ado, let's see how TinyPNG performed during our test:

Loading time before optimization: 0.789 seconds (1.7MB)
Loading time after optimization: 0.294 seconds (635KB)

A single pass-through using TinyPNG managed to shave off 62.65% of the size of the page, and cut the loading time by more than half. Not bad at all!

2. Optimizilla

Much like the previous tool, Optimizilla supports both PNG and JPEG files, and can optimize several images at once. On the homepage, click the Upload Files button, select your images, and they will be compressed automatically. Then select Download to obtain the new files.

Optimizilla enables you to view your original image and its optimized version side-by-side once the compression is complete, so you can check for any noticeable differences.

The preview functionality also includes a quality slider, which enables you to further compress your images in exchange for a loss in resolution. During our tests, we noticed minimal differences by decreasing the slider down to the 60–70 range (out of 0–100).

Let's see what the results were using the default settings:

Loading time before optimization: 0.789 seconds (1.7MB)
Loading time after optimization: 0.418 seconds (902KB)

That's a respectable 46.95% file size reduction, with a decrease of 0.371 seconds in loading time. They’re not quite as dramatic as TinyPNG’s results, but if you're willing to play with the quality slider, you could likely surpass them.

Conclusion

Optimizing your images is one of the simplest methods you can use to lower your website’s loading times. It doesn’t even require that much work on your part, besides picking a tool to help you, and uploading the images once you’re done.

Before we part ways, let’s quickly recap the two tools we’ve covered in this article: