How to optimise images for your website using squoosh. | Graphic Detail Knowledge Base

How to optimise images for your website using Squoosh.

How to optimise images for your website using Squoosh.

Optimising your images is very important for keeping your website running as smooth as possible.
There are very noticeable differences in loading times between a web page with unoptimized images and one with optimised images.

There are a couple of things that you can easily adjust to reduce the file size of your images for a website:
1. Image Dimensions
2. Image Quality

Below we will guide you through optimising the image dimensions & quality using Squoosh.

Step 1 - Go to https://squoosh.app/



Once on the website, you can click the big pink button to upload an image or you can also drag and drop an image from your files.

Step 2 - Optimising your image



Once the image is uploaded, the optimisation settings will appear.
There is a before/after slider that appears over your image, you can drag this left and right to preview the quality of your image with the adjusted settings. 

Changing Image Dimensions

To adjust the image dimensions, click on the resize button to open the resize settings.


Here you can adjust the dimensions by percentage or by a target width/height.
Changing the width will automatically change the height and vice versa to preserve the aspect ratio.

The example image we are using is 3872px wide, by reducing the width to 1920px we have already reduced the file size from 6.7MB to 2.36MB. You will notice the height also changed automatically.

An ideal width for a banner image is 1920px


Changing Image Quality

Once you have the desired image size, you can adjust the quality.
To adjust the quality, you can use the 'Quality' slider shown below.


By using the before/after slider you can see how much the quality slider effects the end result.
Try and find a balance between image quality and file size.
The ideal file size ranges from 100kb - 400kb


Step 3 - Download Your Image

Once you are happy with the optimisation settings, all you need to do to is click the blue download button shown below.


Now you will have an optimised image ready to upload to your website.

    • Related Articles

    • How to make simple changes to your WordPress website with Divi Page Builder.

      Here's how to make simple changes to your WordPress website using the Divi Page Builder Step 1 - Navigate to the Pages page on your WordPress website Step 2 - Select the page you would like to edit Hover over the page you would like to edit and click ...

    • How to add a simple product to your WooCommerce shop.

      Here are the steps to adding a simple product to you WooCommerce shop. Step 1 - Navigate to the Add Product page in the backend of your WordPress website. Step 2 - Add a product name and description. Step 3 - Add Product Images It is Important to ...

    • Logging into the back end of a Wordpress Website

      Steps to logging into the back end of a Wordpress Website 1. Open Your Web Browser: Launch your preferred web browser (e.g., Chrome, Firefox, Safari). 2. Enter Website URL: In the address bar, type the URL of the website. Press Enter to navigate to ...

    • How to add Solds through the Property plugin

      Here are the steps to add a new sold property to be shown on the Solds page. Step 1 - Login to the backend of your website through the login page The link to the login page is: example.co.nz/gd_dashboard Essentially you just have to add the extension ...

    • Building / Editing the Site Navigation Menu

      Creating a Navigation Menu and Adding Items From the WordPress dashboard, go to Appearance > Menus If you are creating a new navigation menu from scratch, then enter the name of the navigation menu and click Create Menu To add pages to the navigation ...