How to Improve Website Speed with Image Optimization

Unlock improved website performance by mastering the art of image optimisation.

We've included both the step by step guide as well as a video to help you optimise your website images. And the great thing is - this is the same for any CMS. Shopify, Hubspot, Webflow, Wix, Squarespace.. while many website platforms have some built in optimisation. Pre-optimising images is always going to give you the best performance. 

We use https://squoosh.app/ for the best image optimisation

Why Image Optimisation is the Secret Weapon for Faster Websites

When your website loads slowly, visitors are more likely to leave before engaging with your content or services. A low PageSpeed Insights score is often a clear indicator that your site’s images are not optimally prepared for the web. Images typically account for the bulk of a website’s load size, making them the first place to look when aiming to boost performance.

By focusing on image optimisation, you can significantly cut page load times and improve user experience. This not only keeps visitors engaged but also positively impacts your SEO rankings, as search engines reward faster sites. For marketing managers in industries like professional services, manufacturing, travel, and tourism, a faster website can directly translate into better lead generation and higher conversion rates.

Choosing the Right Image Formats for Maximum Efficiency

Selecting the most suitable image format is critical for balancing quality and performance. Traditional formats like JPEG and PNG are widely used, but newer formats such as WebP and AVIF offer superior compression rates without sacrificing visual fidelity. For example, WebP images can be up to 30% smaller than their JPEG counterparts, ensuring rapid delivery even on mobile networks.

Improving Website Performance through Image Optimisation

1. Identify Performance Issues 

• Review website performance metrics.

• Note that while accessibility, best practices, and SEO are good, performance may still be lacking.

2. Analyze Image Quality and Size 

• Check the size and quality of images on the website.

• Example: A large image (1920x1080 pixels, 723 KB) can negatively impact performance.

3. Use Image Compression Tools

• Recommend using an app like Squoosh for image optimisation.

• Note that built-in solutions from web builders may not be as effective.

4. Resize Images Appropriately 

• Ensure images are resized to the necessary dimensions (e.g., 1920x1080).

• Use Squoosh to automatically resize images.

5. Optimise Image Format and Quality

• Convert images to WebP format for better compression.

• Adjust quality settings in Squoosh to find a balance between size and clarity.

6. Test and Compare Image Quality 

• Use a side-by-side comparison to evaluate quality before and after compression.

• Gradually reduce image size in increments to assess quality loss.

7. Download and Replace the Optimised Image

• Download the optimised image from Squoosh.

• Replace the original image on the webpage.

8. Check Performance Improvements 

• After replacing the image, check the website's performance metrics again.

• Note improvements in page load times (e.g., from 48 to 67).

9. Address Mobile Image Optimisation 4:30

• Ensure that both desktop and mobile images are optimised.

• Replace mobile images to improve mobile page speed.

10. Conclusion and Recommendations 

• Highlight the effectiveness of Squoosh for quick performance improvements.

• Encourage regular image optimisation as part of website maintenance.