Optimising Images for the Web

As you may have heard, the average web user will judge your website (and your brand) within 5 seconds of landing. If it takes an age to load, most users will close your website straight away (known as a bounce). The most ‘heavy’ parts of your website, in terms of file size, are almost always the images, so optimising them (reducing the file size whilst still retaining an acceptable quality) is very important.

Here are some well-known statistics, to demonstrate the effect of just a minuscule lag in load time:

500 ms slower = 20% drop in traffic (Google)
400 ms slower = 5-9% in full-page traffic (Yahoo)
100 ms slower = 1% in sales (Amazon)

In essence, this means that you cannot take a photograph on your camera and simply put it straight on your website; there is a vital step you need to take in between taking the photo and adding it to your site. Most people do not have expensive image editing software on their computers (like Photoshop), but that does not mean that you can’t optimise images!

Guidelines

  • Save to JPG format, usually around 60% quality (if you have the option), as this is the most compressed image file format
  • Reduce width to a maximum of 500 pixels for use on VirtueMart, for example, making sure proportions are constrained (i.e. when the width is changed the height automatically alters to the same ratio, and vice versa)
  • If you know the size of the area you want to place your image, resize to that size instead (it’s not a good idea to create an image larger than the size you plan to display it at, otherwise you are adding unnecessary extra load time to that page)

Here are some useful, free ways of optimising your images and photographs:

  • Google Picasa – You can import a folder of photos and resize multiple images at once (take a look at this tutorial)
  • GIMP – A free alternative to Photoshop (much more advanced than Picasa, but allows more control)
  • Online Resizer – If you want a quick and very easy (but temporary) way to resize your photos online, this may be for you.