---
title: "Raw <img> in a Next.js app (perf/img-element)"
description: "A plain <img> ships the original file at full size, with no responsive srcset, AVIF/WebP or lazy loading (Lighthouse: properly size images, modern formats, offscreen images)."
url: http://localhost:4173/rules/perf/img-element
updated: 2026-11-11
---

# Raw <img> in a Next.js app

> `perf/img-element` is a vetd rule. It flags: Raw <img> in a Next.js app. It runs on every `check`, together with the TypeScript check.

| Fact | Value |
| --- | --- |
| Rule id | `perf/img-element` |
| Severity | warning |
| Group | Performance: fonts, images, scripts and bundle |
| Tags | performance, nextjs-16, lighthouse |

## Why it matters

A plain <img> ships the original file at full size, with no responsive srcset, AVIF/WebP or lazy loading (Lighthouse: properly size images, modern formats, offscreen images).

## How to fix it

Use <Image> from next/image (configure images.remotePatterns for remote hosts).

## Credit

Based on work by:

- [Next.js team](https://nextjs.org): next/image serves resized, modern-format, lazy-loaded images, which a plain img does not.
- [Google Chrome](https://developer.chrome.com/docs/lighthouse/overview): Lighthouse audits image size, modern formats and offscreen loading.

## References

- [Image Optimization](https://nextjs.org/docs/app/getting-started/images), Next.js
- [Image Component](https://nextjs.org/docs/app/api-reference/components/image), Next.js
- [Properly size images](https://developer.chrome.com/docs/lighthouse/performance/uses-responsive-images), Chrome for Developers
- [Serve images in modern formats](https://developer.chrome.com/docs/lighthouse/performance/uses-webp-images), Chrome for Developers
- [Defer offscreen images](https://developer.chrome.com/docs/lighthouse/performance/offscreen-images), Chrome for Developers

## See it

Demos in the vetd Lab:

- [Reserve image space](http://localhost:4173/lab/nextjs/image-dimensions-and-placeholders)
- [Image dimensions and sizes](http://localhost:4173/lab/web-perf/image-dimensions-and-sizes)

## Related rules

- [`perf/image-size`](http://localhost:4173/rules/perf/image-size.md)
- [`perf/image-sizes`](http://localhost:4173/rules/perf/image-sizes.md)
- [`seo/crawlable-link`](http://localhost:4173/rules/seo/crawlable-link.md)

## Get this text from vetd

MCP: call `explain` with `{ "diagnosticId": "perf/img-element" }`. CLI: `npx vetd explain perf/img-element`.

---

[All 92 rules](http://localhost:4173/rules.md) · Previous: [`perf/font-duplicate`](http://localhost:4173/rules/perf/font-duplicate.md) · Next: [`perf/image-size`](http://localhost:4173/rules/perf/image-size.md)