Image optimisation: Do I need it?

Simply put, yes. You definitely need image optimisation.

Images are one of the biggest contributors when it comes to how your website is performing. Overtime, images have become more and more essential for websites and how they look. Imagine running an eCommerce store without any visible images of what’s being sold. Even the simplest of websites uses imagery to help it look nicer and be more engaging.

But, we have to be careful. If the images on your website are impacting your load time to over 3 seconds, you run the risk of losing visitors. If we are able to reduce the size of these images without having to reduce the image quality, we’ll end up with a positive impact on page load speeds and an overall better experience for your visitors. This is where image optimisation comes in.

What is image optimisation?

Image optimisation is the process of delivering high-quality images, whilst keeping the smallest possible size. This could be done by changing the format, size or resolution of the image.

Image optimisation can be done in a multitude of ways:

• Resizing the image
• Changing the format
• Compressing the size
• CDN (Content Delivery Network)
• Lazy Loading

Why do I need image optimisation?

When was the last time you saw a website without an image? The reality is, you just simply can’t show your products / services without images. With these images, they increase the load time.

We never want to get over 3 seconds for a website page to load or visitors will simply just leave.

Image optimisation helps us in so many ways. We improve our page load speeds, creating a better user experience, which in turn increases our website’s SEO ranking, meaning we’ll get more users seeing the website.

Improve page load

Nobody likes a slow website, there are many factors that are involved when it comes to page load, such as the website host or the page design and layout.

However, with images contributing to 61.5% of the overall load, if we can optimise this amount of the page, you’ll see a huge increase in website performance.

You can use these tools to test your website performance.

Increase SEO Ranking

Everybody wants to be as high up in search results as possible, if your website isn’t performing to it’s potential, search engines will unfortunately slowly shift you down the rankings. Resulting in people not seeing what you have to say.

If your page takes too long to load, visitors will leave. This will increase your bounce rate, which in turn, will reduce your SEO score. Again, shifting you down the rankings.

Any little thing we can do to improve our SEO score, we should definitely consider.

Better user experience

If a visitor is on your website, and they’re spending most of their time waiting for your pages to load. They’re not going to have a pleasant experience.

By reducing the time it takes them to navigate from page to page, it creates a better experience for them, allowing them to see more of what you have to offer. Leaving them with a better representation of your company.

Ways to optimise image delivery

There are tonnes of ways to optimise delivery when it comes to images. Resulting in a faster, more optimised website. Here’s the methods we use at DigiRex:

Cache

Caching is the method of storing a file on the local drive, rather than downloading it from the server every time.

This is especially helpful for images that appear on more than one page, as you won’t have to download this image again on the next page, it’s already stored.

We also cache all of the files that are on the website, so these don’t have to be downloaded each new page load.

Lazy Loading

If you have a large images on a page, it can take a long time to download these before the page is rendered for the visitor. This means a visitor has to wait until all the images (alongside the rest of the page) have loaded before they see anything.

By initiating lazy loading, we prevent the loading of these images until they’re needed. This means images further down the page won’t be loaded until the user scrolls that far down the page, making them load seamlessly as the user navigates the site.

This makes the first load instant as the page doesn’t have to worry about the images until the user needs to see them.

Image compression / conversion

Image compression is the method of reducing the file size of the image, without resulting in a visible quality reduction. This compression can reduce the file size of the image by up to 70%, that’s 70% less data needing to download.

Modern browsers now support a new filetype of WebP, this format can reduce the file size by up to 90%. But, as this is only available on some of the latest browsers, you should only be using WebP if the browser supports it, otherwise the image won’t load.

Image resizing

On smaller devices, such as mobiles, we don’t need the full size image that we’re using on desktop browsers.

You can detect the browser and device, thus allowing you to determine if you need a large 1920px wide image or a smaller 1024px wide image, which will be a massively reduced file size. Stopping mobile devices having to download such a large file.

CDN

CDN stands for Content Delivery Network, this is a network of geographically distributed servers.

They help reduce the delay in load times by providing the ability for the end user to access from a locally based server.

We can help

At DigiRex, we use all of the methods mentioned above to help our sites load as quickly as possible.

If you’re looking to improve your website performance, don’t hesitate to contact us to see how we can speed up your site.