Both end users of a site and search engines prefer a site that loads quickly. In a recent survey, Kissmetrics found that:

• 47% of consumers expect a web page to load in 2 seconds or less.
• 40% of people abandon a website that takes more than 3 seconds to load.
• A 1 second delay in page response can result in a 7% reduction in conversions.

Optimising a site for speed can be a very technical undertaking, but there are two easy tips to follow that will make a significant difference.

1. Don’t go bigger than your requirement.

Often web pages will use an image much larger than they require, relying on the end user’s browser to resize the image to the desired size.

Reducing your image size can save a huge amount of bandwidth. One B2B site I worked on used to serve small thumbnail nail images that were over 400KB’s in size…for a 50×50 thumb nail image. Madness.

Correcting this single image reduced the page load time by 700 ms.

This graphic shows an image that should have originally been resized to 245×212, being resized by the browser.

2. Optimise the image to reduce its size.

The other major quick win you can implement, is to optimise all images to make the file as small as possible. This is especially relevant to images that come from a stock library, as typically they’re very large, high resolution files.

There are a number of tools you can use to optimise images to reduce the size of a file – the best, in my opinion, can be found in Photoshop.  However, there are other technical tools such as jpegtran which are better for converting a large numbers of images.

Here is an example of a correct image optimisation (done on a photo of our office ping pong table). The photo was originally 4160 x 2340 and 2.3 Mb in size. I resized this image for use on the web, to 600 x 337 pixels; when that image was optimised the size fell from 333Kb to 69Kb, a saving of 80%.

Original 333Kb

Optimised 70Kb

Follow these two simple steps, and your load time will decrease significantly.

Here are two further articles to follow up on if you’re interested in learning more:

http://designinstruct.com/tools-basics/5-easy-steps-optimize-your-images-photoshop/

http://linuxcommando.blogspot.co.uk/2014/09/how-to-optimize-jpeg-images.html