Why Image Optimisation Matters More Than People Think
Images are usually the heaviest things on a web page, often making up the majority of what a visitor has to download. Get them wrong and your site crawls, especially on mobile data. Get them right and pages feel instant while still looking sharp. Image optimisation for the web is the craft of shrinking those files as far as possible without anyone noticing a drop in quality.
This is not just about speed for its own sake. Page speed feeds into how Google ranks you and, more importantly, into whether visitors stay. A slow-loading hero image is one of the fastest ways to lose someone before they have seen your offer, which is why this quiet, technical work has a direct line to revenue.
Choosing the Right Format for the Job
The single biggest win is using the right file format. Modern formats like WebP and AVIF compress dramatically better than the old standbys, often cutting file size by a quarter to a half at the same visual quality. For most photographs on a modern site, WebP is the sensible default, with AVIF an even smaller option that is now widely supported.
The older formats still have their place. Keep the right tool for each job and you avoid both bloated photos and blurry logos.
- check_circleWebP: excellent all-rounder for photos and graphics; the modern default.
- check_circleAVIF: smallest files at high quality, now supported in all major browsers.
- check_circleJPEG: fine for photos when you need maximum compatibility, but heavier than WebP.
- check_circlePNG: best for graphics needing transparency or crisp edges; avoid for large photos.
- check_circleSVG: ideal for logos, icons and simple illustrations; scales perfectly at any size with tiny file sizes.
Size It Right Before You Compress
The most common and most wasteful mistake is uploading an enormous photo straight from a phone or camera, perhaps 5,000 pixels wide, and letting the browser shrink it on screen. The visitor still downloads every one of those pixels. If an image only ever displays at 800 pixels wide, that is roughly the width it should be saved at.
Account for high-resolution screens by serving images at around twice their display size for the sharpest result, then let responsive techniques do the rest. Using the right markup, you can serve a small image to phones and a larger one to desktops, so nobody downloads more than they need. Sizing correctly often saves more weight than compression ever will.
Compression: Finding the Sweet Spot
Compression removes data the eye is unlikely to miss. Lossy compression, used for most photos, throws away detail to shrink the file, and there is a sweet spot where the savings are huge but the quality loss is invisible. For most web photos, a quality setting around 75 to 85 per cent strikes that balance well. Push too far and you get blocky skies and muddy edges.
You do not need expensive software. Free tools like Squoosh, TinyPNG or the export settings in most design apps let you compare quality and file size side by side before you commit. Spend a moment eyeballing the result at its real display size, since flaws that show at 100 per cent zoom often vanish on the actual page.
Lazy Loading and Loading in the Right Order
Not every image needs to load the instant a page opens. Lazy loading tells the browser to hold off on images below the fold until the visitor scrolls towards them, which makes the first screen appear much faster. Adding loading="lazy" to off-screen images is a small change with a real payoff, and it is now natively supported in browsers without extra scripts.
Flip the logic for your most important image. The main hero or headline image should load eagerly and as early as possible, because it is often the largest element the visitor waits for. Lazy-loading that one by accident can actually make the page feel slower, so reserve lazy loading for everything below the first screen.
Stop Layout Shift With Width and Height
Few things annoy a visitor more than tapping a button that jumps away as an image loads above it. This jolting is called layout shift, and it happens when the browser does not know how much space an image will take until it arrives. The fix is simple: always specify width and height attributes, or the equivalent in CSS, so the browser reserves the right space from the start.
Stable layouts feel more professional and protect your Core Web Vitals scores, which Google watches closely. Reserving space for every image is one of the cheapest, highest-impact habits in image optimisation, and it costs nothing but a moment of attention per image.
Alt Text: Optimisation You Can Read
Image optimisation is not only about file size. Every meaningful image should have descriptive alt text, the written description read aloud by screen readers and shown if an image fails to load. It makes your site accessible to visitors using assistive technology and gives search engines context they cannot get from the picture alone.
Write alt text as if describing the image to someone who cannot see it, naturally including a relevant keyword where it genuinely fits rather than stuffing them in. Purely decorative images, such as background flourishes, should have empty alt text so screen readers skip them. Good alt text is a small effort that pays off in both accessibility and search.
A Quick Workflow to Apply Every Time
Pulling it together, a reliable routine keeps every image fast without slowing you down. Build it into how you publish and the whole site stays light over time, even as content grows.
Run this checklist whenever you add images and you will rarely have a slow page caused by them again.
- check_circleResize the image to roughly the size it will actually display, allowing for high-resolution screens.
- check_circleExport it as WebP or AVIF where supported, falling back to JPEG or PNG only when needed.
- check_circleCompress to around 75 to 85 per cent quality and check it at real display size.
- check_circleAdd width and height to prevent layout shift, and lazy-load anything below the fold.
- check_circleWrite clear, descriptive alt text for every meaningful image.
Frequently asked questions
What is the best image format for websites?expand_more
For most photos, WebP is the modern default, compressing far better than JPEG at the same quality. AVIF is even smaller and now widely supported. Use PNG for graphics needing transparency, and SVG for logos and icons since they scale perfectly at tiny file sizes. Match the format to the image type rather than using one for everything.
How small should my web images be?expand_more
There is no fixed number, but aim to keep most photos well under a few hundred kilobytes. The biggest savings come from sizing correctly: never upload a 5,000-pixel photo to display at 800 pixels. Resize to roughly twice the display size for sharp results on modern screens, then compress to around 75 to 85 per cent quality.
Does image optimisation help SEO?expand_more
Yes, in two ways. Faster-loading images improve page speed and Core Web Vitals, which Google uses as a ranking signal and which keep visitors from leaving. Descriptive alt text also gives search engines context about your images, helping them appear in image search and reinforcing the page topic. It is one of the higher-value technical SEO tasks.
What is lazy loading and should I use it?expand_more
Lazy loading delays loading images until the visitor scrolls near them, so the first screen appears faster. Add loading="lazy" to images below the fold; it is natively supported in browsers with no extra scripts. Do not lazy-load your main hero image, though, as that one should load early since visitors often wait on it.
Why do I need to set image width and height?expand_more
Specifying width and height lets the browser reserve the correct space before an image loads, preventing layout shift, the annoying jump when content moves as images appear. Stable layouts feel more professional and protect your Core Web Vitals scores. It is a tiny habit per image with a real payoff in both user experience and search performance.