Optimising Images for Web

The often overlooked key to increased conversions.
Published on Dec 14 2015 by David Cooper

Images, Images, Images

In the last few years we have seen a dramatic trend towards image heavy websites.  

There are a few reasons for this:

  1. Users only spend 8 seconds on a website. The average person can only ready 42 words in this time.
  2. 'A picture tells 1,000 words'. 
  3. If your images are good, your website will be great.
  4. Images contextualise a business/ service.

This has become such a trend, that it is often an humorously accepted truth in the web community. 

B7JP33XCIAAbrx

Tim Caynes (@timcaynes) January 12, 2015

The Tradeoff

Images take up space. I mean, a substantially amount of space. This leads to a higher page load speed, leading to less conversions and usually less $$. Having an image heavy website an prove difficult for users who have not been trained on how to tame the beast. The biggest issue that has come from this trend, is something I hear every day:

"What size do my images need to be on my website?"

To answer this, we need to run through the difference between showcasing an image on a website, or for print.

How Websites Load Images

A website presents you with a pretty front - but it's really just a collection of files. The largest file types are image files, which are usually anywhere between 10kb - 10mb. Images on a website shirnk and scale for the various devices. The general rule is, if the image looks ok on your biggest screen, it will look great on everything else.

Any file that you upload to your website, will be loaded by users looking at your website. It's important to understand that you need to ensure all files are less than 200kb.

Why? Imagine that you are uploading a 1mb image to the website. It will take a user the same amount of time to see that 1 image, than 5 images that are 200kbs in size. 

To see how your website shapes up, you can use this tool supplied by Google.

How to Reduce your Image sizes

So, the photographer sends you a 39mb TIFF file are you have no idea how to reduce it to 200kb.

There are two scenarios here, you have Photoshop (or something similar) or you have no idea where to begin. If you are a Photoshop user, you can essentially skip the rest of this and read this tutorial. For those of you who can afford the monthly photoshop subscription, I recommend signing up.

Those of you who cannot justify the price of Photoshop, these are the steps you will need to take:

  1. Reduce the size of your image using Image Resize or Pic Resize to approximately 2000 pixels wide for large/ banner images. Anything that will only display as a small image will be fine with < 800 pixels wide.
  2. Compress the image using Tiny PNG
  3. Save the image to your desktop - view the size and attempt to compress further if necessary

Now you know the process, have a go! Remember, anything less than 200kb, without compromising the image quality is the goal.