Reducing The Dimensions

The biggest barrier to upload will always be the file size. Perhaps you’ve tried to upload an image to an email once, only to be told that the attachment was too big. The same applies to a website - if the file size of the image is too big, it can reject it.

So what determines an image’s file size? Well, an image file describes every pixel (dot) of an image. For every pixel it describes the location and the colour it should appear as. So naturally when images have larger dimensions the file size also increases - there’s more that needs to be described.

Resizing the image to have smaller dimensions is a simple way to do this.

Increase The Compression

JPEG, the image format most photographs would be stored as, uses what we call “lossy compression”.

That means that we will throw away some of the data we think isn’t actually needed to display the image. For example, a picture of the blue sky with clouds would include thousands of slight variations of blue and white - each pixel would be different.

Lossy compression would say “this blue and this blue are so similar, let’s make them the same”. So instead of storing 2 different colours, it stores 1. On a detailed picture this can saves hundreds of bytes - which add up to become kilobytes and megabytes.

Done well, the human eye probably won’t notice lossy compression. But if the compression is set too high, you’ll start to see where the colours have been compressed. Take a look below to see if you can see the difference.

On the left we have very little compression enabled and the file size was 700KB. On the right we put it down to 5% quality and the file size reduces to 51KB - but the quality remains pretty good at this low resolution.

But if we zoomed in we'd notice the difference. In particular take a look at the detail on the cat’s fur here:-

So you can see the decrease in file size can be dramatic - but the drop in quality can be too. You’ll want to increase the compression up until you can start to noticeably see artifacts in the image.

Tools Of The Trade

The most well known tool for manipulating images is Photoshop - but that’s very much overkill for these requirements.

For Mac users I recommend Pixelmator. It has a one-off cost of about £20 and can be downloaded from the App Store. You can read how to resize an image and how to export an image for the web (including changing it’s quality) on their online user guide.

If you find yourself having to resize 100s of images at once, that’s not a problem either. Pixelmator works with Mac’s Automator. You tell it what to do once (for example, resize an image to be 20% of the original dimensions) and then run that on all of your files.

For Windows users there’s This free tool is less intuitive and lacks the clear documentation that Pixelmator has, but is still really easy to find your way around. In particular you’ll want the Save As settings on “File > Save As” and then open the “Save Configuration” window to manage compression, and “Image > Resize” - and be sure to tick “Maintain aspect ratio” so it doesn’t stretch the image.

Next: Cropping Images

In Part 2 of this series we’ll explain how cropping images works. Subscribe to the blog below to be notified once this is published.