Why Your Website Is Slow (Hint: It's the Images)

The numbers that will make you wince

According to HTTP Archive data, images make up about 50% of the average web page's total transfer size. The median page weight hovers around 2MB, with images accounting for about 1MB of that. For pages heavy with product photos or full-bleed heroes, it's much worse.

A 4K photo straight from a modern phone camera can be 8-12MB. Put three of those on a homepage and you have a 30MB page. On a 10Mbps connection, that's three seconds of download just for the images — before the browser has even started rendering anything.

And that's on a decent connection. On mobile data in a patchy area? You're looking at 10-15 seconds. Most users leave after 3 seconds if a page hasn't loaded. You've already lost them.

Why this keeps happening

The most common culprit is workflow. Someone takes a photo on their phone, uploads it to a CMS, and moves on. No resize, no compress, no format conversion. The 8MB original is now serving as the hero image.

Another classic: the design was done in Figma or Photoshop with large exported assets. The developer drops them straight into the project. Nobody checks the file sizes. The site launches. The site is slow.

And then there's the agency case: the client provides a zip of their brand photos. None of them are optimised. Fifteen people are CC'd on the email. Nobody mentions that all the images are over 5MB each.

This isn't a technology failure. It's just a step that gets skipped because it's manual and nobody told anyone it mattered.

What Google actually measures and why it matters

Google's Core Web Vitals include a metric called LCP (Largest Contentful Paint). It measures how long it takes for the largest visible element on the page to load. On most websites, that element is an image — the hero image, a product photo, a background.

A good LCP is under 2.5 seconds. If your hero image is 6MB, your LCP is going to be terrible regardless of how fast everything else is. And Google uses LCP as a ranking signal. Slow LCP = lower rankings = less traffic = you're sad.

The other metric worth knowing is TBT (Total Blocking Time). Huge images can trigger long decoding times that block the main thread and make the page feel unresponsive even after it's visually loaded. Smaller images decode faster.

The fixes (in order of impact)

1. Resize images to actual display dimensions. If your website displays images at 800px wide, serve an 800px wide image. Not a 4000px wide original with CSS that makes it appear small. The extra pixels are downloaded and then thrown away. This is the biggest single improvement most sites can make.

2. Compress aggressively. 80% quality JPG or 85% WebP is virtually indistinguishable from 100% quality when viewed at screen size. The file size difference is enormous. A 2MB JPG can often become a 200KB JPG at 80% quality with no visible difference.

3. Switch to WebP. WebP files are 25-35% smaller than equivalent JPG files at the same visual quality. Modern browsers all support it. The switch is mostly painless if you have a CMS that handles it automatically, or a build step that converts images.

4. Use lazy loading. Images below the fold don't need to load immediately. The browser attribute loading="lazy" tells the browser to wait until the image is near the viewport before downloading it. This reduces initial page load significantly on long pages.

5. Use responsive images. Serve different image sizes to different screen sizes. A mobile phone doesn't need a 1400px wide hero image. The srcset attribute and sizes tell the browser which image to pick based on screen width. This is more work to set up but worth it.

How fast is fast enough?

For LCP, under 2.5 seconds is “good” by Google's standards. Under 1.5 seconds is excellent. In practice, that means your above-the-fold hero image needs to be well under 200KB to reliably hit those numbers on average connections.

For individual images in a gallery or product listing, aim for 50-100KB per image. If you have 20 product photos on a page and each is 100KB, that's 2MB just for images — already pushing it. At 50KB each, you're at 1MB, which is more manageable.

For full-bleed hero images that display at large sizes, 150-300KB is a reasonable target. Anything over 500KB for a single hero image needs a very good reason.

Tools to check your current state

Run your site through Google PageSpeed Insights (pagespeed.web.dev) or WebPageTest. Both will tell you which images are too large and give you specific recommendations. PageSpeed Insights will even estimate how many seconds you could save by optimising images.

If the report shows anything over 500KB for a single image that isn't a full-page download, that's worth fixing. If it shows images with “potential savings” in the megabytes range, your site has a serious performance problem that image optimisation will fix significantly.