Image compression and page load speed

Digital | 12 June 2013 |

Images on a website can have a big impact on page load performance. Specific image types serve specific needs and saving files in specific formats isn’t as straight forward as exporting from PhotoShop or Lightroom.

A simple example of this can be seen below the original image exported at 80% quality from Lightroom is 193kb in size.

The same image compressed using ImageOptim at 80% quality resulted in a 70kb file size.

Jan Eliasson UN Deputy-Secretary-General
Original – 193kb
Jan Eliasson UN Deputy-Secretary-General
Compressed image using ImageOptim – 70kb

The three main file formats of the web are .jpg, .gif and .png

Up until recently we have used both .png and .gif files throughout the website when displaying charts or graphics with minimal colour palettes. From this point we will be using .png over .gif. See this page on PNG versus GIF on the w3.org site.

With that out of the way what I would like to cover is suggestions on which tools can be used to compress image and graphic files to ensure the smallest file size with the maximum quality.

For the mac there is a tool called ImageOptim The application handles compression of both .jpg and .png formats

For Windows there is Riot (Radical Image Optimization Tool)
This application also handles .jpg and .png file formats and offers a huge range of options.

The third option if you are unable to install software on your computer is Kraken, a web based free service that handles both .jpg and .png file formats.

Based on our experience of all three tools we recommend a setting of 80% when compressing .jpg files. This should ensure you are getting no noticeable compression artefacts in the image but making a significant impact on the image file size.

We would also recommend scaling the image to the size it will be used before compressing it and uploading.

The .PNG file format is lossless so you may find that, when using this format you do not get a significant reduction in file size. Both Riot and ImageOptim do an amazing job at compressing .png files while Kraken does make a difference but not by a lot.

One last thing to note. Some CMS systems such as WordPress  may be setup to generate the same image at different sizes for your convenience.  So, say that you have output a photo at 1000 x 667px and use one of the above tools to compress your image. When you upload this to WordPress, WordPress will generate the same file at other sizes using it’s own compression scheme which is quite poor. This can result in having images that are physically smaller in size (e.g. 500 x 333px) but larger in file size.

Whenever possible try to scale your image to the size it will be used on the website and then compress it using one of the suggested tools.

The tools and methods are not the only ones that work. If you have your own techniques or tools please share them.

Related