How to optimise your images for the web


Learn how to resize images for online publication without sacrificing quality.

Load faster, fit better, look great.


When uploading pictures to the web, there are several things to consider. Bloggers, businesses and the average social media user alike can benefit from knowing more about the most efficient ways to get images looking great, without affecting how long they take to load or losing quality when posting online.

Gotta load fast

A file’s size affects how long it takes to load on a web page or blog, but some methods of minimising it can make images blurry or pixelated.

Even if you’re not a blogger, social media services like Facebook and Twitter or messaging services like iMessage and WhatsApp have one-size-fits-all compression software that work fine most of the time, but when you really want an image to pop you can often get better results doing it yourself.

How big is small enough?

As a rule of thumb, on a website or blog aim for 250 kilobytes (KB) or smaller. One megabyte (MB) or more is far too big in most situations.

Cutting the kilobytes

Reducing the overall number of pixels will reduce a file’s size and change how large the image appears on a screen. Not all programs handle this equally and, as a result, picture quality can suffer.

This feature is often found under a tool called 'image size', 'resize' or 'scale image'.

We suggest using the free programs GIMP or IrfanView for this particular task. As an example of how to do this, we’ll use GIMP.

Scale image-OL

Open your picture, then click the Image tab at the top of the screen. Select Scale Image and change either the width or height; the other value will adjust to keep the same overall ratio. It should measure in pixels (px) by default, which is the most accurate method for resizing.

Click Scale and your image will resize to the pixel dimensions you set.

Make sure your images are safe by backing them up. We test the latest backup software programs to help you find the right fit.

PNG or JPG?

Changing the file type (AKA extension) can have a huge impact on file size. The two most common ones are JPG and PNG, not because they look the best, but because they offer a good trade-off between quality and size.

  • JPGs are best for most images. Anything with people or a large array of colours or colour gradients will take up less space as a JPG than it would as a PNG.
  • PNGs are best for simple monochrome images. For example, the CHOICE logo takes up far less space as a PNG than it would as a JPG, because the colours don’t have any gradients. Another bonus is that PNG images can have a transparent background. That means you could place the word CHOICE over anything, no matter the colour, without it needing a white or coloured box around it.
Top: PNG with transparent background. Bottom: JPG with background.

You need a program that can open and save to multiple image file types, such as GIMP, IrfanView, Paint.net, and Pixlr Editor – all of which are free.

There are two common ways of changing image file types:

  • Save as is the most common option. In most editing programs, open your image and click File then Save as. There should be a drop-down list of file types or file extensions.
  • Export is similar to the 'save as' function, but usually allows for multiple files to be handled simultaneously. If your imaging program doesn’t change file types via 'save as', look for an export option.

JPG quality adjustments

If a JPG file is still too large after you’ve reduced the number of pixels, you can shrink it further by adjusting the quality. There’s usually a percentage slider titled Quality, along with a file size estimate.

quality slider-OL2

Move the slider towards zero until the file size matches what you think is a good trade-off between quality and kilobytes. As you adjust the slider, you should also be able to see an image preview to help you gauge quality.

Image aspect ratios

You might be familiar with aspect ratios from TV screens, the most common of which these days is 16:9. That means for every 16 measures horizontally, it’s nine vertically.

Various online platforms prefer certain aspect ratios, and may even automatically crop your images to specific dimensions. This can mean your beautifully composed pic is suddenly offset, or that parts of it are hidden from view.

According to the free online imaging service Snappa, these are some common aspect ratios:

  • Facebook post = 4:3
  • Instagram post = 1:1 (square)
  • LinkedIn post = 300:157

Cropping to ratio

Using the image editor GIMP as an example again, open your image and double click the crop tool. Make sure the checkbox next to Fixed is ticked, and that Aspect ratio is selected.

Below, enter the aspect ratio you want, then click and drag a box around the part of the image you want to keep. Hit enter on your keyboard and the image will crop to the correct ratio.

Crop 4x3-OL

With these simple yet effective steps, you can easily make the most of your online images and get your business, blog or social media posts looking top notch.


Leave a comment

Display comments