Monochrome image of a laptop, camera, lens, and coffee cup on a wooden desk

9 October 2026

Image Optimisation for Faster Business Websites

“But the photos look lovely on my laptop.” They probably do. Picture a holiday cottage owner who’s dropped twenty shots straight off a new phone into a gallery on the home page, each one several megabytes. On office broadband it’s fine. On a patchy 4G signal, with a family trying to see the hot tub before they book, the page crawls in one strip at a time. They won’t wait for it.

Our guide to website speed and performance touches on images. They deserve more room than that. On a lot of business websites they’re the cheapest speed fix going, and the easiest thing to quietly undo six months later.

In brief

When a page feels slow to appear, it’s usually a picture people are waiting for.
Use WebP or AVIF for photos where you can, and SVG for logos.
Upload images at roughly the size they’ll be shown, then let the browser pick from a few versions so phones get smaller files.
Lazy-load the gallery. Never the main image at the top.

Why images matter so much for speed

Pictures are often the heaviest thing on a page. Google admits as much in its image guidance, calling them “often the largest contributor to overall page size”. They’re also what people sit waiting for. In the HTTP Archive’s 2025 Web Almanac, based on July 2025 data, an image was the Largest Contentful Paint element on 76% of mobile pages and 85.3% of desktop ones. LCP is the loading measure in Core Web Vitals, and our explainer on how LCP, INP and CLS are measured covers it in plain English.

So the big photo at the top carries a lot of weight, in both senses. Think of a restaurant’s shot of its dining room, or a roofer’s drone picture of a finished job. Good hosting can only do so much if that one file weighs 5MB.

Which image format to use

JPEG and PNG still work. They’re just heavier than they need to be these days. Google’s web.dev team reckons WebP and AVIF generally compress better than the older formats and should be used wherever possible. Roughly speaking, it breaks down like this.

Photos and screenshots. Lossy WebP or AVIF, with JPEG as the fallback.
Graphics where fine detail has to stay crisp. PNG or lossless WebP. PNG files get big fast, so use them sparingly.
Logos and icons. SVG. It’s drawn from shapes rather than pixels, so it scales up and down without going blurry.

Browser support isn’t much of a worry any more. When we checked Can I use in October 2026, WebP worked for about 97% of global browser usage and AVIF for about 96%.

On WordPress, AVIF uploads arrived in version 6.5, and the announcement claims AVIF files can be up to 50% smaller than JPEGs at the same quality. There’s a catch, mind. It relies on the image library on your server, so if your host doesn’t support it, it won’t work. You can check under Tools, then Site Health, then Info, then Media Handling. Ten seconds, tops.

Size images for the space they fill

This one catches a lot of people out. A phone camera takes photos thousands of pixels wide. A picture in a blog post might only be shown 800 pixels across. Upload the full file and every visitor downloads all those extra pixels, only for the browser to shrink them down again.

WordPress does try to help. Since version 5.3, any upload wider or taller than 2,560 pixels is scaled down to that limit for use on the site, while the original stays in the uploads folder. That’s still far bigger than most spaces on a page. So resize before you upload. Aim for about the largest size the photo will ever be shown at.

Letting the browser choose

The cleverer bit is responsive images. Rather than one file for everybody, you offer a few versions at different widths and let the browser decide. A phone has no use for a huge desktop image, and MDN’s docs make the point that sending one just wastes the visitor’s bandwidth. The ‘srcset’ attribute lists the versions on offer. ‘Sizes’ tells the browser how wide the image will be shown, and it grabs one that fills the space without being needlessly big.

WordPress has done this for images in post content since version 4.4, using the several sizes it makes of every upload to add ‘srcset’ and ‘sizes’ for you. That only covers normal image tags, though. Background images set in a theme’s styling sit outside it, so big header banners need a separate look. Google’s image guidance adds one rule. Always keep a normal ‘src’ as a fallback, because some browsers and crawlers don’t understand the newer attributes. There’s also a ‘picture’ element for when you want a different crop on a phone, say a close-up of the stage on an events site rather than the whole festival field.

Compression without the mush

Compression trades a little quality for a lot less weight. Overdo it and photos go blotchy round the edges. For JPEGs, web.dev’s advice is to try a few quality levels and see where the trade-off sits, and that’s sound for any format. A charity’s photos from a fun run can take far more squeezing than the hero shot on a jeweller’s product page, where the sparkle is the whole point.

You don’t need to do it by hand. On WordPress, an image optimisation plugin can compress and convert files as they’re uploaded, which saves anyone having to remember. Keep the plugin count sensible, though. Every one is another thing for your ongoing website maintenance to keep updated.

Lazy loading, and the image you shouldn’t lazy-load

Lazy loading means the browser holds off fetching an image until it’s close to scrolling into view. For a long product grid, or a builder’s gallery of fifty past jobs, that’s a big saving, because nothing downloads until someone scrolls near it. It’s one attribute, loading=”lazy”, and it’s well supported across the major browsers.

Just keep it away from the top of the page. web.dev is firm that images likely to be on screen when the page loads shouldn’t be lazy-loaded, especially the LCP image. Delay the very picture people are waiting for and you’ve made them wait longer. Even so, the 2025 Web Almanac found about 16% to 17% of pages still lazy-load their LCP image.

The opposite trick is fetchpriority=”high”, which nudges the browser to fetch that main image sooner. It’s a hint, and the browser can overrule it. Since version 6.3, WordPress adds it automatically to whichever image it reckons is the likely LCP, and leaves lazy loading off that one. Images a theme or plugin adds in its own way, like a lot of sliders, can slip past that detection, so test rather than assume.

Stop the page jumping about

Ever gone to tap a button and had it leap down the screen as a picture loaded above it? That’s layout shift, the CLS part of Core Web Vitals. Images without dimensions are among the most common causes of a poor CLS score, according to web.dev. The fix is dull and it works. Give every image a width and height in the code, or reserve the space with the CSS aspect-ratio property, so the browser knows how much room to leave before the file turns up.

While you’re in there, look at the alt text and filenames. Google wants alt text descriptive and in context, with no keyword stuffing, and it’s what screen readers read aloud. Short, descriptive filenames help too, so ‘oak-kitchen-worktop.jpg’ beats ‘IMG_4471.jpg’. Our post on website accessibility and WCAG 2.2 goes into alt text properly.

Checking your own site

Run two or three of your main pages through PageSpeed Insights on the mobile setting. Google has folded Lighthouse’s old separate image checks into a single insight called ‘Improve image delivery’. It flags images that are bigger to download than they need to be, and ignores anything where the saving would be under 4 KiB. If it lists your hero photo, start there.

Then think about habits. A site can be lean on launch day and bloated a year later because somebody’s been dropping 6MB photos into blog posts. A plugin that resizes on upload saves a lot of grief. On a hosted builder, how much of this you can control depends on the platform, which is one of the trade-offs in our comparison of WordPress and website builders like Wix.

Getting your images sorted

None of this usually needs a rebuild. Often it’s a morning of resizing, converting and tidying, plus a fix or two in the theme. If the images are only one symptom of a slow, tired build, our website design and development work plans performance in from the first sketch. Or just send us the page that’s dragging and we’ll take a look.

Keep reading

Sources

Scott Woodfield

Founder of TWA, Scott harbours over 10 years of digital marketing agency experience. Everything from removing a background of an image to full blown ecommerce solutions from the ground up, Scott's your go to guy for anything marketing & web.

Let’s have a chat