Compressing images for your website

Why bother?

We have all got used to creating hi-resolution images and video; most mobile phones can now create files at broadcast quality. That was unimaginable a few years ago. 

The files we generate are getting exponentially larger. And with so many of us creating so many files, the storing and moving of data is becoming a global problem.

Some estimates say that by 2030, one fifth of global electricity use will be through IT, data transfer and storage. That is unsustainable. 

Even if you’re not fussed about the sustainability argument, it’s worth remembering that every time an image is saved on, searched for and retrieved from a database, it is taking a fraction of a second. Those fractions add up and slow down your servers and your website. And you are paying for the storage. 

The smaller you make the files, the faster and cheaper your server will be.

Doesn’t my website already compress images before displaying them?

Yes, if we’ve built your website then we’ve built compression into the set-up. Your site will choose the optimal image size based on the size it needs to display. And we’re doing all sorts of other clever things like caching copies of the images so they don’t need to be retrieved from the database each time.

But we still need to store and move, and search through the original images that you upload to the server. So making those files smaller will make the whole process more efficient.

What are the numbers?

You don’t need to know about coding or be a maths genius, or even know the terminology used, to understand the huge potential savings from compressing images.

A full size image from a mobile phone might be 25MB. Simply saving that in an image compression file type (such as jpeg) can reduce that to around a fifth of that size. With some extra compression that image might be reduced to roughly 500K or less. 

That’s a fiftieth of the size of the original.

Note: different images will compress in different ways, producing different results so the maths can be complicated and seemingly unpredictable.

Different file types

As you might imagine, compressing and storing data is complex. There are many different approaches, each with their own advantages and disadvantages, and their own weird names and acronyms. Tiff, EPS, GIF and PNG are all useful for different purposes.

The most widely used in digital image compression is ‘jpeg’ or sometimes ‘jpg’ (pronounced jay-peg), created by the Joint Photographic Experts Group in 1992.

Jpeg uses an algorithm to divide images into a grid and then average the tonal values across a group of grid references.  

The process is known as ‘lossy’ compression because you saving the reduced data and discarding the original. Each time you resave a jpeg the quality reduces.

Most image software lets you use a slider to decide how ‘lossy’ to be, and therefore how compressed the image will be.

What size to save your images

The dimensions (height and width) of an image are an important factor to consider. You should save your image at the maximum dimensions you might need it. 

As a general rule we’d say that a full screen image on even a very large screen needs only be around 3000 pixels wide (perhaps 4000px if its a really key display image).

And if the image is going to be used smaller (in boxes or discrete areas of the site) then you can afford to make it smaller.

Of course there is a reduction in image quality. But in most cases, even the most rigorous compression produces barely notable loss of quality.

The places you might notice issues are around the edges of sharp lines or large areas of relatively flat colours. See below for zoomed-in examples of images compressed from the image above.

What software to use

Almost any image editing software will allow you to save jpegs and decide the level of compression. 

If you have Adobe Photoshop then that is the industry standard and gives the most visual control. But you don’t need to use Photoshop. 

‘Preview’ is free software on all Mac computers and ‘Paint’ is bundled on all PC computers. 

There are lots of free online software options, ‘Gimp’ is great. 

And there are some excellent online resources: tinyjpg.com is our favourite and gives great results. 

We know that you won’t be used to using these software packages and platforms. If you ever need help, let us know and we’ll happily guide you through using whatever solutions you have to hand.

To summarise:

1. Store original, uncompressed images on your local computer or internal networks.
2. Use image-based software to crop and edit from the original, and make a copy.
3. Keep the dimensions as big as you can, as big as the maximum size it will be displayed – 3000px wide is usually good enough for almost all on-screen displays, 1000px wide is usually enough for images in smaller boxes.
4. Compress that image using your software or an online service.
5. Use your naming convention to give the image a meaningful title, and upload it via your content management system.
6. If you need help, let us know.