# Large image files in Vue

> How to fix large image files in Vue — 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 Vue

On Nuxt, `@nuxt/image` compresses and reformats at build/request time. Plain Vue: pre-compress and use `<picture>` as above.

```vue
<template>
  <NuxtImg src="/hero-original.png" format="avif,webp" width="800" height="450" alt="Hero" />
</template>
```

[Vue docs](https://image.nuxt.com/)

### 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