If you have a website and have ever talked to someone like me (web designer) about the images on your site, you'll no doubt have heard the phrases "processing images" and "image optimisation". In the next two blog posts, I will explain what all this means and why it's vital to the success of your site. And how to do it.

Image Size

When you talk about the size of an image, it generally refers to one of two things, or sometimes both! The dimensions of the image or the "weight" of the image. These are the things you need to get right when preparing your image for the web.

Image Dimensions

In the real world, we think of the dimension size of things in things like inches, centimetres, metres, miles, etc. In the print world, image dimensions are usually measured in inches or centimetres. But in the web world, these mean nothing. Web images are measured in pixels. To confuse things even more, there is no standard size of a pixel, but really, you don't need to worry too much about that. We'll cover why in a bit.

Image "Weight"

This one is a bit hard to explain, so bear with me!

When someone visits your website, they have to download all the code that makes it work, from a server to their device (iPhone, laptop, etc.) The code they download will be used by the internet browser (Chrome, Safari etc.) to make the website appear to them as it's intended. This code will include information about the colours, the layout, and so on. It'll also contain all the text with code instructions about where it goes. The images will also have to be downloaded in code form.

On most websites, the images make up the most significant part of the download.

A typical web page might be 1MB's (megabytes) in size. Of this, images might make up 0.8MB's (also known as 800KB's). This 0.8MB of images would be called the total image "weight".

Follow?

So now let's break it down to each image using as an example; my Kiddo template, see the image below.

This webpage has five images on it. The big one at the top which spans the entire width of the site, three more below it in a row, then another in the next section underneath.

Each of these images is different dimensions; the big one at the top is 1800 x 1200 pixels, the three in a row are 600x400 pixels, and the last is 700 x 1000px. So it follows that each is a different "weight" or size in kilobytes (KB's).

The big one is about 200KB's, the three small ones about 70KB's and the last one about 100KB's. This is about normal and about ideal.

The key with an image weight is to get it as low as possible. As a low "weight" means fewer KB's to be downloaded, which means a faster website. Which Google and your users like" NO ONE wants to wait for images to appear.

So weight means the size of the image, not in terms of dimensions but KB's.

Make sense?

So why do images need to be processed and optimised for the web?

By now, you are most likely asking yourself that question. The answer is simple...

The average modern smartphone take pictures that are enormous both in terms of dimensions and weight. I don't know the precise specs, but the latest iPhones take images of about 6000x4000 pixels in dimension and about 6MB's in weight.

You could take these images and drop them straight into your website, and everything will look fine, as modern browsers will scale down the image, so everything fits. But if we were to take the Kiddo example above, as it is now with processed images, the total weight of all the images is about 400KB's, which would download in about two seconds. If these were not processed and straight out of an iPhone, they'd be about 20MB's (nearly 40 times the weight of the processed ones) and take potentially several minutes to download.

And who is going to wait a few minutes for some images? No one. Plus, Google times pages, and if they take too long to load, Google will push you right down the search results.

So... If you fire images onto your website directly from a smartphone with zero processing, you will almost certainly kill your website overnight. And that's not good.

Conclusion of part one.

I get it. This is all double dutch to many, but if you are going to ever add images to your own website this stuff is vital. Hopefully, the info above has explained why. In the next post (due in a week or two) I'm going to cover how to process your images.