Images are often the #1 element responsible for site loading speed, compression of these images can fix this, making your website load faster. Now, see how to do this.
Images can often enhance the quality of your website, and they’re key to implementing a visual marketing strategy. However, the more media-heavy your site is, the greater the impact on your loading times. If your website takes too long to load, it doesn’t matter how stunning it looks – it’ll scare visitors off.
The answer is to compress or optimize your images so they become smaller without losing any quality. In this article, we’re going to talk more about images compression, how it can help you, and use data to showcase how much of a difference it can make in loading times. Let’s get to it!
What is Images Compression
Images compression is a great way to optimize your site load speed.
In a nutshell, compressing images involves reducing their file size, so it takes up less space, and there are two methods: ‘lossy’ and ‘lossless.’ The former optimizes your images drastically while potentially lowering visual quality, and the latter only compresses your files as much as possible without affecting how they look.
Usually, you’ll want to go for lossless optimization. However, the difference with lossy techniques isn’t necessarily evident to the naked eye.
You should be able to spot some differences if you zoom in close enough. However, since we’re not displaying either image at full resolution, the differences are tough to make out. Given many websites’ space constraints, there’s no reason to upload a high-quality 5MB image when a compressed 500KB version could be just as suitable.
In any case, the main benefit of image optimization is easy to understand. The less storage space your graphics take up, the lighter your pages will be. This means users can load your website faster, which should directly impact its usability and ‘stickiness.’ With this in mind, let’s find out how much of an impact image compression has on the performance of an average website.
Images Compression Affects Site Loading Speed
No two websites will have identical loading times since they’re all unique. In short, the purpose of this test is to ascertain (on average) how much of an impact image optimization has on loading times. To that end, we built a website with three individual pages using Rare. The first page features the Homepage Portfolio layout, which we set up to include ten images:
None of these images are optimized, and the page weighs 1.7MB. We don’t have any plugins active on this test website either to avoid any elements that might affect our results. After setting everything up, we tested how long this page took to load using Pingdom Tools’ San Jose, California server:
Later, we’ll show you the results of our test in numbers. For now, we’ll set up one additional Divi test page to have more data to backup our results. For our second entry, we chose the Masonry Blog layout since it offers us a chance to showcase several featured images beautifully:
This page weighed in at 1.3MB, featuring the same set of unoptimized images as our earlier example – just using a different layout:
Now, we’re going to create carbon copies of both pages and replace their images with optimized versions. To that end, we’re going to use two different image optimization plugins separately – Compress JPEG and PNG Images and WP Smush. Here are the results from both pages, using each plugin separately:
| Initial Page Size | Optimized Page Size | Initial Loading Time | Compress JPEG and PNG Images Results | WP Smush Results | |
|---|---|---|---|---|---|
| Homepage Portfolio | 1.3MB | 1MB (-23.07%) | 2.84 seconds | 2.15 seconds (-24.29%) | 2.45 seconds (-13.73%) |
| Masonry Blog | 1.7MB | 1.3MB (-23.52%) | 1.69 seconds | 1.49 seconds (-11.83%) | 1.52 seconds (-10.05%) |
There’s a lot of information to unpack here, so let’s talk about what those numbers mean.
What Results Tell
According to our results, image optimization does have a significant impact on site load times. More specifically, our tests found that, on average, you can expect an improvement of at least 10% in loading times if you optimize every image on your site.
Some might think that 10% is not enough to justify the hassle of compressing every single image on your website. However, there are plenty of ways to automate the process within WordPress. If you fail to do so, you’re essentially saying “No” to better performance.
More importantly, image optimization is only one of many tweaks you should implement on your site to improve your loading times. For example, caching, GZIP compression, using a well-optimized theme, and many other aspects can be taken into consideration. If you implement all of them, your website should be blazingly fast!
Finally, it’s worth noting that 10% is at the lower end of our score results. Your gains will depend on how many images your pages include on average and which compression tools you use. In all likelihood, your loading times will probably improve further. However, you won’t find out until you try it for yourself.
Conclusion
Optimizing your images is one of the many ways to reduce your site load speed. However, it’s often difficult to imagine how much impact it can have on overall performance. In any case, WordPress offers plenty of tools you can use to optimize your images. You can even automate the process if you want to, so there’s no reason to avoid it.
During our testing, we found that image compression improved loading times by around 10% in most cases. This is at the lower end of the scale, though. We saw even better results during testing, up to a 24.29% performance increase. Your results will largely depend on how many images your pages include on average and the optimization tools you use.
Do you have any questions about which image optimization plugin you should use for WordPress? Let’s talk about them in the comments section below!
