How Image Size Affects Your Website Speed (and What to Do About It)
If your site feels slow, images are the first place to look. On most websites they account for more total page weight than every other asset combined — HTML, CSS, and JavaScript included. That also makes them the highest-leverage thing you can fix, since a handful of well-compressed images can shave seconds off a page load that a dozen small code tweaks wouldn't touch.
Where images actually hurt: Core Web Vitals
Google's Core Web Vitals are the speed metrics that factor into search ranking, and images influence two of the three directly:
- Largest Contentful Paint (LCP): how long it takes the biggest visible element to render. On most pages, that element is an image — a hero banner, a product photo, a blog post's header image. A heavy, unoptimized image is one of the most common single causes of a bad LCP score.
- Cumulative Layout Shift (CLS): how much content jumps around as the page loads. This isn't about file size directly, but about images loading without their dimensions reserved in advance, causing the rest of the page to shift once they pop in.
If you've ever run a page through PageSpeed Insights or Lighthouse and seen "Largest Contentful Paint" flagged in red, there's a good chance an image is the reason.
What actually moves the needle
In rough order of impact:
- Compress before you upload, not after. A photo straight off a phone or camera is often 3–10 MB. The same image, properly compressed, can be a few hundred KB with no visible difference at normal viewing size. This single step usually accounts for the biggest win.
- Serve images at the size they're actually displayed. A 4000px-wide photo displayed in a 600px-wide blog column is doing nothing but wasting bandwidth — the browser downloads all 4000px of data just to shrink it visually. Resize to something close to the real display size before uploading.
- Use a modern format. WebP is safe to use everywhere today and typically comes in 25–35% smaller than an equivalent JPG at the same visual quality. AVIF can go even smaller where it's supported. (We cover the tradeoffs in WebP vs JPG vs PNG vs AVIF.)
- Reserve space for images before they load. Setting an explicit width and height (or aspect-ratio) on your image tags lets the browser allocate the right amount of space immediately, instead of shifting the layout once the image arrives — this is what actually fixes CLS.
- Lazy-load anything below the fold. Images the visitor hasn't scrolled to yet don't need to load immediately. Most modern browsers support this with a single HTML attribute (
loading="lazy"), no extra tooling required.
Steps 1–3 are about file weight. Steps 4–5 are about how the browser handles that weight while the page loads. Both matter, but if you can only do one thing today, it's compressing your images properly — it's the highest-effort-to-impact ratio of the five.
How to check where you actually stand
Before guessing, measure. PageSpeed Insights (Google's own tool, built on Lighthouse) will show your real LCP and CLS scores for any public URL, and specifically flag which images are the worst offenders. It's free, takes about 30 seconds, and tells you exactly where to focus instead of optimizing blindly.
Doing the compression part right
The most common mistake isn't skipping compression — it's using a tool that uploads your images to someone else's server to do it, which is slow, and means a copy of your (possibly unpublished) content sits somewhere outside your control while it processes.
img-compress compresses and converts between JPG, PNG, WebP, and AVIF directly in your browser — steps 1 and 3 from the list above, done locally. Nothing gets uploaded anywhere, so it's just as fast for one hero image as it is for an entire batch of product photos before a site launch. (Resizing to the right display dimensions, step 2, is still worth doing in your image editor or CMS before you get here.)