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.
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.
Add a Content Delivery Network - CDN to your Wordpress Site in a couple of clicks
Speed up your site and increase possible traffic by using a WordPress Caching solution
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.
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.
|upload-testing.jpeg (original)||9.6 MB|
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.
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.
|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 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.
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:
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.
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).
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.