Oversized photos are the most common reason small business websites feel slow. Here's how to size, compress and serve images properly.
If a page feels sluggish, the culprit is usually not clever code. It's a 6MB photo straight off someone's phone, displayed in a box 400 pixels wide. Fixing images is often the quickest speed win available.
A full-width hero image rarely needs to be wider than about 2000 pixels. A thumbnail in a card might need 600. Uploading originals and letting the browser shrink them means visitors download pixels they never see.
WebP and AVIF are usually much smaller than JPEG at similar quality, and all current mainstream browsers support WebP. Most photos look fine at a quality setting well below maximum. Compare before and after at actual size, not zoomed in.
Images further down the page can load as the visitor scrolls. But don't lazy-load your main hero image - it should load first. And always set width and height so the page doesn't jump around as images arrive, which hurts your layout stability score.
Modern frameworks and image services resize, convert and cache images automatically. If your site doesn't, plugins can help on WordPress. Either way, it's worth reading our wider guide to web performance and Core Web Vitals.
We can run a speed check and show you what's worth fixing.
Start a conversation →As a rule of thumb, as close to the displayed size as possible, doubled for high-density screens where it matters. Full-width heroes around 1600 to 2000 pixels wide are usually plenty.
No. SVG suits logos, icons and simple graphics. Use WebP or AVIF for photographs.
