Why you should be optimising your web images

Just taken that perfect photo for your website and ready to get it online? Hold your horses 🖐🏼… You need to get that image compressed! 💥

What is image optimisation?

Image optimisation is all about delivering your awesome image in the right format, resolution, dimension and – most importantly – the smallest possible file size.

WHY IS THIS IMPORTANT TO ME?

Have you ever been to a website that loaded so slowly you just went somewhere else instead of waiting for the content to be visible? 😴

Your visitors would be doing just the same on your site…

If your site is taking longer than 3 seconds to load you can pretty much say goodbye to most of those potential customers.

Why is it important to google?

Google page ranking is all about speed these days, if your site is slow to load Google will push you down in the results, and we all know that barely anyone looks beyond page two.

Making your site fast and responsive to your visitors needs and devices will mean that you’ll stay in Google’s good books, plus your visitors will be getting a more enjoyable experience on your site. Happy customers = more sales! 📈

What do i need to do – Resize

Okay, so you’ve used your brand new ultra awesome digital camera to take a beautiful photo to use on your site – perhaps a fantastic profile shot of yourself in black and white.

Ace, first things first, you are going to need to resize that image – it will most likely be bigger than 2000px wide. If you’re using a Canon T3 for example and have the quality setting on L your image pixel count is going to be a whopping 5184×3456. 👀

The recommended sizes that we use are:

Large, full screen background images: 1280×800
16:9 in-page image: 510×287
4:3 in-page image: 510×384

WHAT DO I NEED TO DO – format

Making sure your images are in the correct format means that they are being rendered to the best quality for you and your visitors. For example some formats contain more information than others and therefore better quality.

You’ve probably heard of the main image formats gif, png and jpeg. Cutting straight to the chase – jpeg is what you need for anything photo based with a keen eye on file size.

If you’ve got access to Photoshop here’s where you’ll need to be using the Save For Web option too, just to squeeze that extra performance out of the jpeg file type.

WHAT DO I NEED TO DO – compress

So, your profile shot has been resized, saved in the correct format and you’ve now uploaded it to your site – top stuff – but your work doesn’t stop there… You need to round everything off with a healthy dose of compression!

Here’s where our Digital Learning Design recommended resource of the week comes in hand – Smush! It’s a free WordPress plugin that you can install on your site and get it to manually run through all your images and get them compressed.

You’ve done it!

🤗 Okay, mastered all of the above!? Excellent work! I’ll guarantee that your site will be loading faster and your google page speed score will have increased, meaning happier visitors and better results!

it hasn’t quite worked?!

🤔 Ahh, you’re not sure how to get it all in play and have become lost in a world of bytes and resolutions – don’t worry – send me a message using the form below and I’ll be happy to help out…