Get your images web-ready! 💅

Alright, picture this: your website's got these fantastic images, but they're slowing down the whole show.

That's where image optimisation comes in. It's not just about making your site load faster; it's also about boosting SEO and keeping your prized images safe from sneaky snatchers. Let me show you how!

Prefer video? I got you!

Why Bother with Optimising Images?

Here's the deal:

Speedy Website Performance: When your images are optimised, they shrink in size, which means your website loads faster. Nobody's got time for a sluggish site, right?
SEO Boost: Search engines love websites that load quickly. Optimised images give your site a boost in the rankings, so it's easier to be found.
Protect Your Content: You want to keep your high-quality images safe, and optimising them can make them less tempting for anyone looking to use your images for themselves!

How do I optimise them?

Step 1: Gather Your Images

First things first, gather all those amazing images you want on your website. I would recommend editing any images before optimising them for web. Starting with high quality images will allow us to get the best result.

It is best to name and organise your images in a way that makes sense to you (and ideally others). I name mine them based on their content e.g. 'woman at the beach'. For you including the date, a campaign, or a webpage may be helpful.

For folders I tend to have a folder for high res images, and for low as they have different purposes. This allows you to come back and easily find and use them at a later date.

'High Res' Folder:

These are for your original images. Whilst we want to reduce the size of our images for websites we don't want to lose our high quality pics as we will likely need them for social media, presentations, and printing.

I add '- high res' to the end of the image name e.g. 'woman with scarf - high res.png' to avoid confusion.

'Low Res' Folder:

Your Low Res folder will have all of the same content as your high res. But these are the images we'll be optimising. I also add '- low res' to the end of each file name.

Step 2: Resize your images

For websites, forget billboard-sized pics and think more wallet-sized. That is how we can ensure quick loading times.

In this step, we are resizing your images in your 'Low Res' folder. Use whichever tool you have at your disposal, here are some common ones:

Preview (Mac)
MS Paint (Windows)
Photoshop

When resizing I recommend starting with 1200px for the width. This is fairly versatile as it can work for full-width images. Depending on your design e.g you know it'll only take up a fraction of your page width you could go smaller.

Resizing is not an exact science. It may take a few tries to achieve a balance of quality and image size. The subject matter of the photograph can influence size and quality. I find that it is not necessary to exceed 2000px for width.

Step 3: Squeeze 'em with TinyPNG

Next, we're going online! TinyPNG is a brilliant website that can further optimise your images without you lifting a finger and with little reduction in quality.

You just drag and drop your images in and voila... magic! ✨

After downloading check the images. Is the quality good? Go ahead and replace the files in 'Low Res' with the ones you have just downloaded.

Still need some work? It's time to grab another copy of the image from 'high res', and try resizing a little larger this time using Step 2.

Step 5: You're ready to upload!

Congratulations, your images are website-ready. Time to upload them to their new home.

Some website builders such as Webflow offer additional optimising capabilities. Take advantage of these if you can to ensure it is the smallest size it can be.

Webflow: Webflow offers native image optimisation.
Wordpress: There are many plugins you can download. I've used TinyPNG in the past. As a bonus, you can skip Step 4 with this plugin.

Step 6: Add alt text

As one final step we add alt text to our images. This helps us and your site visitors in three ways.

Google likes websites that provide alt text. If you don't have it, it can impact SEO ranking.
People with screen readers rely on alt text to be able to gain context.
It offers a backup in case your image doesn't load.

The key to good alt text is brevity. It is best practice to keep it to less than 200 characters. If the image is purely decorative you can leave the alt text empty, or mark it as decorative if your web builder has that functionality.

That's it!

Look at how good your website looks with those speedy loading images.

Optimising images for websites isn’t just about making things load faster; it’s about giving your site that extra oomph. Follow these steps, and you'll have a site that looks awesome, loads like a dream, and keeps your precious images safe and sound.