Image Optimisation

Ben RyanHow-To, Speed Optimization, Web Design1 Comment

How to improve your Image Optimisation.

Web page speed optimisation is a crucial part of a site’s usability and Image Optimisation can help. Google considers page speed to be one of the 200 ranking factors that influence a website’s position in organic search results, not to mention, a slow site is just painful for your customers. If your web page speed optimisation isn’t up to scratch, chances are you will lose your site visitors to your competition in a matter of seconds.

Importance of Image Optimisation

Large images on your site a large contributing factor to slow web page speed optimisation. Altering the image dimensions in HTML isn’t quite enough because it still serves up the original image, just shrunken down. For example. What is the use of having an image with the dimensions of 1920px by 1080px when you are putting it in a space which is only 1000px wide? Before you upload that image to the site, use a program like Photoshop to reduce the dimension to 1000px by 563px.

Also, think about the format your using to better your Image Optimisation. JPG, PNG, SVG. All great formats but each have their place. I generally use JPG for larger images like backgrounds. PNG for smaller more detailed images. SVG for things like logos.

Additionally, use image optimisation tools which further compress the image to reduce its size:

Warning, I’m about to get my nerd on.

Recently on a customers website I found the below image on a blog page. On the page it’s self it took up 800px by 450px. The image that was being served was in a PNG file format, had a dimension of 1920px by 1080px, and as a result the file size was 954KB.

Improve your Image Optimisation and Web Page Speed Optimisation

When this customer changed the file type from PNG to JPG and kept the same image dimensions (1920px by 1080px) and compressed it using TinyPNG, the file size came down to 86KB. Thats a saving of 91%.

If this same image was taken down to 800px by 450px (the size it is seen on the website), using a JPG format, and compressed through TinyPNG, they would have been left with a file size of 21.9KB.

Comparing the original 1920px by 1080px PNG file to the new 800px by 450px JPG file, it’s a saving of 97.7% or 932.1KB. In my opinion that is a major saving and huge win for Image Optimisation.

Remember, think about the image, where your placing it and what type of file would be best suited for the job. And when Image Optimisation is involved, any saving is a major win for Speed and SEO (google ranking).

About the Author

Ben Ryan