Preparing your Images for the Internet: Part1 – Image Size

When a visitor views your website the time it takes for your page to load is directly proportional to the amount of content on the page. The biggest items to influence its loading speed are the images so it is vital that you prepare these images in advance so that they will load quickly.

If your image is a photograph it will almost certainly be too big.

Most digital cameras (even on mobile phones) exceed 5Mp, which produce a photo that is 2560×1920 pixels.

The most common pc screen size in use today is 1366×768 pixels*

Your photo as it comes from your camera won’t fit on the screen. Of course it does when you view it but this is only because the browser software resizes it to fit.

You can use your full size image for your web pages and everything will look okay.

Even if you have set the size smaller to fit into your layout, lets say 500×375 pixels the full size image (2560x1920pixels) is still being downloaded by the browser and then resized for display.

But you page will take ages to load. Why?

Well, the 2560x1920pixel image has a file size of around 2.9Mb and this has to be downloaded first and only then resized to 500x375pixels.

We can solve this problem very simply by resizing the image to the size that we intend to display it before adding it to the web page.

If we reduced the size of our photo in this example from 2560x1920px to 500x375px the file size would reduce to 168kb. That’s around a 20th of the file size of the original. In real terms that means it will load around 20 times quicker.

Who wouldn’t want their pages to load up to twenty times quicker?

JPG images also support compression and the figures above are based on a JPG quality setting of 100%. If you set the JPG quality to 50%, and at this size on a monitor you would be hard pressed to tell the difference, the size reduces to 25kb.

By resizing and compressing we have reduced the file size from 2.9Mb to 25kb that’s a massive reduction.

I’ve included the three files below so that you can see how they look to the eye. By now they have probably already loaded but you can get an idea their respective load time by doing a forced page refresh Ctl F5 on a PC.

Full Size Image (2560x1920px no compression)

Full Size Image (2560x1920px, no compression, 2.9Mb)

Resized Image (500x375px no compression)

Resized Image (500x375px  no compression, 168kb)

Resized image (500x375px 50% compression)

Resized image (500x375px, 50%,compression, 25kb)

Next we need to look at how we can make the file size even smaller and we will discuss this in – Preparing your Images for the Internet: Part2 – Image Compression.

* source – global Internet usage stats from www.w3counter.com/globalstats.php