Speed up WordPress with Image Optimisation

Having a fast loading site is vital in these days, with the majority of internet use on mobile devices. There is no room for large image files, ever tried to load page using a shaky 3G signal, only to find out it’s loaded a 3MB image!?! (it’s painful and uses up your valuable bandwidth).

So how best to make sure that your image are bandwidth friendly? OPTIMISE! (or as Americans say, optimize). You can save for web in Photoshop which does a great job, however it leaves lots of data bloat that could be removed to make the image file smaller.
This where image optimisers step in, essentially they remove any surplus data from the file whilst keeping the quality of the image file. Some of these optimisers have been built into WordPress plugins, so it’s super easy to shrink those images down.

 

SMUSH IT

banner 772x250 1

Originally a Yahoo based online service where you would upload images to be optimised. Then built into a WordPress plugin for your pleasure. I used to add this by default into client websites as it worked well and there wasn’t much in the way of other options. Unfortunately, it hit a rocky patch and became slow and unreliable.  As such we dropped it in favour of EWWW IMage Optimizer. (Following this rocky patch, Smush it came back with a vengeance in the form of a revamped plugin by WPMU DEV. I have not used this revamped plugin, but judging by it’s rating, it’s a good’un!)

 

EWWW Image Optimizer

banner 772x250 600x250 1

Weird name but fantastic tool. EWWW Image Optimizer has a nice simple interface allowing you to bulk optimise images. You can click and go off for a cup of coffee, then come back to shiny optimised images! This plugin is now the default optimiser that I install on all client websites. It’s proven itself to be a swift and reliable optimising tool. It is also easy enough to use for the not-so tech savvy user.

 

TinyPNG – Compress JPEG & PNG images

 

banner 772x250 2

Enter a new challenger! TinyPNG has been around a while, that said I have only just started using it. It was recommended on Twitter following my Tweets about optimising my business website.

I was skeptical at first but was blown away by how much extra optimisation it was able to bring. I uploaded images that I thought had been totally concentrated down to find there were further size reductions possible. Using it I was able to get Duck On Water’s website loading time to 1 second and lower! TinyPNG’s website allows you to upload, optimised images then download the optimised images. Whilst this is a great service, it can be a laborious process if doing that with lots of images.
This is where their rather superb WordPress plugin comes into play. PLEASE NOTE: it is called “Compress JPEG & PNG images” in the WordPress plugin directory, not to be confused with “TinyPNG for WordPress” which is not built by TinyPNG developers.
Whilst the website optimiser is free the TinyPNG Plugin has restrictions to 500 free image per month. After that it’s charged at a very small fee per image, full details can be found here.

 

Before & After

In order to get a good idea of how much your optimised images have improved your site you can use online tools that measure a web page loading time and metrics. There are many available, from Google, Ping.com, YSlow to name a few. To save time and to keep a record of statistics I use GTmetrix. They use all the best tools from various services and compile the results in one place. You can also keep a record of these by creating your own account. The offer all the FOR FREE! however they do have a pro account if you require more in depth tools. Remember to check your website BEFORE you optimise the images, then after, so you can compare the results. 😉

Duncan Michael-MacGregor

Duncan is an experienced Project Manager with over 17 years of experience in Web and UX design. Duncan is also a professional consultant for businesses looking to achieve results online and provides mentoring to business owners.