If you could fix only one thing to make a typical small business website faster, it would very often be the images. Oversized photos are one of the most common reasons sites load slowly, especially on phones, and they’re also among the easiest problems to fix.
This post explains why images slow sites down, what “right-sized” means and the practical steps that make a real difference.
Why images are usually the problem
Modern phones and cameras produce large, detailed photos. A single photo straight from a phone can easily be several megabytes, and many thousands of pixels wide. That’s great for printing a poster. It’s wasteful for a website, where most images are displayed at a fraction of that size.
When an oversized image is uploaded to a website, every visitor downloads the full, heavy file, even if it’s shown in a small box. Multiply that by a homepage with a large banner, a gallery and several service photos, and a page can end up many times heavier than necessary.
On a fast office connection you might barely notice. On a phone with mobile data, which is how many customers meet your business, it can mean several seconds of waiting.
How images affect your Google measurements
Google’s Core Web Vitals measure how your site feels to real visitors. Images affect two of them directly:
- Largest Contentful Paint (LCP) measures how long the main content takes to appear. On many pages, the largest element is a hero image or banner. If that image is heavy, LCP suffers.
- Cumulative Layout Shift (CLS) measures how much the page jumps around while loading. Images without set dimensions cause content to shift when they finally appear.
Both measurements matter to visitors and form part of how Google assesses page experience.
What “right-sized” means
An image is right-sized when:
Its dimensions match how it’s displayed
If an image is shown at 800 pixels wide, there’s little point serving a 5,000-pixel version. Allowing for high-resolution screens, images are typically served at around one to two times their displayed size, not ten times.
It’s compressed sensibly
Compression reduces file size by removing detail the eye doesn’t notice. Most photos can be compressed significantly with no visible difference.
It’s in an efficient format
Modern formats such as WebP and AVIF produce much smaller files than older JPEG and PNG formats at similar quality, and they’re supported by current browsers. WordPress supports WebP natively and can work with AVIF in recent versions, depending on your server.
Different screens get different sizes
WordPress automatically creates several sizes of each uploaded image and can let browsers choose the most appropriate one for the screen. This only works well if themes use it properly.
Practical steps that make a real difference
1. Resize before uploading
Get into the habit of resizing photos before you upload them. For most website uses, a maximum width of around 1,600 to 2,000 pixels is plenty for large banner images, and smaller for everything else.
2. Use an optimization tool or service
An image optimization plugin or service can compress images automatically, convert them to modern formats and resize oversized uploads. Choose one carefully, as some add their own weight, and configure it so it processes existing images too.
3. Lazy-load images below the fold
Images further down the page don’t need to load until the visitor scrolls near them. WordPress adds lazy loading automatically to many images. The important exception is your main hero image, which should load immediately, because lazy-loading it can actually slow LCP.
4. Set width and height
Make sure images have their dimensions specified so browsers can reserve space for them, preventing layout shifts.
5. Prioritize the hero image
The main image at the top of a page is often the most important element for perceived speed. Making sure it’s compressed, correctly sized and loaded with priority can noticeably improve how quickly the page feels ready.
6. Question every image
Does that background video really need to autoplay? Does the slider with eight large photos earn its weight? Carousels in particular often load several large images while visitors only see the first.
7. Don’t forget PDFs and downloads
Brochures and menus uploaded as huge PDFs can frustrate mobile visitors too. Compress them, and consider putting the key information directly on the page.
How to find your heaviest images
Run a key page through Google’s PageSpeed Insights. Look for suggestions such as “properly size images”, “serve images in next-gen formats” and “efficiently encode images”. They’ll list specific images and the potential savings.
Your browser’s developer tools can also show every file a page downloads and how large each one is, sorted by size.
The takeaway
Images are often the heaviest part of a website and the easiest place to win back speed. Resize before uploading, compress, use modern formats, lazy-load below the fold, set dimensions and give your main image priority. The result is a faster site, better Core Web Vitals and fewer visitors giving up before your page appears.
Image optimization is usually one of the first things we do in a performance project. If you’d like us to find the quick wins on your site, get in touch.