If you've ever run your website through Google PageSpeed Insights or GTmetrix and stared at a disappointing score, you've probably noticed that a large chunk of the recommendations involve images. Serve images in next-gen formats. Properly size images. Defer offscreen images. Efficiently encode images. It's almost always images, in one form or another, and there's a reason for that — images are by far the heaviest content type on most web pages, and most of them haven't been optimized at all.

This isn't just an abstract performance concern. Slow pages lose real visitors — studies consistently show that every additional second of load time increases bounce rates meaningfully, particularly on mobile. Google has also made page speed a direct ranking factor through its Core Web Vitals metrics. A slow, image-heavy page isn't just frustrating to visitors; it's actively working against your SEO.

Here's what's actually going on, and what you can do about it.

Why Images Hit So Hard

A typical web page is made up of HTML, CSS, JavaScript, fonts, and images. For a well-built page, the HTML, CSS, and JavaScript are often just a few hundred kilobytes combined — minified, compressed, cached efficiently. Images, on an unoptimized page, can easily be 5–20 MB. They're not just the largest files; they're often the last things the browser downloads before the page looks complete to the visitor.

The browser has to download every image before it can display it in the page layout. If your hero image is 4 MB, the visitor is waiting for 4 MB to transfer before they see a fully rendered page — even if everything else loaded instantly. On a typical mobile connection, that's several seconds of staring at a partially loaded page. On a slow connection or in an area with poor signal, it might mean the visitor gives up and leaves before the page finishes loading.

The Most Common Image Problems (And How to Spot Them)

Most unoptimized websites have the same handful of problems. If you've never deliberately optimized your images, you probably have several of these:

Images uploaded straight from a camera or phone. Modern smartphone cameras produce photos at 3–8 MB each, at resolutions of 4000+ pixels wide. That's the right size for printing poster-sized photos; it's wildly excessive for a website. A hero image displayed at 1400px wide doesn't need to be 4000px wide — you're making every visitor download 3× the data they need.

Wrong format for the content type. PNG files used for photographs instead of JPG or WebP. JPG files used for logos and graphics where the lossy compression creates visible artifacts. Either mistake results in files that are larger than they need to be, lower quality than they should be, or both. The WebP Converter makes it easy to switch formats without quality loss.

No compression applied. Even an appropriately sized JPG straight from a design tool is often exported at maximum quality — 95–100% — when 80–85% quality produces a visually identical result at 40–60% of the file size. There's no reward for serving a 500 KB image when a 180 KB version looks exactly the same on screen.

Images loaded regardless of whether they're visible. A page with ten images below the fold downloads all ten on load, even if the visitor never scrolls down to see them. Lazy loading — a browser feature that defers loading of offscreen images until the visitor scrolls toward them — eliminates this waste. It requires a single HTML attribute: loading="lazy" on your <img> tags.

Quick audit: Open your site in Chrome, right-click the page, choose Inspect, and click the Network tab. Reload the page and filter by "Img". You'll see every image your page loads, its file size, and how long it took to download. If you see images over 200–300 KB for standard content images, or over 500 KB for hero images, those are your targets.

Core Web Vitals: How Image Performance Affects Your SEO

Google's Core Web Vitals are a set of page experience metrics that directly influence search rankings. Two of the three main metrics are heavily influenced by images:

Largest Contentful Paint (LCP) measures how long it takes for the largest visible element on the page to finish loading. On most pages, that largest element is the hero image. If your hero image is a 4 MB uncompressed photo, your LCP is going to be poor — and a poor LCP score directly hurts your rankings. Google's target is under 2.5 seconds. A properly compressed, appropriately sized hero image can often get you there without any other changes.

Cumulative Layout Shift (CLS) measures visual stability — how much the page layout jumps around while loading. Images without explicit width and height attributes cause layout shifts because the browser doesn't know how much space to reserve for them until they load. Adding width and height attributes to your <img> tags is an easy fix that meaningfully improves CLS.

The Fix: What to Actually Do

The good news is that image optimization is one of the highest-impact, lowest-effort performance improvements you can make to a website. The workflow is straightforward:

  • Resize to display dimensions. Figure out the maximum pixel width each image will be displayed at, multiply by 2 for high-DPI displays, and resize to that width. A hero image displayed at 1400px wide should be served at no more than 2800px wide. Use the Image Resizer to hit these targets exactly.
  • Compress after resizing. Run each image through the Image Compressor at 80–85% quality for photos, or use lossless compression for graphics. The file size reduction is typically 50–80% with no visible quality difference.
  • Switch to WebP where possible. Converting JPG and PNG images to WebP with the WebP Converter typically reduces file sizes by another 25–35% on top of compression. For sites where you control the HTML, WebP is the right default format for all web-displayed images.
  • Add lazy loading to below-the-fold images. Add loading="lazy" to every <img> tag except your hero/above-the-fold images. Those should load immediately; everything else can wait until the visitor scrolls toward it.
  • Add explicit width and height attributes. This prevents layout shift and improves CLS. If your image displays at 800×450px, add width="800" height="450" to the <img> tag.

How Much Difference Does It Actually Make?

The numbers can be dramatic. A real-world example: a small business website with a 3.8 MB hero image, eight product photos averaging 1.2 MB each, and a team photo at 2.1 MB has about 15.5 MB of image weight on one page. After resizing to display dimensions and compressing at 82% quality, that same page has about 1.2 MB of image weight — a 92% reduction. Page load time on a typical mobile connection drops from 12+ seconds to under 2 seconds. LCP goes from failing to passing. Bounce rate drops. Rankings improve.

None of that required a developer, a hosting upgrade, or a CDN. Just resizing and compressing images that were already there.

If you've been putting off image optimization because it sounds technical or time-consuming, it really isn't. Run your images through the Bulk Compressor, resize anything oversized with the Image Resizer, convert to WebP, and you're done. The audit takes ten minutes. The optimization takes another twenty. The improvement lasts until you upload the next batch of unoptimized photos — at which point you'll know exactly what to do.