Optimise Images

This is part of our guide on improving page speed using the Google page speed insights developer tool. In this article we are discussing how to optimise images. We will be writing this article for novices using plain English and attempting to add a little more light to the explanation given by Google.

What are Optimised images?

In many cases image files of a very high quality which is required for printing good quality documents. However many screens do not display at that high quality and so in general the image quality, such as the amount of colours, can be reduced without noticeable change in quality for web users. Additionally images are normally larger in actual size than they need to be on the web page and they are actually downloaded as large images and then told to display smaller by the CSS or HTML.

Why Optimise Images?

A websites images are, in most cases, the largest files and greatest drag on servers meaning that they dramatically increase the download speed of any website. Additionally images are shown to improve user experience and so graphic rich sites are the norm. Most sites have a minimum of 5 graphics on the home page so a huge amount of resources go into downloading all the graphics for any particular page.

There are ways to reduce the amount of graphics used on a page such as using CSS to create coloured backgrounds instead of background images where possible or using HTML codes to create simple graphics (see Image for some examples. To use the codes simply copy the code in the first row replacing the x with the number in the corresponding column).

While these options are a good idea to increase the overall download speed they are not always practical and it’s never a good idea to substitute a useful graphic for a weaker substitute simply to improve page load speed.

So how do we reduce the memory requirements of an image?

Well as explained above. To optimize an image we need to reduce the quality and size of an image to meet the requirements of the website. This can be done with software but we will show you the easiest way.

 The image above shows the google pagespeed insights results page for a site without optimized images. As you can see down the bottom of the results (indicated here in a red box) google has the option to download optimized versions of your website resources including images. Simply click on the link and your browser will start downloading a zipped version of your files. Locate the downloaded file (you can right click and select ‘show in folder’) and unzipped the file using winzip, winrar or other similar software.

A folder will be created containing the optimized images, CSS JavaScript etc. In this case you need to copy all the images (highlight and press Ctrl + C) and then upload them to your site using an ftp client. (We have another article explaining how to use ftp clients – Sorry for the inconvenience but it requires a lot of direction and too much to add to the bottom of this article).

And once uploaded that is it. Congratulations, your Images are now optimized. That’s another tick and an increase in points for your google pagespeed insights results.

To learn more about Google pagespeed insights tool and follow our guide on improving pagespeed please click on the link below.

 Improving page speed using the Google page speed insights developer tool