How to optimise website images for better performance

A great website needs great images, but there’s more to it than simply uploading a high-quality photo. Optimising your website images helps your site load faster, perform better and create a smoother experience for every visitor.

File sizes still matter

In an age of full fibre and 5G network speeds, you may be inclined to think you can let your file sizes be a little larger.

Don’t!

When someone visits your website, every image must load. Even if your images are only modest in size, it can still impact load times, especially if you have a lot of them on a page.

Keeping your image files as tiny as possible is always best practice. The recommendation from Google – and us at PMW – is to keep them below 100KB. That may seem like a tall order, but it’s doable, especially when you consider the following:

• Try to use images with large areas of solid colour and avoid anything with lots of tiny details (grass and trees are a frequent culprit). The more detail and variation an image contains, the larger the file size is likely to be, making it harder to keep below 100KB without losing clarity.
• When saving your image, make sure you save it at an appropriate resolution for display. If you know your image is only going to be displayed at 600 x 600 pixels, then don’t save it at 2560 x 2560 pixels, because you’ll just be increasing the file size for no reason.
• Use a modern file format to keep sizes as low as possible . . .

Modern file formats

JPGs, GIFs and PNGs are old hat and if you’re still clinging onto them, you could be harming your site’s performance and, ultimately, your site’s search rankings. Modern formats include WebP and AVIF for raster images and SVG (Scalable Vector Graphics) for vector images.

Between the two, AVIF generally outperforms WebP in terms of compression (getting the most out of each byte) and quality. Both file formats work well with any type of image and support alpha channels, meaning you can include transparency in your optimised images for clever cut out, layering and fading effects.

SVGs maintain clarity at any size, so are really good for things like logos and background graphics. By default, WordPress prevents the upload of SVGs, but there are plugins available that allow you to bypass the restriction. As SVGs are essentially text files with a set of instructions, it’s possible to embed them directly onto a page, but you will need to be familiar with HTML if you’re going down that route.

Use easy to read file names that make sense

It’s really important to name files using plain language that describes the contents of the file. This not only helps you identify the image at a later date but helps Google too.

There are three caveats to that.

1. Keep everything lowercase, because most web servers are case sensitive and it avoids any confusion or issues caused by using the wrong case.
2. Avoid special characters, because they may have system specific uses. For example, a ? in a URL is usually followed by a string of parameters that get passed to the web page you’re viewing.
3. Don’t use spaces. Have you ever noticed a web address with %20 scattered throughout the URL? That’s how web servers and browsers interpret spaces in file names. It makes things really unreadable. To make things legible to the human eye – and make URLs more memorable – replace all spaces with dashes.

Let’s consider a theoretical picture of a woman holding an umbrella. If you were to write the file like this:

woman holding an umbrella.avif

The URL for the file would look like this:

woman%20holding%20an%20umbrella.avif

If we instead replace the spaces with dashes, it would look like this:

woman-holding-an-umbrella.avif

The latter version is much easier to read and won’t undergo any changes once uploaded to the web page.

Alt tags and titles

When you upload an image in WordPress, it will fill in the image title based on the file name of the image. You will want to modify this so that it uses proper English (or French, or Spanish, etc.) to make it readable.

For accessibility, you must fill in the alt text for the image. Alt is short for alternate text and will be displayed if the image itself fails to load. More importantly it’s there to help blind or partially sighted visitors who are using a screen reader to engage with your site.

Use the alt field to describe exactly what the image contains. Going back to our theoretical example of the women holding an umbrella, you might write something like: “A young woman holding an umbrella in the rain on a busy high street.”

Copyright considerations

Breaching copyright can cost businesses a lot of money and cause unnecessary headaches.

Unless an image is a photo you have taken or created yourself then you really need to be mindful of copyright. If sourcing an image from an online repository such as iStock or Pexels, make sure you read the license agreement fully before using the image. Often you’lll be fine, but there may be conditions placed on using certain images, such as restricting it for use on your website only (so no print or social media or email marketing) or preventing you from modifying the image.

The same considerations apply to images commissioned by you. Generally, the creator retains the copyright and issues a licence for you to use their copyrighted material.

Be very careful using images you find on social media, or on other personal or business websites. Whoever posted the image may not be the copyright owner themselves, or if they are, using their image without their consent can land you in trouble. In those instances, reach out to find out who the copyright owner actually is and whether you have their permission to use their image.

What tools can you use to edit images?

There are a wealth of tools available that will enable you to edit, resize and save website images in whatever format you need. Obvious ones like Adobe Photoshop carry a price tag with them, but the advantages are they are well established and supported. Alternatives include OpenSource options such as GIMP (GNU Image Manipulation Program) or online apps such as Canva, both of which are well known and used by many.

With OpenSource options you may be restricted to community support and online documentation, but you will find guides and many walkthroughs for whichever product you decide to use.

Another option growing in popularity is AI-powered image editing and generation. The biggest challenge is often writing effective prompts. To get the right result, prompts need to be concise but specific enough to avoid misinterpretation, which is a skill in itself. Repeated edits and multiple prompts can also lead to image degradation, with quality and consistency gradually declining over time. You may also find that some AI tools offer limited support for exporting to modern image formats, meaning traditional graphics software is still needed to prepare files for web use.

Summary

Optimised images help improve page speed, user experience and accessibility. Large, uncompressed website images can slow down your site and increase bounce rates, especially on mobile devices. Using the correct image formats and file sizes help keep your website fast and user-friendly. For the best end user experience, follow these four golden rules:

1. Keep website images below 100KB.
2. Use WebP, AVIF or SVG formats.
3. Use descriptive filenames, replacing spaces with hyphens and avoid special characters.
4. Use descriptive alt tags and titles for accessibility.

If you’d like support with website optimisation and development, get in touch with our team today.