Image compression can have a significant impact on page load time. Compressing images can result in a faster page load time. A big part of my role as a Technical Evangelist at Yottaa is to speak at Meetup groups about web performance. In my presentations, I cover some easy ways to increase the performance of a website. One of my favorites is also one of the most impactful, and it happens to be incredibly easy to do: Lossy Image Compression. This post will cover the impact of compressing images on Page Load Time and I’ll even prove that impact with some tests towards the bottom.
When I talk at meetups, the way I introduce image compression to my audiences is to show a screenshot I took while building the presentation. I warn everyone that I am about to move ahead to a second image – one that’s compressed using a lossy algorithm. Many in the audience assume lossy compression results in significantly inferior display quality for the image. But when I click forward to the next slide no one notices the difference between the first and second image. Hasn’t happened yet, despite the fair warning I give. I even arrow back and forth between the compressed and uncompressed images, and the difference is still tough to see.
The difference in weight of the images, however, is unmistakable: The image starts at 1.1MB and after compression it?s 23KB. That’s about a 98% reduction in size and it took me seconds to achieve.
Extreme Example?
I’ll admit — the image I use in this example is extremely heavy, to begin with, at 1.1 MB. No one would ever put such a large image on a website – right? Well, not usually. But it’s not unheard of. Just a few days ago, we found an 8 MB image on the home page of a popular outdoor clothing retailer. That single image took Time To Interact from around 2 seconds to over 14 seconds. Sure, it’s only one image, but it only takes one poorly formatted image to completely slow down your site.
How to Compress Images
So how do I do this? The most popular tools for image compression are free to download and exist on lots of platforms. On the Mac, I use a combination of ImageAlpha and ImageOptim along with the built-in sips command to resize the images. (A cross-platform alternative to ImageAlpha and ImageOptim is Trimage).
In ImageAlpha, I usually stick with the defaults and then move the colors slider as far down as I can without making the image look weird, usually about 32. Then when saving the image, I check the “Optimize with ImageOptim” checkbox to complete that next step. All my screenshots go into a single directory and I actually use Hazel to automate this process for me. (Belvedere is a comparable Windows tool to Hazel). Within 20 seconds of creating a screenshot, I have an optimized version ready to go.
The Testing Scenario
Now let’s take a look at what implementing image compression and resizing can do for a typical e-commerce site. I created a page on my test site with 48 product images. These 48 images were arranged in a grid and displayed at 100px wide. But the source images were 500px wide. This means I allowed the browser to do the resizing. I have seen plenty of e-commerce sites do this, probably because they think there is no harm. But there is.
Testing Methodology
There are three test results shown below. Each test looked at a different copy of the same website. Apart from the images, the website was optimized fairly completely. This means the JavaScripts were concatenated, a CDN was used, assets were properly cached, and more.
The only changes made in each test was on the formatting of the images: changing native resolution and then optimizing the images individually. Each test was run 10 times in 12 different locations around the world. The results were then averaged together to come up with our overall summary numbers.
First Test – Original Images
In this first test, I optimized the site, except for the images. The images were all still in their original 500px wide format displayed at 100px wide. As you can see, the total size of this page was 22MB and it took about 6 seconds to get to the Time to Interact stage. Almost all of the page’s download size was taken up with images.
Second Test – Images Resized to 100px
In this test, the page and the grid were exactly the same. The only difference were the source images used. Before uploading them to the site, I resized them using the built-in OSX command sips to a width of 100px. For 48 images, this step took less than a second of development time to run. But the difference for the end-user was enormous. The size of the images shrank from 22MB down to 1.3MB and the Time to Interact was about 2.5 seconds.
Third Test – Images Optimized
In this final test, the page and grid were still exactly the same. But before uploading the images to my web server, I processed them with ImageOptim and ImageAlpha. This is a bit of a fiddly process because I had to experiment with the settings for each image. What works for a maximum optimization level for one image might not work for another image. If the original image is much less saturated, then you can probably reduce the number of colors more significantly without noticing.
For 48 images, this step took me about 5 minutes. The results are very good, dropping the image size down to 179KB. This dropped the Time to Interact down to about 1.8 seconds.
The Impact of Image Compression on Page Load Time
So by taking a few minutes to resize and optimize my images, I reduced the over-page size from 22MB down to 300KB and the Time to Interact from 6.1 seconds down to 1.8 seconds. That’s a 70% reduction in the time my users have to wait before they can interact with the site. If you combine this technique with the Responsive Image Loading technique discussed in an earlier blog post, you could potentially gain even larger savings in overall page load time. Try it out and let us know how much faster your site gets!
