---
title: Image Optimization for the Web (the biggest easy win)
description: Images are usually the heaviest thing on a page — and the easiest to fix. Here's how to make them load fast without looking worse: compress, resize, modern formats, and lazy loading.
canonical: https://watchfor.io/blog/image-optimization
---

# Image Optimization for the Web (the biggest easy win)

2026-01-21 · WatchFor Team · Performance · performance, basics, core-web-vitals

Images are usually the heaviest thing on a page — and the easiest to fix. Here's how to make them load fast without looking worse: compress, resize, modern formats, and lazy loading.

If you want to make a website faster and you only have time for one thing, optimise your images. On most pages they're the single heaviest category — often more weight than all the code combined — which means they're also the biggest, easiest win. Best of all, you can usually halve image weight with **zero visible quality loss**.

## Why images dominate page weight

A modern page is mostly pictures. A few unoptimised photos straight off a phone or a stock site can each be several megabytes, while your entire HTML/CSS/JS might be a fraction of that. Heavy images directly hurt your [LCP](/blog/lcp-explained) (the hero image is often *the* LCP element) and your overall load time.

## The four levers

| Lever | What it does |
| --- | --- |
| **Compress** | Strip wasted bytes — often huge savings, no visible change |
| **Resize** | Don't serve a 4000px image into a 400px slot |
| **Modern formats** | WebP/AVIF are far smaller than JPEG/PNG |
| **Lazy load** | Defer off-screen images until needed |

### 1. Compress

Most images carry far more data than the eye can see. Compression removes it. **Lossless** compression saves bytes with zero quality change; **lossy** (at a sensible quality level) saves much more with no *perceptible* difference. This alone often cuts file size dramatically.

### 2. Resize to the actual display size

A classic mistake: uploading a 4000×3000 photo and displaying it at 400px wide. The browser downloads the whole giant file and shrinks it — wasting most of those bytes. **Serve images at (or near) the size they're shown**, and use responsive images (`srcset`) to send smaller versions to smaller screens.

### 3. Use modern formats

| Format | Notes |
| --- | --- |
| **JPEG/PNG** | Universal, but larger |
| **WebP** | ~25–35% smaller than JPEG, widely supported |
| **AVIF** | Even smaller, great quality, growing support |

Switching photos to **WebP** (with a fallback) is one of the highest-ratio changes you can make.

### 4. Lazy-load — but not the hero

[Lazy loading](/blog/how-to-speed-up-your-website) defers off-screen images until the user scrolls near them, so the initial load is lighter. One critical exception:

> **Never lazy-load your LCP image.** The largest above-the-fold image (your hero) should load *immediately* — even preloaded. Lazy-loading it delays the very thing [LCP](/blog/lcp-explained) measures, hurting your score. Lazy-load everything *below* the fold instead.

## A quick checklist

| Do | Why |
| --- | --- |
| Compress every image | Big savings, invisible to users |
| Serve at display size (+ `srcset`) | Stop wasting bytes on oversized images |
| Use WebP/AVIF with fallback | 25%+ smaller for free |
| Set width/height on every image | Also prevents [layout shift (CLS)](/blog/cls-explained) |
| Lazy-load below-the-fold only | Lighter initial load, fast hero |

Notice that setting dimensions does double duty: it speeds loading *and* prevents the [layout shift](/blog/cls-explained) that comes from images popping in.

## The bottom line

| | In one line |
| --- | --- |
| **Why** | Images are the heaviest part of most pages. |
| **How** | Compress, resize, modern formats, lazy-load (not the hero). |
| **Bonus** | Setting dimensions also fixes CLS. |
| **Payoff** | Often halves page weight with no visible quality loss. |

Image optimization is the rare fix that's enormous in impact and small in effort. Compress, right-size, switch to WebP, and lazy-load below the fold — and your pages get dramatically lighter while looking exactly the same.

Related: [How to speed up your website](/blog/how-to-speed-up-your-website), [LCP explained](/blog/lcp-explained); test with the free [Core Web Vitals checker](/core-web-vitals-checker).

---

Canonical page: https://watchfor.io/blog/image-optimization · All articles: https://watchfor.io/blog/all.md · Site guide: https://watchfor.io/llms.txt