When you put an image on a website, it has two sizes.

One is the visible size on screen (it's height and width in pixels) and the other is the size of the memory (file size) it takes up on the hard drive of the computer that hosts your website.

Aesthetically, you need to get the visible size right as too big and it might break your website - here's a great example of an image totally overloading our website from Natasha's post on how to resize images:

And too small and it's, well, too small:

We’re looking at file size in this article, as it has a huge impact on the amount of time it takes to download to your potential customer’s device – desktop, laptop, tablet, smartphone, whatever.

So what?

Unnecessarily large images take excessively long times to download and therefore provide poor user experience (UX). Typically a poor UX means that when people find your site, they are less likely to buy your products / use your services.

But doesn’t everyone have broadband?

Well sure, most of us do – but broadband speeds rarely match up to what the supplier says in the adverts, so that’s a bit of a red herring. Perhaps more importantly, Google tests your site for speed. One reason it does this is because it’s looking to see if your website is going to be a drain on its resources… Google may be huge, but it’s looking at all the content of the web, so it needs sites that will deliver information efficiently and quickly. Another reason for the speed test is that Google wants to rank sites with relevant content and good UX more highly, if your images are too large, then your site will likely not rank as high as it could.

Doesn't my content management system / blog resize my images automatically?

It might claim to, but it is probably doing a pretty bad job. Here’s a picture that I uploaded with the WordPress picture uploader:

And here’s the same one after I’d reduced it’s size in Picassa

The lower picture looks the same, but to Google it's 275 times smaller and therefore a far more efficient use of resources to download. The crucial difference to file size was changing the visible size of the image and reducing the quality from the sort of high quality needed to print a photo (which can be 2400 dots per inch) to the quality needed to render nicely on a screen (which is somewhere between 72 - 150 dots per inch).

The 1920’s advertising cliché “A picture is worth a thousand words” might be hackneyed but it holds true for your online and offline marketing still. Follow Natasha’s easy instructions on re-sizing images here - your picture can speak 1,000 words but stay less than 100KB.

Happy visitors, happy Google, happy bottom line.

Thanks to http://www.flickr.com/photos/rocketjohn/ for the wonderful pictures of Starlings doing their murmuration thing, just up the road from our Shepton Mallet office.