Image Optimisation

Imagify offers three levels of optimisation – standard, aggressive, and ultra. These levels are essentially all about image quality. One of the trade off’s with image optimisation is that you do lose image quality. It is only small and normally imperceptible, but it can become noticeable if ultra high image quality is important to you. This would often be the case on websites like photography, art or jewellery site etc.

Does It Degrade Images Much?

A lot of it depends on the type of images you use. For example, standard quality will not degrade them at all, where as ultra does pixelate them somewhat, but not too much. This website is set to ultra quality as an example. The benefit being that the images are far smaller in ultra and thus faster loading than even the aggressive setting.

Some people go straight for the ultra setting and really notice the difference. When you start optimising, make sure you tick the box to keep the originals. That way if you do not like the ultra setting, you can revert back to a higher quality.

Generally, the aggressive setting will degrade your images by about 15% in quality to an 85% level. This is imperceptible to the human eye and the most common setting. If image quality is not vital, or you are using cartoon style graphics rather than photo’s, go for ultra. It’s still perfectly acceptable. Normally with an ultra setting you will be knocking off around 85% off your image size. This means a 1mb image will go down to between 100-150lb in size, which makes an enormous difference to the page load time and pagespeed scores.

Can I Do All My Images On Once?

Yes you can – watch the video for a guide on how Imagify works. A top tip is to also include your theme folder in the optimisations. Your theme will have a lot of images in it, for which some will be used around your website. By putting your theme images in, you will be maxing out the images you can optimise on your website.

To gauge how many images you need to optimise, look in your media library. It will tell you how many images you have. Then multiply this by 4 (on average). This is because WordPress creates multiple versions of your images for responsive design (thumbnail, 300 x 300px etc). You need to optimise every version of every image to get the full benefits of image optimisation across all devices.

Manual image optimisation is really for the purists. One advantage of it is that you upload a fully optimised image, at the correct size and thus you don’t have to run any image optimisation software at all. You also save server space as you don’t have any full sized images on there. However, it is quite time intensive, so for most people I would recommend just using Imagify.

I Have The Time – What’s Involved?

Firstly, you need to know the image dimensions you are using. There is a good guide as to image sizes and best practices on this page. Once you know your image sizes, you can crop any large images to exact size using any image software tool. Paint.net is free and normally good enough for this.

After you have created your images at the correct size, you can optimise them using an online tool. One of the best that has been around for years is TinyPNG.com. You just upload your images and then download the much smaller version that will be created. Two tips when uploading these images to WordPress:

Firstly it sounds silly but make sure you upload the newly optimised version to your website from the ‘Downloads’ folder. It’s so easy to upload the wrong one from your desktop or wherever you store your images. Secondly, use a slightly different name for the new image title. This is because of caching. Your WordPress install may not recognise the new image size for quite some time if you upload the image with the same file name.

After you have done this you could take it a step further and convert the newly optimised images to the WEBP format. Do this before you upload them. Go to the CloudConvert website. It follows exactly the same process as TinyPNG, except choose to convert them to WEBP. Then download the files and upload them to your server.

Using software such as Imagify is a lot easier, but in the end you will have raw optimised images uploaded so you wont need to use image conversion tools, or have WEBP conversions running all the time.

WEBP is a newer image format developed by Google. It’s images are much smaller than traditional JPG and PNG formats and so yes you should use them – providing your server supports the conversion of traditional images to WEBP.

WEBP actually came about in 2010 but despite that it still seen as an ’emerging’ format. You may read that you need the original JPG / PNG images as fallback as well as the WEBP formats, but the truth is Chrome, Firefox, Safari and all other major browsers do support it, so having only WEBP versions is now fine.

Does My Server Support Them?

Imagify has an auto setting to enable it on your server. Most of the image optimisers that convert to WEBP do this. It will check and tell you if your server will not serve WEBP images. Basically what needs to happen is that WordPress needs to rewrite your image files in one of two ways to work. Some servers allow it, some don’t:

The best way is via picture tags. This is an HTML5 command that will replace the <IMG SRC> part to a <PICTURE> tag. It’s pretty simple, but not all servers support it. The second way is to rewrite the files via the .htaccess file. This is not the preferred way to do it as it adds to server requests on pageload. However it is still beneficial to use WEBP if you have to do it this way.

Kinta is NGINX and is already setup for WEBP in case you have a non compatible server setup.

Imagify is an automated process that is very quick. The time taken really depends on the image sizes you are using. A normal image of under 1mb will take a few seconds to optimise.

Remember to multiply the amount of images shown in your media library by 4 to allow for all of the responsive sizes to be optimised. So say you have 100 images, 400 will be optimised. Multiply that by an average of say 5 seconds each and you get the idea. That will take just over half an hour to complete.

Bigger images can take longer, and shops can take a very long time to complete. For example if you have 10,000 media library images, you need to optimise 40,000 responsive images. Multiply that by 5 seconds each and you are looking at 2 / 3 days to optimise your images.

The average website has nowhere near this amount of images though, so the process should be complete within an hour or so.

So you have done all of your images. Go and clear all your caches again and run a pagespeed test. You’ll now notice your website is loading up much faster – especially on mobile devices.

Once you are happy with your images, move on to the next stage. The next part in the optimisation process is the WP-Rocket caching section, which will get your scores climbing even higher.