How to reduce image file size for a faster website

On most pages, images are the single biggest thing a visitor has to download. Which means getting image weight down is usually the highest-leverage performance work available to you — bigger impact than shaving a few kilobytes off JavaScript. This guide covers why image size matters for the metrics Google actually measures, and the steps that move them, roughly in order of payoff.

Why image weight shows up in your metrics

Core Web Vitals are the user-centric performance signals search engines and teams watch. Images touch two of them directly:

• LCP (Largest Contentful Paint) — how long the biggest element (frequently a hero image) takes to appear. A heavy image delays LCP.
• CLS (Cumulative Layout Shift) — jarring jumps as content reflows. Images without reserved dimensions push the page around as they load.

Lighter, well-declared images make pages feel faster and can improve these measured signals. That’s a performance benefit; it isn’t a promise of search rankings, which depend on many factors.

The levers, ordered by impact

1. Resize to what you actually display

The biggest saving is rarely the codec — it’s pixels. Serving a 4000 px-wide photo into a 800 px-wide slot wastes most of the download. Resize images to their largest rendered size (times a factor for retina) before you ever put them on a page. Compression can’t rescue an oversized canvas.

2. Choose a modern format

WebP and AVIF deliver smaller files than JPEG at similar perceived quality, so the browser downloads fewer bytes for the same picture. Offer them with a fallback via the <picture> element so every visitor gets a working image.

3. Compress to a visually-lossless point

Dial quality down to the lowest setting that still looks clean at 100% zoom — the technique in compressing without losing quality. A modest quality reduction (say, the difference between 100 and ~82) often cuts file size enormously for no visible cost.

4. Reserve space with width & height

Always put width and height (or aspect-ratio CSS) on your <img>. Modern browsers use them to reserve the right box before the image loads, which prevents layout shift and improves CLS.

5. Lazy-load offscreen images

Add loading="lazy" to images below the fold so they only download as the visitor scrolls toward them. Don’t lazy-load your hero / above-the-fold LCP image — that one you want eager and light.

6. Serve responsive sizes

With srcset and sizes, a phone downloads a small file while a desktop gets a large one, instead of everyone grabbing the same heavy original.

A simple pre-publish checklist

1. Is the image resized to its real display dimensions?
2. Is it WebP or AVIF (with a JPEG fallback where needed)?
3. Has it been compressed to a quality that still looks good at 100%?
4. Does the <img> have width/height and accurate alt text?
5. Are below-the-fold images set to loading="lazy"?

Don’t forget accessibility & SEO basics

Faster doesn’t mean lazier for users. Descriptive alt text helps screen readers and gives search engines context about the image. Meaningful filenames and honest alt text cost nothing and help everyone — small wins that sit right alongside the performance work.