Image Optimisation Guide: Cut Page Weight Without Losing Quality
How to optimise images for the web — AVIF vs WebP vs JPEG, responsive sizing, LQIP placeholders, lazy loading, and the pipelines used by fast sites.
Images are usually 50–70% of a webpage's total weight. That's the single biggest lever most sites have — and the one most sites completely ignore.
This is the practical guide to image optimisation for the modern web. Format choice, sizing, lazy loading, LQIP placeholders, and the pipeline decisions that keep hero images sharp under 200 KB.
1. Format choice — AVIF, WebP, or JPEG/PNG
| Format | File size vs JPEG | Browser support | When to use |
|---|---|---|---|
| AVIF | 30–50% smaller | Chrome, Safari 16+, Firefox 93+ | Primary format for photos |
| WebP | 20–30% smaller | All modern browsers | Universal fallback for photos |
| JPEG | Baseline | Universal | Last-resort fallback |
| PNG | Larger than JPEG | Universal | Only for images needing transparency or exact pixel art |
| SVG | Tiny | Universal | Logos, icons, illustrations |
2. Responsive sizing — one image, many sizes
A 2000px-wide hero image on a phone screen is a waste. Mobile browsers should download a 400–800px version instead. Modern HTML handles this via srcset:
<img
src="hero-800.jpg"
srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1600.jpg 1600w"
sizes="(max-width: 768px) 100vw, 800px"
alt="Hero image"
/>next/image and similar do this for you — you provide the source, they generate every size at build time or on demand.
3. Lazy loading — when to and when NOT to
Native loading="lazy" is supported in every modern browser. It's the right default for anything below the fold. But — never lazy-load the LCP image (usually the hero). That delays the metric Google measures.
See our dedicated lazy loading guide for the nuances.
4. Placeholders — LQIP and blurred previews
Before an image loads, a placeholder prevents layout shift and gives users something to look at. Two common patterns:
- Solid colour placeholder — average colour of the image, shown until it loads.
- LQIP (Low Quality Image Placeholder) — a tiny (10–30 KB) blurred version inlined as base64 or SVG, shown until the full image loads.
next/image supports placeholder="blur" with a blurDataURL — a 4–8 KB base64 blob inlined in the HTML. Zero visible layout shift, smooth transition.
5. Prioritising the LCP image
The hero image is usually your Largest Contentful Paint element. Give it every performance advantage:
- `priority` in
next/image— setsfetchpriority="high"and disables lazy loading. - Preload —
<link rel="preload" as="image" href="...">in the<head>. - Serve smallest sufficient size — a 1200px LCP image is usually plenty; avoid 2500px.
- Avoid post-load transforms — don't apply CSS filters or blur to the LCP image.
6. Alt text — SEO + accessibility win
Every content image needs meaningful alt text. Not image1.jpg, not photo, but a real description of what the image shows and its purpose in context. Decorative images should have alt="" (empty) so screen readers skip them.
Good alt text is: descriptive (2–15 words), specific to the image content, natural language, and includes relevant keywords only if they genuinely describe the image. See our image SEO guide for depth.
7. The complete pipeline
- Author the image at 2× your largest display size (Retina).
- Compress at source to remove metadata and reduce lossless bloat.
- Serve through an image pipeline (
next/image, Cloudflare Images, imgix) that outputs modern formats + responsive sizes. - Lazy-load below the fold. Priority-load the LCP element.
- Add meaningful alt text + descriptive filename.
- Verify in Lighthouse that no image is triggering LCP warnings.
The bottom line
Image optimisation is the single highest-ROI performance work on most sites. Modern format + responsive sizes + lazy loading + a smart LCP strategy = half the page weight for the same visual quality. It's the biggest win most sites are still leaving on the table.
Frequently asked questions
Short answers to the questions readers ask most often about this topic.
AVIF or WebP — which should I use?
next/image handles this automatically.How large should hero images be?
Do I still need to compress images manually?
next/image, Cloudflare Images, or Netlify Image CDN — they handle format negotiation and compression at the edge.In summary
How to optimise images for the web — AVIF vs WebP vs JPEG, responsive sizing, LQIP placeholders, lazy loading, and the pipelines used by fast sites. If you want a partner to build, ship, and grow a site that lives up to this playbook, get in touch with Befazed.
Web Design & Development
Befazed Studio
Befazed is a premium web design and development studio building modern, high-performance websites, landing pages, and digital experiences for founders and growing brands.
View portfolio →Last updated .
