Posted by Roger

In the last post, I talked about how important it was that web pages load quickly so preventing your readers having to wait too long before seeing your content. Uploaded photos are one of the main causes of slow pages and this post looks into this issue and gives some suggestions about how to handle it effectively to give faster page load times.

Evidence

Firstly, let’s see some evidence for the culpability of images. The http archive is a great source of information about web pages and the graph below shows the average composition of web pages over the last 6 months.

Images make up a large percentage of page weight Without going into the detail, we can see from the pie chart  (source) that images make up the majority (62%) of the size of the average web page. Mostly these images are jpeg files which are the type of images that you would upload from your digital camera or mobile phone. Anything we can do to reduce the size of the images placed on our web sites will speed up the load times.

What is size?

In the context of images and photos the word size can have two meanings:

  • The number of pixels wide and the number of pixels high. Let’s refer to this as the image’s dimensions.
  • The number of bytes an image occupies when it is stored on disk. Let's call this image weight. Generally speaking the larger the dimensions, the more bytes it takes up – but more on that later.

Our aim should be to keep the image weight to a minimum because, when your web page is transmitted to a screen, all those bytes have to travel across the network (Wi-Fi, 3G mobile or whatever it may be). Fewer bytes means faster transmission.

Action 1 – Resize Images

A photo taken with a fairly average phone camera is likely to be somewhere around 3000 pixels by 2000 pixels or an expensive professional digital camera may produce images that are 7000 pixels by 5000 pixels or more. This is great for seeing the detail but even the dimensions of the smaller of these two images is more than double the size of an average laptop screen!

So, the first thing we should do before uploading an image to a website is to reduce its dimensions to the maximum size it can ever be shown at on your web page. There’s little point uploading an image that is 3000px by 2000px if it is only ever going to be shown on your website at 500px by 300px. If you do upload a larger image, the browser will conveniently shrink it to the necessary dimensions on screen (usually) but the much bigger image has to be transmitted over the network before this can happen.

Photo with reduced dimensions Here’s an example. I took this picture of Oxford High Street last summer on my oldish compact digital camera and it was 3008px by 2000px and 2,347,945 bytes. If I was going to display this image on a web site I would probably not want it to be bigger than 500px wide. So let’s resize it to 500px by 332px.

Resize images before upload There are a number of tools available to handle image resizing and compression. On Windows, the easiest way to resize an image is to use Windows Paint as seen in the image above. Just by reducing the dimensions, the size on disk has dropped to 131,004 bytes – so it is only 6% of its original size.

Action 2 – Compress Images

However, there’s more we can do. Software is available that can compress images to much smaller sizes without significant loss of quality (I’ll give some examples of these later). I have just compressed this same image – it keeps the same dimensions but its weight has reduced to 28,771 bytes which is just over 1% of the original – we have saved over 2 million unnecessary bytes from being transmitted across the network. That’s a huge saving in anyone’s books and will make a big difference to the experience that your site visitors have on your web page.

WordPress

If you’re running a WordPress site, then much of this resizing and compression is done for you automatically. When you upload an image to WordPress it will create several (usually 3) different versions, each of different dimensions (which can be changed) and, in doing so, it has a go at compressing those images too. Compression can usually be improved, especially on the images with larger dimensions, so if you are concerned about this, there is additional software than can be installed within WordPress that can squash the images down still further to optimise the page load speed.

The latest version of WordPress (3.9) allows you to resize images easily within posts and pages which is great for getting the layout right. However, be aware that this does not change the image's weight, i.e. the number of bytes it takes up when transmitted to the screen.

Other tools

If you’re not using a system that will automatically optimise images or if you want to handle the image compression yourself, here are three options:

  • JPEGmini - you can use this for free but you can only compress one photo at a time. If you want more, you would need to purchase the software.
  • reSmush.it - a free tool
  • Kraken.io – this seems to offer the best size reductions and it’s also free. And, unlike JPEGmini, you can compress multiple files via their web interface.

If you need any help with any of these tools, please let me know.

Conclusion

As a web site owner, faster page load times are good for the people who visit your site and it will also contribute to better search rankings in Google. By using some of the techniques I have covered here, you should be able to improve your page load speed, giving your visitors a better experience of your site, so improving the way your business is perceived.


More from the blog

Mobile Usage - Actions to Take

More and more people use their mobile smartphones to access the internet

This article looks at the growing usage of mobile devices to access the internet and proposes a series of actions to be taken by businesses to improve the effectiveness of their website for these devices. This includes ways of checking if your site is mobile friendly, thoughts about page load speed, AMP pages and search engine optimisation.

Read more

What to expect from a web agency

11 feature of professional web agencies

There are lots of web agencies to choose from. Some are large organisations, some are small; some are experienced in certain types of project, some are more generalist. However, whatever size or shape, I believe that there are certain features that every web agency should possess to help ensure a smooth path to a successful outcome, particularly for new websites but also for SEO work, web security, web performance etc.

Read more