How to speed up your website with an audit of your existing website 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.

Step 1 – Check your pages to see if there’s any offending images

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.

Step 2 – Extract all the images from your webpage

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

Step 3 – Resize and crop website images that are too large

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.

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. 

Step 4 – Optimize the quality of your website images

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.

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.

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. 

Links to image optimisations tools 

Google Chrome Browser

https://extract.pics/ 

https://picresize.com/ 

https://tinypng.com/ 

https://imagecompressor.com/