Atomic Smash homepage splash

Comparing WordPress image optimisation tools to speed up your page loading

Words by David DarkeApril 13, 2017

This post is the first in our series about WordPress optimisation. Over the next couple of months we’ll be covering topics that will speed up your site, this will improve user experience and help with your general SEO efforts.

Wordpress Optimisation

1

Comparing WordPress image optimisation tools to speed up your page loading

Over the next couple of months we'll be covering topics that will help speed up your site, this will improve user experience and help with your general SEO efforts.

2

Adding a Content Delivery network for super fast WordPress assets [easy]

Add a Content Delivery Network - CDN to your Wordpress Site in a couple of clicks

3

Add caching to WordPress [easy]

Speed up your site and increase possible traffic by using a WordPress Caching solution

4

Are simple errors and number of assets in your code slowing your site down? [intermediate]

Coming soon.

5

Full site PHP debugging to fix slow sites [Hard]

Coming soon.

With Google increasing the weighting of page load speeds for desktop and mobile sites, it’s getting more and more important that loading images from your server is as efficient as it can be. There are multiple methods of optimising images for use on your WordPress site but the best option for you will be dependant on your technical access and ability.

With these three methods, I’ll be uploading and optimising one source image, and comparing results. Also it’s worth stating that the main reason for these tests is to optimise images to reduce file size, but retain quality where possible, not just to blindly compress images without caring about quality.

This image in it’s original uploaded form is 5616 x 3744px and 9.6mb in file size. This is quite an extreme example, as we would expect the majority of originally uploaded image to be < 3mb, yet lets see the results.

I’ll be compressing this image to a total of 6 other crops/resizes each time, so results and savings can be compared across all the tests.

Standard WordPress cropping

Almost 99% of all WordPress themes available will use some form of cropping. Hardly any will just serve up the image you upload. In principal you can upload an image, WordPress will resize/save to the themes requirements and apply the installations’ global JPG compression value. This compression is fairly unsophisticated, yet it will be a massive improvement to the original image size.

This quality setting can be adjusted by adding this filter to your ‘functions.php’ file:

add_filter( 'jpeg_quality', create_function( '', 'return 100;' ) );

Simply replace the ‘100’ with a lower value.

Results – Test 1

Resolution WP
upload-testing.jpeg (original) 9.6 MB
upload-testing-1024x683.jpeg 169 KB
upload-testing-768x512.jpeg 112 KB
upload-testing-300x200.jpeg 46 KB
upload-testing-672x372.jpeg 89 KB
upload-testing-150x150.jpeg 38 KB

So there are massive reductions from the original image size when the image has been cropped, but this should be expected before the actual image dimensions have been vastly reduced. Even so there should be further reductions possible.

Photoshop + Standard WordPress cropping

For this test, I’ll use the same WordPress resizing function as before, but optimise the source image beforehand using Photoshops’ ‘save for web’ functionality.

Setting the JPG quality to 88 and the overall image size to 2000 x 1333 dropped the initial image’s file size down to 1.4mb. I then just uploaded to WordPress as before.

Results – Test 2

Resolution WP WP + Photoshop
upload-testing.jpeg (original) 9.6 MB 1.4 MB
upload-testing-1024x683.jpeg 169 KB 139 KB
upload-testing-768x512.jpeg 112 KB 82 KB
upload-testing-672x372.jpeg 89 KB 59 KB
upload-testing-300x200.jpeg 46 KB 16 KB
upload-testing-150x150.jpeg 38 KB 8 KB

File sizes have dropped and the biggest savings were for the smaller crop sizes. One thing to note though, because we are actually applying ‘lossy’ compression twice to the source image, the whole process takes longer from start to finish and the image quality is effected. Not necessarily in image clarity, but the colours of the final crops do seem to be more washed out.

WP Smush

WP Smush will be the first plugin to test for image compression. Once installed it runs through your image library and works out the images that need compressing. This means that previously uploaded images (your whole library) will be optimised.

wordpress-smush

It sends these images to it’s sister cloud image optimisation service to process the assets externally.  It’s admin interface is very clean and very well structured:

wordpress-smush-admin

The ‘Bulk Smush’ tool is used to captured older images and works very well although it is limited to only 50 images at a time. So if you have thousands of images, it will take a while to process everything.

Here are the images sizes compared to just WordPress:

 

Resolution WP WP + Photoshop WP Smush
upload-testing.jpeg (original) 9.6 MB 1.4 MB 9.6 MB
upload-testing-1024x683.jpeg 169 KB 139 KB 134 KB
upload-testing-768x512.jpeg 112 KB 82 KB 80 KB
upload-testing-672x372.jpeg 89 KB 59 KB 58 KB
upload-testing-300x200.jpeg 46 KB 16 KB 15 KB
upload-testing-150x150.jpeg 38 KB 8 KB 7 KB

This plugin has had the best results so far, the whole image compression process was very fast from start to finish. With the free version of this plugin, there are a few limitations. The previously mentioned 50 image limit to the ‘Bulk Smush’ tool can be frustrating and there is also a file size limit of 1mb. So in the results table, the original image wasn’t optimised because it’s way over this threshold. This might not actually be an issue though due to the fact we shouldn’t actually be serving up the original image to the public anyway.

One other thing to note, if you are working with copyright images, or photography that has certain rights and restrictions, it might not be possible to send (and save) your images through an external service like this. It’s worth checking with the image vendor regarding this.

optimise images with ewww

This final plugin combines the power of WP Smush with the flexibilty of the built in WordPress image resizer. The main difference is it actually uses the local server to do all the resizing. Because of this there may be some additions required on the server. From their plugin page it describes what is needed on your server:

The tools used for optimisation are jpegtran, TinyJPG, JPEGmini, optipng, pngout, pngquant, TinyPNG, and gifsicle. Most of these are freely available.

Most of these are very common on most shared hosts and if you are running a custom VPS they are really simple to install. You also don’t need all the tools, just a combination that fits in with your optimisation strategy.

Here is how it handled our test:

Resolution WP WP + Photoshop WP Smush EWWW
upload-testing.jpeg (original) 9.6 MB 1.4 MB 9.6 MB 8.7 MB
upload-testing-1024x683.jpeg 169 KB 139 KB 134 KB 134 KB
upload-testing-768x512.jpeg 112 KB 82 KB 80 KB 80 KB
upload-testing-672x372.jpeg 112 KB 59 KB 58 KB 58 KB
upload-testing-300x200.jpeg 89 KB 16 KB 15 KB 15 KB
upload-testing-150x150.jpeg 38 KB 8 KB 7 KB 7 KB

So it does seem to do a very similar job to WP Smush, but without any restrictions and using your own hardware and not distributing your images to an external sister service (win/win).

What we use

So we recommend using EWWW if your server is (or can be) configured to work. It’s array of options and levels of control are far superior to WP Smush and the whole process is far more efficient than resizing yourself through Photoshop.

EWWW also works really well with content delivery networks and requires no further tweaking if you already have a CDN setup through a caching plugin like W3 Total Cache.

Profile picture of David Darke

David Darke

As the lead developer and co-founder at Atomic Smash, David’s wealth of knowledge in website development means that all sites work seamlessly across desktop, tablet and mobile devices.

Go back to top

Keep up to date with Atomic news