Image Optimisation for Websites: The Biggest Speed Win Most Sites Ignore

Image optimisation for websites is the single most reliable way to make a typical business site faster, and it is frequently the last thing anyone looks at. A photograph straight from a modern phone can weigh several megabytes, and a page showing a dozen of them can ask a visitor to download more data than a whole novel. Visitors on a train, with patchy signal, will not wait. The remedies are well understood, and most can be applied in an afternoon.

Start with the right size

The most common mistake is sending a picture much larger than the space it fills. A photograph that is displayed 600 pixels wide does not need to be 4,000 pixels across. Work out the largest size each image appears on your pages, allow for high-density screens by doubling it, and resize before uploading. Many content systems resize automatically, but check that the generated sizes are actually the ones being used.

Serve several versions

A phone does not need the file a large monitor needs. The srcset and sizes attributes let a page offer several widths of the same picture and allow the browser to choose the most suitable. This saves a great deal of data on small screens and costs nothing in quality. Content systems and image services can generate the versions for you.

Choose modern formats

JPEG and PNG remain familiar, but newer formats such as WebP and AVIF compress better, often producing files a good deal smaller at similar quality. Current browsers support them widely, and the picture element lets you offer a fallback for any that do not. Use SVG for logos, icons and simple illustrations, since it stays sharp at any size and is tiny. Reserve PNG for images that really need transparency or crisp edges.

Compress sensibly

Lossy compression at moderate quality settings is invisible to most viewers and removes a large share of the weight. Test a few levels on your own pictures, and be more generous for hero images and portraits where detail matters. Strip unnecessary metadata, which may include location details you would rather not publish. Automate the process so that nobody on the team has to remember it.

Load lazily, but not everything

Images below the first screen can be loaded only when the visitor scrolls near them, using the loading attribute set to lazy. This reduces the work done at the start. Do not apply it to the main image visible at the top of the page, because delaying it harms the Largest Contentful Paint measurement that Google reports in its Core Web Vitals. For that one picture, do the opposite: make sure it is discovered early and consider giving it a high fetch priority.

Reserve the space

Specify width and height for each image so that the browser knows how much room to leave before the file arrives. Without it, text jumps down as pictures load, which is irritating and damages the layout stability score. Modern CSS lets images scale while keeping their proportions.

Describe them too

A short workflow for your team

Decide on a standard once and write it down. For example: crop to the shape the design needs, resize to no more than twice the largest display width, export at a sensible quality, name the file descriptively and upload only that version. Provide a simple tool that does the resizing, or ask your developer to automate it on upload, so that a busy colleague cannot accidentally add a nine-megabyte photograph to the home page.

Measure the result

Run a speed test before and after, and note the total page weight and the Largest Contentful Paint time. Look in your browser's network panel to see which files are largest. Sort by size and deal with the top five first, since a handful of images usually account for most of the weight. Repeat the check every few months, because new content brings new problems.

Write a short, useful alternative text for each meaningful image, and leave it empty for decorative ones. That serves visitors who cannot see them and gives search engines context. Use descriptive file names rather than camera numbers. If you would like us to audit the images on your site and show you how much could be saved, it is a quick job with a satisfying result.