WordPress optimisation is an interesting topic that has been covered a thousand times over. What is never said is that there really is no “quick fix” or one size fits all solution to optimisation. At its core WordPress provides you with the means to achieve the things you want but you still have to put in the hard yards.

Image optimization has one of the biggest impacts on a website and it’s something that is commonly overlooked by clients just about every time. This is simply due to a lack of knowledge but this can be helped. Image optimization can be made simple with the right tools and the workflow behind it. It doesn’t have to be a tedious process and it certainly doesn’t have to be difficult.

So we’re here to cover how that’s done.

1.0 – Start behind the scenes.

The first step consists of the size of an image. It’s common to be given an image that’s 3000px wide and who knows how tall. These images are usually 10mb cretins that will destroy the load time of anything. Throw two or three of these on a page and you can forget your mobile data demographics.

So what’s the solution and what sizes should you be using?

Glad you asked. First off this issue can be greatly helped by your developer. WordPress has core functionality that allows for pre-cropping and selection of an image. For developers reading this, here’s your ticket. A 3000px wide image can be pre-altered for the section it’s being used so it’s scaled to say 300px tall and 450px wide.  If the given space is never bigger than that anything extra is simply overkill. Doing so can reduce an image’s size from 9-10mb to 1-2 alone. So that’s step one. Developers should be implementing the right size.

What comes before that is from the client. Most agencies/developers will handle this themselves if they take care and precision with there work. This has to do with simply resizing the images before they even get handed over.

The height isn’t a massive concept here. It’s the width that matters, the height will scale down in ratio. So, coming back to before. What size should you be using? The general safe zone is 2000px wide. Yes, monitors can go above and beyond and there are 4k resolution monitors that are massive. The challenging argument to this is you’re not trying to account for the 5% here. You’re trying to account for the 95%.

So this leaves the question of how you go about doing this?

Lucky for you, all operating systems have software already waiting for you to come and check it out, On OSX you can achieve this easily with preview.

Windows is a tad less fun but still achievable.

2.0 – How to optimize an image.

There are multiple online simple ways to optimize an image. Sites that simply let you upload your folder of images/image and allow you to download a zipped version all set up and ready to go. In our experience, TinyPNG tends to be the best for this kind of workflow. The optimizations done really well and your images are returned for download very quickly. For those that want to go one step further, you can.

The next step comes from the wonderful people over at ImageOptim. ImageOptim is quite simple software, effectively achieving the same thing as uploading an image online but with a few extra benefits and settings you get access too. One of the drawbacks of ImageOptim is that optimizing PNG images is quite slow, however, this can be rectified through their settings. Aside from this, the level of optimization and retention of image quality is simply exceptional.

Combining all of the above methods you should be able to quite easily come out with an image that’s around 300kb. This is a benchmark and sometimes it’s give or take and you end up with some images that are bigger / smaller. However being around this range is good. You shouldn’t be sacrificing quality and you end up with a website loading time that’s miles better.