Image Optimization Guide for Next.js and React Apps

Image optimisation is mostly about dimensions, format and priority. A modern format with the wrong sizes attribute can still download a desktop image on a phone; a compressed hero can still be the LCP bottleneck if it loads late.

What Image optimisation measures

Compare the intrinsic image size with the rendered size, check the format and compression, and inspect the network waterfall for the hero. Use Lighthouse or WebPageTest to see which image is the LCP.

The fixes that usually move the number

• Use next/image or a CDN that can resize and convert to AVIF/WebP.
• Provide an accurate sizes value for responsive images.
• Set priority only on the hero image.
• Set explicit dimensions or fill with a sized container.
• Lazy-load below-the-fold images and keep the hero eager.

Symptom, cause and fix

Symptom	Likely cause	What to do
Phone downloads a desktop image	Wrong sizes or no responsive source	Add accurate sizes and a responsive loader
Hero loads late	Lazy loading or no priority	Mark the hero priority, preload it if needed
Large PNGs	Uncompressed source	Convert to AVIF/WebP and set a quality budget
Images shift the layout	No dimensions	Set width/height or an aspect-ratio container

How to measure it properly

1. Find the LCP image. Use PageSpeed Insights and the Performance panel.
2. Check the delivered size. Compare the actual bytes with the rendered dimensions.
3. Check the format. Confirm the CDN is serving AVIF or WebP where supported.
4. Test a mobile viewport. Use a 390px-wide device and a throttled connection.
5. Measure again. Compare LCP and total image bytes after the change.

A practical example

<Image
src="/product.webp"
alt="Product dashboard"
width={1200}
height={800}
sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 600px"
priority
/>

Common mistakes

• Using layout="fill" without a positioned, sized parent.
• Setting priority on every image.
• Forgetting alt text or using the filename as alt text.
• Optimising the logo while a 4MB hero dominates LCP.

A 30-day improvement plan

1. Week 1. Collect field data and pick the worst route. Write down the baseline.
2. Week 2. Fix the largest bottleneck and deploy behind a normal release.
3. Week 3. Test on a mid-range phone and a throttled connection; fix regressions.
4. Week 4. Compare field data, document the change and add a monitor or budget.

Field data vs lab data

Source	What it tells you	How to use it
Field data	What real users experienced	The source of truth for the metric
Lab test	A reproducible diagnosis	Find the cause and test a fix
Synthetic monitoring	Availability and regressions over time	Alert on a budget breach
RUM segmentation	Device, country and route differences	Target the worst segment
Server timing	Database, cache and render time	Separate backend from frontend

Set a performance budget

Budget	Example starting point	Why
LCP	2.5s or less at p75	The main content must appear quickly
INP	200ms or less at p75	Interactions must feel responsive
CLS	0.1 or less at p75	Layout movement erodes trust
JavaScript	A route-level KB budget	Prevents bundle creep
Images	Responsive sizes and modern formats	The largest common payload
Third-party scripts	A named owner and a cap	Uncontrolled tags are a common regression

Third-party script policy

• Every script needs an owner, a purpose and a review date.
• Load analytics and marketing tags after consent and after the main content.
• Prefer server-side events where they reduce client JavaScript.
• Test the checkout and sign-up with the full tag set enabled.
• Remove tags that no longer answer a business question.

Sources and further reading

• Next.js image optimisation (nextjs.org)
• Image optimisation (web.dev)
• Optimise Largest Contentful Paint (web.dev)

Related reading

• Core Web Vitals guide
• Next.js performance checklist
• Performance optimisation service