Mastering Photo Optimisation for Faster, SEO-Friendly Websites

If your website feels a bit sluggish, your images are often the first place to look.

Photo optimisation is one of the simplest ways to improve page speed and give your SEO a boost, without changing your design or your content. And while we’re talking images, it’s worth saying this upfront: orientation and cropping matter. A landscape photo won’t magically behave like a portrait, and forcing the wrong shape into the wrong space is one of the quickest ways to make a page look messy (or break your layout entirely).

In this guide, I’ll walk you through the practical, non-fussy steps to get your images working for your website, not against it.

Why photo optimisation matters

Image optimisation is the process of reducing image file size while keeping the image looking sharp.

It matters because:

• People won’t wait: slow pages lose visitors quickly.
• Google notices speed: page performance is part of the ranking picture.
• Mobile users feel it most: slower connections and smaller screens make heavy images more painful.
• It can reduce hosting and bandwidth load: smaller files mean less data to serve.

How image size affects website performance

Big image files are one of the most common causes of slow websites.

When images are oversized (either in dimensions, file size, or both), they:

• increase page load time
• use more bandwidth (especially frustrating for users on limited data)
• can slow down your server and caching
• can drag down SEO performance over time

The goal is simple: serve the smallest file that still looks great.

Choose the right file format

Picking the right format makes a bigger difference than most people expect.

JPEG (or JPG)

Best for photographs and images with lots of colour variation.

• smaller file sizes
• great for most website photos
• uses lossy compression (a little quality is removed to shrink the file)

PNG

Best for logos, icons, screenshots, text-heavy graphics, and images needing transparency.

• lossless compression (keeps quality)
• supports transparent backgrounds
• file sizes can be much larger than JPEG

GIF

Best for simple animations.

• limited colour range
• not ideal for photos

SVG

Best for logos and icons (vector graphics).

• scales perfectly at any size
• often tiny file sizes
• not suitable for photos

WebP

WebP is a modern image format designed for the web. In many cases, it gives you smaller file sizes than JPEG or PNG for similar visual quality.

• great for photos and graphics
• supports transparency (like PNG)
• can be lossless or lossy
• widely supported in modern browsers

If your website platform supports WebP (many do now), it’s often one of the easiest wins for page speed.

If you’re not sure, a good rule of thumb is:

• Photos: JPEG or WebP
• Logos/icons: SVG (or PNG/WebP if needed)

Compress images without ruining quality

Compression is where you’ll get the biggest speed wins.

Lossless compression

Shrinks the file without visible quality loss.

Good options include:

• PNG optimisation tools (for PNGs)
• general lossless optimisers (for multiple formats)

Lossy compression

Shrinks the file by removing some data. If done carefully, most people won’t notice.

This is especially useful for JPEGs and WebP.

Tip: don’t aim for perfection. Aim for “looks great on a normal screen”.

Use vector graphics where you can

If your logo is a PNG and it’s being used all over your site, switching to SVG can be a quick win.

Alt text: SEO and accessibility (both matter)

Alt text is the short description attached to an image in your website.

It helps:

• SEO: gives search engines context about the image
• Accessibility: screen readers use alt text to describe images to users who can’t see them

Best practice:

• describe what’s in the image in plain language
• keep it short and specific
• avoid keyword stuffing

Example:

• Good: “Woman working on a laptop at a kitchen table”
• Not great: “website design SEO marketing digital services lab best web designer”

Responsive images: serve the right size for each device

A common mistake is serving one huge image to everyone, even if they’re on a small phone.

Responsive images let the browser choose the most appropriate size based on the screen.

If your platform supports it, look for:

• srcset support (multiple image sizes)
• automatic resizing and modern formats (including WebP)

Even if you’re not touching code, many modern website builders and WordPress plugins can handle this for you.

Lazy loading: faster pages without sacrificing visuals

Lazy loading delays loading images until the user scrolls near them.

This improves initial page speed because the browser isn’t trying to load every image straight away.

A practical approach:

• lazy load images below the fold
• load key images (like your hero image) normally so the page still feels instant

Image SEO basics: naming and structure

Image SEO isn’t just file size and alt text. File names and organisation help too.

File naming

Use descriptive file names with hyphens.

• Good: east-gippsland-business-workshop.jpg
• Avoid: IMG_4029.jpg

Folder structure

Keep your uploads organised, especially if your site is image-heavy.

For example:

• /images/team/
• /images/services/
• /images/case-studies/

It’s mainly for your sanity, but it can also provide extra context.

Tools and resources (quick picks)

Depending on your workflow, these are worth a look:

• TinyPNG / TinyJPG: quick online compression
• ImageOptim (Mac): great for lossless optimisation
• Photoshop export settings: useful if you’re already in Adobe
• WordPress plugins: helpful if you want compression and resizing handled automatically

In addition to these tools, there are several online resources and guides that can help you stay up-to-date with the latest best practices for photo optimisation. Websites like Google’s Web.dev and Moz offer comprehensive guides on image optimisation, SEO, and web performance.

Faster pages, happier users and better SEO

Photo optimisation is one of those behind-the-scenes jobs that pays off everywhere: faster pages, happier users, better SEO, and a smoother mobile experience.

If you want a simple starting point, do this:

1. Resize images to the maximum size they’ll display on your site
2. Export in the right format (often JPEG or WebP)
3. Compress before uploading
4. Add clear, human alt text

If you’d like to read more about How to Develop Content for your Not-for-profit check it out here.