Preparing images for your website (without the stress)

Images play a big role in how a website looks and feels – but they also affect how quickly it loads and how easy it is for search engines to understand the content.

When you upload images to your website, the way these images are prepared makes a big difference to how well your site performs.

This short video shows the simple image prep process we recommend – and use ourselves – before uploading images.  There’s also a written explanation below the video if you prefer to read through the steps.

Step 1: resize your images

Most images from phones, photoshoots, or image libraries are much larger than a website actually needs.

In the video, I resize images using Preview (which comes free with every Mac). I simply adjust the pixel dimensions so the image matches how it will be used on the site — for example, resizing a large photo down to around 2500px wide for a full-width background image.

Alternative options:

If you’re not on a Mac, or you prefer another tool, you can also resize images using:

• built-in photo editing tools on Windows

• basic editors like Canva

• many image library download settings (where you can choose the size before downloading)

The key point is changing the pixel size of the image before uploading it.

Step 2: compress your images

Once an image is the right size, it can usually be made lighter without changing how it looks.

I use ImageOptim to compress images on my Mac. It reduces file size significantly while keeping the image looking the same – which helps pages load faster.

Alternative options (non-Mac)

If you’re not on a Mac, these online tools work in a very similar way to ImageOptim:

• TinyPNG / TinyJPG
  A simple, reliable tool that reduces file size while keeping images looking good. Upload your images, it compresses them automatically, and you download the optimised versions.
• Squoosh
  A more flexible online tool created by Google.
  It lets you see a before-and-after preview and adjust compression settings if you want a bit more control – though the default settings work well for most websites.

Both are suitable for preparing images before upload and don’t require installing any software.

Step 3: name your image files

Before uploading, I rename image files so they describe what’s actually in the image.

For example, instead of IMG_4729.jpg, I might use something like (pretending we have our very own coffee shop!) flat-white-coffee-in-red-ceramic-cup.jpg.

This helps search engines understand the image content and adds useful context to the page you add it to. It’s also really helpful for you to find images within your photo library.

Why this matters

Preparing images properly helps to:

• improve loading speed

• support SEO in a clear, practical way

• create a smoother experience for visitors

• make your website easier to manage over time

A final note (client-friendly)

You don’t need specialist tools or technical knowledge to prepare images well – just a few sensible habits and an understanding of why they matter.

Once you’ve done this a couple of times, it quickly becomes part of your normal workflow when adding content to your website.

Come back to this page whenever you need a refresher.