How to Optimise Images for Site Speed

8 Tips to Optimise Images to Increase Your Site Speed

If you have ever run a site speed audit on your site, you would’ve most likely come across recommendations telling you to optimise your image. Images are often a big reason you will be scoring low with site speed tools such as Lighthouse and GTmetrix.

The following recommendations will help you optimise your images and improve your overall page load time.

1) Choosing the Right File

Before you upload any images to your site, you must choose the correct file size. There are many image files, with the most common ones being PNG, JPEG, and SVG. A common issue that we come across with sites that we work on is that the images are formatted wrong. Having an image in the incorrect format could be forcing a browser to load a larger image than it needs, which will increase your site loading time and may impact core web vitals such as the largest contentful paint.

JPEG: JPEGs (Joint Photographic Experts Group) have become the default image format. JPEG images can be compressed considerably, which results in quality images with small file sizes. JPEGs should be used for large complex images and illustrations that include a lot of colours

PNG: One advantage of PNGs is that they support transparency, and the compression is lossless. This will mean that the quality is not lost. PNG is also good for detailed, high-contrast images.

SVG: SVGs can be expanded or shrunk down to any size without a loss of quality. Image size and display type don’t matter with SVGs. SVG files work best for images that contain less detail than a photograph.

2) Compress Images

Compression is a very important part when you are optimising images. Compression will reduce the file size without losing image quality. There are two types of compression, the first one is lossless compression, which will maintain the same level of quality before and after compression. The second one is a lossy compression, this will discard some elements of the image but will be unnoticeable.

Both of these methods can be beneficial to SEO, but it may depend on the type of file that needs compressing as to which one you will use.

There are many different free tools that can help you compress images.

A few examples are linked below:

3) Alt Text

Alternative text (alt-text) is used in HTML to describe an image. Users might be able to understand the context of an image, but search engines can’t.

The best way to optimise alt text is to be as descriptive as possible, which can help the image to rank, however, it is important to remember to avoid keyword stuffing. You should use details like colour, make and model as well as saying what the object is. For example, the recommended alt text for the image below would be: “T3 LUCEA ID Flat Iron White Rose Gold”

4) Resize Images

As Google is mobile-first, it’s important that images are sized correctly for mobile. By scaling down large image files, you can reduce the time it takes to load a page.

5) Scale Images

An issue that we see a lot with images is scaling. A scaled image is an image size that matches exactly what is defined in the CSS or HTML. If an image is not properly scaled, it will have to be scaled down by the browser, which can use unnecessary bytes, increasing the page load.

Defining the width and height of an image is not only best practice, but it tells the browser to size the image before the CSS is loaded. The image dimensions are telling the browser how much space it should allocate which will prevent any Cumulative Layout Shift (CLS) issues.

6) Lazy Load

Lazy-loading refers to deferring the loading of any non-critical resources on a page, this is normally anything below the page fold or off-screen. Instead of a browser trying to load everything at once, resources are loaded when they are needed.

7) Browser Caching

Every time a user visits a web page, the browser has to download all the files, such as CSS, HTML, JavaScript, and any media. This can increase the page load time significantly – especially if a page has a large number of resources.

Browser caching can help this by storing all those files in the user’s browser the first time they visit the site. This means that when a user revisits the site or navigates to a different page within the site, they will already have the files saved locally. And, the browser will need less time to load the page as fewer requests need to be made.

8) Use a CDN

A CDN (Content Delivery Network) refers to a distributed group of servers that help to minimise the delay in loading a web page. This is done by reducing the distance between the server and the user. Without a CDN, one server must respond to every user’s request, which can increase the load time of a page, especially in peak times.

By responding to end-user requests in place of the origin and in closer physical and network proximity to the end-user, a CDN offloads traffic from content servers and improves the web experience, thus benefiting both the content provider and its end users.