How to optimise images for faster loading times on your website

Why are faster load times important?

Before we start with the practical tips, it is important to understand why faster load times are essential. Faster websites provide a better user experience, higher SEO rankings and better conversion rates. Google values loading speed, especially on mobile devices. The faster your website loads, the more likely visitors are to stay longer and take more actions, such as filling in a form or making a purchase.

1. Choose the right file format

The first step in optimising your images is choosing the right file format. There are several image formats suitable for websites, and each has its pros and cons:

• JPEG: Ideal for photos and images with many colours. The file is relatively small and the quality can be slightly adjusted.
• PNG: Suitable for images with transparency or images where details must be preserved. PNG files are often larger than JPEGs.
• WebP: This is a modern file format developed by Google. It offers an excellent balance between file size and image quality and is supported by most modern browsers.
• SVG: This format is perfect for logos and simple images or icons. SVG files are vector graphics, which means they can be scaled infinitely without loss of quality.

Use WebP or SVG whenever possible for best results in terms of loading speed and image quality.

2. Adjust the size of your images

Many websites load images that are much larger than necessary, resulting in unnecessarily large files. By resizing images to the right dimensions for your website, you can significantly reduce the file size. For example, you don't need an image 3,000 pixels wide if the space in which it is displayed is only 800 pixels wide.

How do you adjust the dimensions?

Use image editing software like Photoshop or free tools like GIMP to manually crop and resize images.
Automate the process with plugins like Smush for WordPress, which automatically resize images at the time they are uploaded.

3. Compress your images

After resizing, the next step is to compress your images. Compression reduces file size without a noticeable loss of quality. There are two types of compression:

• Lossy compression: This method removes some details from the image, making the file size smaller, but this can lead to quality loss.
• Lossless compression: This involves reducing the file size without any loss of quality. The results are often less dramatic than with lossy compression, but the image quality remains intact.

Tools for compression:

• TinyPNG and TinyJPG: These online tools use lossy compression to reduce PNG and JPEG files.
• ImageOptim: A popular desktop app for Mac users to compress images losslessly.
• Kraken.io: An advanced online tool that supports both lossy and lossless compression and offers batch processing.

4. Use lazy loading

Lazy loading is a technique that loads images only when they come into view, rather than immediately when the page opens. This can drastically reduce the loading time of your website, especially if you have a lot of images on a single page.

How do you implement lazy loading?

In HTML: add the attribute loading="lazy" to your image tags. This ensures that images are loaded only when the user scrolls to them.

<img src="”voorbeeld.jpg”" alt="&quot;example&quot;" loading="”lazy”">

Via a plugin: For WordPress users, there are several plugins that support lazy loading, such as WP Rocket or Lazy Load by WP Smush.

5. Use a Content Delivery Network (CDN)

A Content Delivery Network (CDN) is a network of servers spread around the world. When someone visits your website, a CDN ensures that images are loaded from the server closest to the user, significantly reducing load times.

Examples of popular CDNs:

• Cloudflare: Offers a free CDN option and is easy to integrate with most websites.
• Amazon CloudFront: A powerful solution for larger websites with global audiences.
• KeyCDN: An affordable option with a focus on usability.

6. Remove unused images

Removing unused images on your server is a simple but often overlooked step. Unused images take up unnecessary space and can affect the speed of your website, especially when backing up files. Make sure you regularly clean up your media library to remove unused files.

7. Make use of browser caching

With browser caching, you can ensure that images previously loaded by visitors are displayed faster on the next visit. This avoids having to download the same files over and over again.

How do you set up browser caching?

For WordPress users: use a plugin such as W3 Total Cache or WP Super Cache to set up caching.
Manually via the server: Add the following code to your .htaccess file (for Apache servers):

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
</IfModule>

This code causes images to stay in the browser's cache for a year.

Conclusion

Optimising images is essential for a fast website and a better user experience. By choosing the right format and file size, compressing images and using techniques such as lazy loading and a CDN, you can significantly reduce your website's load times.

Need help optimising your website or images? Feel free to contact us, and we will be happy to help you!