Best Ways To Optimise Website Images

Images are essential for every website. They help sell your products or services, share information, help with navigation and make your website appealing to use. Unfortunately, they also use a lot of downloading bytes, which can cause your website loading time to be very slow. 

A slow loading website is not only likely to be ranked lower by search engines, but also can increase your bounce rate, as visitors will click on to another site without waiting for yours to finish loading.

However, you hold all the cards when it comes to your image file size and type, and that's called image optimisation.

What is Image Optimisation?

Image optimsation involves two things: shrinking the file size of your images without reducing their quality to keep page load times low, and getting your images ranking highly in search engines using image SEO.

There are four main factors that must align to achieve optimised images (high quality images with small file sizes):

• Image height and width
• image filenames 
• Image compression level
• Image file size, which is controlled by the image type

Why is Image Optimisation Important?

Image files can be large, which means they take time to download on the user's device when opening a new web page. The slower the page's loading time, the worse the website performance. Because of this, Google has on many occasions penalised websites with slow loading times by ranking them lower in search results. Website visitors also dislike slow loading websites, and as such, will click through to a different site.

By optimising your images, the benefits you can expect include:

• Faster loading speed - the faster the better. Any slower than two seconds and visitors will go elsewhere.
• Improved user experience - visitors expect instant page loading and when they receive it, they are likely to find the site enjoyable to use and engage for longer.
• Improved SEO - Google gives both text and image results in search results. People also search for specific images. Optimised images are ranked higher over those which are not.

How to Optimise Website Images

To optimise your images, there are three key things you must do:

1. reduce the image size

Reducing image size refers to both the height and width and amount of file space the image takes up. To reduce the image width and height, this is best done before uploading to your website. Use your judgement in determining how large you need your image to display on your website. Remember that height and width is related to the page view once it is open on the visitor's device.

To reduce the image file size, you will need to compress it. Image compression can be done through a range of paid and free online or downloadable software options including:

• TinyPNG – If you have PNG images to shrink, TinyPNG is great. Not only is it free, but it can also help you with partially transparent images too.
• JPEG Reducer – a free way of optimising JPEG files without having to download any software.
• Photoshop – a great software purchase if you are wanting to do a lot of image editing.
• GIMP – the free equivalent of Photoshop.

2. use the correct type of image file

There are three main types of image files used online: GIF, JPEG, PNG. 

• JPEG is the most common image file used on websites and is mostly used for photos as they shrink in size well without losing a great deal of quality. It is not suitable for line drawings, logos or graphics as they can look quite bitmappy.

• GIF has a small colour range, so is not used for photos but can be used for animations. Images can be compressed using GIF, but not as small as a JPEG.

• PNG files are great for logos or line drawings on a website because they compress without turning your image bitmappy. Not great for photos though as they cannot make files as small as a JPEG can.

3. use descriptive and accurate file names

A file name which uses real words rather than a string of numbers or letters lets search engines identify what it is about so they can index it. For example, the file name of an image of a yellow flower is best as yellow-flower-in-meadow.jpg and not 3hdfs93q.jpg.

For further image optimisation tips, check out our articles on using web images correctly and resizing web images.