How to reduce your image sizes for increased website speed

Why does your website need to load quickly?

Having a fast website has many advantages. For your visitors, it provides a better overall user experience. They have the freedom to navigate your website without the stress of a slow loading page.

This is so important because the speed of a page is directly associated with the bounce rate of a website. Technical delays and frustration lead to visitors losing patience, and you as a business, losing the opportunity to turn a visitor into a paying client.

Which leads me into my next point, the benefit for your business.

SEO!

This is the fuel for a great website. Having a speedy website contributes greatly to the effectiveness of your SEO. The list below goes into much more detail of all the benefits associated with a fast performing website.

1. Better user experience – Research has shown that websites with a slower loading speed have a high bounce rate, which means people leave your website more frequently as soon as they land. This demonstrates poor first impressions
2. Search Engine Optimisation friendly – Google loves a fast website… It rewards websites who make an effort to keep on top of their optimisation and make the site as fast as possible. This is because Google crawls websites to index them. The slower your site, the longer it takes to crawl.
3. Professionalism – Similarly to UX, a slow website can be frustrating for users, but even more frustrating for potential clients/customers. If someone is so impressed with your work and what they are more than likely going to visit your website to learn more and hopefully get in the following pages to get to a sale or contact page takes just as long, will ruin the entire experience for a potential client.
   And just like that… an opportunity is lost.
4. Environmentally friendly – Although this might often be overlooked. Having a website that loads quicker means that the time it takes for a server to submit your web request is shorter.
   Yes… that may just be a few seconds, but every page load and refresh adds up. Over time that can be hours of web usage time saved because your website is optimised for best performance.

How to check your website’s speed

9 times out of 10 a website’s loading speed can be improved with a simple few steps and good practices throughout the process.

But before we discuss how you can make your website faster, it’s important to know exactly what is slowing your website down in the first place so you can make decisions specific to you.

The best way to do this is by using a website performance tool such as GTMetrix. This tool requires you to enter your website URL, and it provides a comprehensive list of all the variables contributing to speeding up or slowing down your website.

GTMetrix allows you to get real-time results on how it’s performing on the internet from your closest country. Choosing the country closest to you helps to provide the most accurate results on website performance. To do this, you’ll want to create a free account so that you can set the desired location.

Now, at this point, there is going to be a lot of different numbers and letters pop up, which quite frankly are overwhelming! So, let’s break it down.

Here is a snapshot example of what you might see. At the top you’ll be shown a summary of the time and date the test was completed along with the region it was assessed in and finally, the type of browser used. All of these details can help you understand the speed. For example; if the test is taken at a peak time for the website’s traffic, you may notice a slower than usual speed.

 

To ensure your website is running as fast as possible, you’ll need to focus on the page details: Load time, page size and number of requests. The lower these numbers are, the better. GTMetrix gives you guidance on the average numbers, so you will have an idea of what you should be aiming for.

Here you can see the performance for Wodpress.org is doing very well, with very low page detail numbers and green all around.

The final section is where it can get a little complicated. There is a list of recommendations to help optimise your website’s speed. The most common recommendation (and what we are focusing on in this guide) is image optimisation. You’ll be shown a list of the exact images that are causing your website’s performance to reduce and advice on how much space you could save by reducing the sizes. Here’s where you can find all the information you need to reduce your image sizes for increased website speed.

What are the different image types and why they matter?

JPEG, PNG and GIF

One point to mention is that there are different image formats which impact the quality.

The majority of images on the internet are in JPG format. There are occasionally other images which are in PNG format (often used for higher quality and transparent images). There is also the option to use GIFs which are moving images. The blog by Themeisle provides a comprehensive guide to the 3 main image types.

Consistency among websites is key. Choose a JPEG file where it is possible for the lowest image size, PNG is only necessary when you need a transparent background.

For a deeper understanding of file formats, you can take a look at a previous guide we have written on logo file formats, explaining the pros and cons of choosing certain file formats.

Options for optimising and resizing images

So, you know what’s causing your website to be slow, now it’s time to do something about it and see those numbers transform.

The most likely culprit is large images sizes. It’s a common mistake made on a majority of website owners. You see an amazing image, download it in full size and you end up having 50+ images on your site that could be a fraction of the size they are, without losing quality!

There are many ways to reduce images sizes depending on your website CMS (content management system), your software accessibility and technical know-how.

Below is a list of great resources that are useful when reducing image sizes. Some are free, some are paid for, some require a little more technical knowledge or software. But there is an option for everyone.

Image Compression Websites

Let’s start with websites. Being the most accessible for all website owners. These websites allow you to upload your chosen images and they do all the hard work for you.

1. Birme.net
2. Shopify Image Resizer
3. Bulk Resize Photos
4. Tiny jpeg (PRO version available)
5. Compressor (PRO version available)
6. Canva (PRO version available)

WordPress Plugins

For all my WP users, these options might be best suited to you. As they are plugins directly built into your site, making the compression process a little easier. No need to go back and forth with re-uploading images.

1. Unsplash
2. Smush (PRO version available)
3. Short Pixel (PRO version available)

Advanced Software

If you’d like to take the next step in your image optimisation, using the following software might be a great option. It may be much easier to optimise your images this way if you have multiple images as Adobe is great at managing a bulk amount of content.

1. Photoshop (PAID)
2. Adobe XD

Final thoughts on optimising your website images

There are many ways to reduce your images, but what is most important is that you do something. It may seem OK to upload a large image to your website, to begin with, but after 20 images that all adds up. It’s best to maintain a good habit of optimising your images to avoid slowing down your website.

Thanks for reading and we hope this post will help you create websites that engage your perfect people! Interested in working together? Find out about our Website Design Experiences and One Day Website packages and then just get in touch to chat with us about your project