27th April 2022

How to speed up your website with an audit of your existing website images

Posted in Performance
How-to-speed-up-your-website-with-an-audit-of-your-existing-website-images
Did you know that a slow loading web page is losing you customers and damaging your SEO rankings, and that the bulk of website performance issues can be massively improved by just optimising your images.

See the problem is that most small businesses owners and digital marketers upload images to there website directly from the source whether that be from an iphone or from a stock image website. These images are HUGE in every way, and by directly uploading them to your website you’re negatively affecting your page load speed. Images are the biggest offender at slowing your page load speed, which in turn increases your bounce rate and decreases your ranking on Google. This means less visitors and less potential customers on your website.

The good news is that it’s so easy to quickly check and optimise your website images and it takes no technical skill or paid software.

In this post I’m going to show you how to quickly and easily audit and optimise images on your website. I’ve done a blog post previously about how to optimise images, but this was from last year and since then I’ve found a few solutions which makes the task even easier and quicker to locate and optimise those images.

So without further ado, let’s crack on with it. This tutorial is for WordPress, but this process can be used on any website platform.

The first thing we want to check is if we have any images on our web page that can be optimized. When it comes to image optimisation you can spend as long as you want painstakingly editing each image to perfection but you’re probably busy so you’ll be wanting a quicker approach than that.

We’re going to use the Google Chrome Browser to view our webpage so we can take advantage of some built in tools to help us identify if we have any images that need attention on our webpage

So navigate to your webpage and right click anywhere on your webpage and choose 

  1. Inspect element, 
  2. Choose network tab, 
  3. Make sure that img is checked in the panel 
  4. refresh your browser window to reload all the assets into the network panel

Click in the arrow above the “Size” tab twice to arrange all images in order of largest file size. Once we have this info we can quickly scan the file sizes looking for any images that are too large for their container on the website.

If we spot any images in the network panel that are over 200mb they we probably want to optimise them and it’s on to the next step.

1-image_optimisation-chrom-devtools

Open another window in your browser and go to https://extract.pics/ 

Use extract images to get hold of all the images from your website. Use the dropdown to filter images by size. Go through the images and toggle the ones that need optimizing, and then download them to your desktop

2-ext images

https://picresize.com/ 

The next step is to use a website called picresize to crop our images. I recommend making three folders for “full width image”, “half page image” and “third page image” to stay organized

Then upload your previously downloaded images to picresize and start cropping them based on the container that they’ll fit in on your website. You can use “custom size…” in the dropdown to get the exact size you need. 

As a rule of thumb, I find that the following dimensions and spec work for general optimization.

filesize 

Save each cropped image into it’s relevant folder, you can also use this as an opportunity to give your images effective SEO titles if you didn’t before. 

 

3-picresize

Now the images are the correct size we can further adjust the quality using another website called https://imagecompressor.com/ 

This website allows us to bulk upload all our cropped images and gives us a visual representation using an image quality adjustor. 

Use your own judgment to adjust the quality of the images to your desired outcome, where you have the lowest file size and an image quality that you’re happy with and then you can download your images.

4-image-compressor

Step 5 – Strip any remaining metadata (information) from your website images

The final step is to bulk upload the images to tiny PNG, which will strip any unnecessary metadata from the images making them as lean as they can be. Now it’s time to reupload the images to your website and overwrite the old images with your new optimized images.

5-tiny-png

Summary

TThere you go! All done, you have now optimized the images on your website and most likely decreased your page load speed times, giving a better experience for your users and increasing your SEO points with Google. 

Recent Posts

Sign Up

BLOG

Latest posts

When do I need to hire a web designer?

When do I need to hire a web designer?

What is the value of a web designer to your online success in 2022? There are many options out there for building website so what is the best option for your business? Should you hire a web designer or build your own business website using a software tool

read more
How to create an ideal client profile for your website and business

How to create an ideal client profile for your website and business

Creating an ideal client profile (Otherwise known as a customer avatar) is the first thing you should do before you start thinking about designing your website. Arguably it’s the first thing you should do before you create your product or service for your business. Having an in depth user persona (customer avatar) will provide you with a solid and dependable launchpad for all your content creation and marketing activities, and save you countless hours and pounds that you might waste producing content for the wrong person.

read more
The benefits of using google fonts on your website projects

The benefits of using google fonts on your website projects

In this post I thought I’d give a little love to Google fonts in this blog post as they’ve been serving my clients well in 2022. I’ll just briefly give an overview of what Google fonts are, why I love using them in client projects and a few examples of how you can get your google fonts looking extra fresh and unique, so you can stand out from the other millions of sites using Google fonts.

read more