# Large image files in Next.js

> How to fix large image files in Next.js — with the exact fix and copy-paste code.

_Category: Performance · Detector `large-images` · Severity: error_

A single unoptimized hero image can be heavier than all your JavaScript combined, and it usually sits right in the critical path as the LCP element — so a fat image directly slows the metric Google measures your loading speed on. On mobile data it’s money out of the user’s pocket. AI-built pages routinely embed full-resolution PNGs and un-compressed exports.

## The fix for Next.js

`next/image` compresses and converts to AVIF/WebP automatically and serves per-device sizes — pointing it at a large source and letting it optimize is usually the whole fix.

```tsx
import Image from 'next/image'
// Next generates optimized AVIF/WebP variants at request time.
<Image src="/hero-original.png" width={800} height={450} alt="Hero" />
```

[Next.js docs](https://nextjs.org/docs/app/api-reference/components/image)

### Steps

1. Resize the source to at most 2× the size it’s displayed at
2. Re-encode to AVIF/WebP with a quality around 75–80
3. Serve via `<picture>` with fallbacks, or through an image CDN

## How VibeCheck detects it

The `large-images` detector flags this live in the browser and reports it to the widget's Problems list — and to your coding agent over MCP.

- **Issue string:** `Large image: 512KB`
- **Threshold:** ≥ 500KB transferred (warning), ≥ 1,024KB (error) — measured via Resource Timing

## FAQ

### What image size is acceptable?

Aim to keep individual images well under 200KB where you can. VibeCheck warns at 500KB and errors at 1MB — past that you’re almost certainly serving an un-resized or un-compressed original.

### AVIF or WebP?

AVIF compresses better but encodes slower and has slightly less universal support; WebP is faster and near-universal. Offer AVIF first with a WebP (then JPEG) fallback via `<picture>`, and you get the best of both.

### Does this affect SEO?

Yes, indirectly — a heavy hero image usually is your LCP element, and LCP is a Core Web Vital Google uses in ranking. Lighter images mean a faster LCP and a better page-experience signal.

See the general, framework-agnostic fix: https://vibecheck.wcgw.fun/fix/large-image-files.md

---

Fix guide from VibeCheck — https://vibecheck.wcgw.fun/fix/large-image-files. Full site index for LLMs: https://vibecheck.wcgw.fun/llms.txt