How To Optimise Images For Your Website (Updated 2023)

February 1, 2023

Improve your website load time and provide a better user experience by using these tips to optimise images for your website.

The speed a website loads in is important. - both from a search engine optimisation (SEO) point of view but also for the best user experience.

According to statistics, 53% of visitors abandon a site if it takes more than 3-seconds to load.

A key hurdle that a client often faces when adding new content to their site (i.e. a blog or news post) is keeping image sizes small, and how to achieve this.

This tutorial runs through the process I undertake for optimising images for a website.

Required: Photoshop or image editing application, ImageOptim or an image compressor (see below)

What's an ideal file size?

An image file should be less than 500 KB for the best results, however - the lower the better, as long as the quality of the image isn't affected.

How to check the file size of an image:

You can check the file size of your image by clicking on it on your computer and viewing it's properties.

If you're a client of Wakeford Digital and uploading an image to your website, Webflow displays the file size for you and will often flag if it's too big.

image showing file size in Webflow
Wakeford Digital client's can see an image file size when uploaded.

How to optimise your images for a website:

This is quite a specific process as I'm an Apple user, however hopefully there are some tips in here that help.

Step 1. Consider the dimensions required for the image

Firstly, I consider if the image is going to be used on the header of website, as a thumbnail for a blog post or generally through out the website etc.

Why do this?

It helps inform the dimensions for the optimised image.

For example, if the image used for the header of a website is optimised to be really small, then it will appear pixelated and blurry.

Similarly, if a smaller image such as a blog thumbnail is 5000px wide when on the actual site it will only be displayed at around 500px, then the file size will be unnecessarily big.

Summary - Consider where the image will be used on your website to scale it accordingly. A maximum size I use is ~1,800px wide, but smaller images should be around 1,000px max.

Step 2. "Save For Web" in Photoshop

This step requires Adobe Photoshop, which I know isn't accessible to everyone.

The  premise of this step is to 1) use the "Save For Web" feature to make the image size smaller and 2) change the dimensions as per Step 1.

You may be able to use your favourite image editing application to change the dimensions of the image. You can then skip to Step 3 which may still help!

If you are using Photoshop:

Step 2A: start by opening up your image as normal then going File > Export > Save For Web.

This will open a new dialogue box (see the images below) which is specific for saving optimised images.

The three key things in this area are: 

Step 2B: Making sure the file type is a JPEG (commonly used) and changing the quality if required;
Step 2C: Changing the dimensions if required;
Step 2D: Checking the file size.

Screen grab of photoshop save for web highlighting type and quality
Change the preset to JPEG High and edit the quality if required.
Screen grab of photoshop save for web highlighting dimensions
Edit the image dimensions (as per step 1 of this tip) to an appropriate amount.

Screen grab of photoshop save for web highlighting size
Check the approximate new file size is below the 500 KB mark.

Once done, hit the "Save..." button and save the optimised file to an appropriate location.

Step 3. Further Optimisation

Here, I run the optimised photo through a program called ImageOptim (Mac only, see here for proposed alternatives) for further optimisation.

If you're not a Mac user or don't do this regularly, then I'd recommend the online website, where you can upload your file and re-download a compressed version.

ImageOptim users can drop and drag multiple files in and it'll process them all at once. It also re-writes the original file, so there's no need to save again.

View of ImageOptim program
ImageOptim is great for a final compression of your optimised image.

Step 4. Check the final file and upload

Once you've performed the steps above, I always double check the final file to ensure the quality is still acceptable as well as the size.

If you're happy with the newly optimised image, you can upload it to your website and enjoy a faster load speed.

In summary...

As an example, the image used in this tutorial started off at 4 MB, and was reduced down to below 200K using the methods above.

If you times this by 3, 5, 10 images per page, per website, that's a significant amount of download required and therefore speed saved on.

I hope this quick tip helps both clients of Wakeford Digital and those who manage their own website alike to upload optimised images.

Further resources:

Google's "Optimize Image" via Page Speed Insights

by Dominic Anastasio
Owner and Creative Director Domin8 Designs

More Posts

Domin8 Designs becomes Wakeford Digital: Tailored Digital Marketing For Businesses In Tasmania

Read post...

5 Best Amazon Black Friday Deals For Tasmanian Businesses (What We've Got Our Eyes On...)

Read post...

What's new on the blog?

Domin8 Designs becomes Wakeford Digital: Tailored Digital Marketing For Businesses In Tasmania

We're pleased to announce the launch of Wakeford Digital, previously Domin8 Designs and Domin8 Media, offering a tailored approach to digital marketing helping to elevate the online presence of Hobart and Tasmanian businesses.

Read this post →

5 Best Amazon Black Friday Deals For Tasmanian Businesses (What We've Got Our Eyes On...)

Discover the top Black Friday deals on Amazon for Tasmanian businesses, from Apple AirTags to Samsung SSDs, explore essential tech upgrades that enhance efficiency and security.

Read this post →

Four ways Tasmanian businesses can use AI to improve digital marketing

Dive deeper into how AI can revolutionise the digital strategies of Tasmanian small businesses, enhancing content, visuals, and providing insightful website analysis for a stronger and more considered online presence.

Read this post →