---
title: "@next/next/no-img-element"
description: "Disallow the `<img>` element in favor of `Image` from `next/image`"
# Generated by src/codegen/lint-rule-docs.ts. Do not edit below this line.
plugin: "nextjs"
aliases: ["nextjs/no-img-element"]
kind: "problem"
category: "correctness"
default: "off"
fixable: "no"
typeAware: false
deprecated: false
---

An `<img>` sends the same file to every device, so a phone downloads the picture made for a desktop screen, in whatever format you saved it in. `Image` from `next/image` resizes the picture for the screen, serves a modern format, only loads it when it gets near the viewport, and reserves its space so the layout doesn't jump.

An `<img>` that's a direct child of a `<picture>` is allowed.

{/* Generated by src/codegen/lint-rule-docs.ts. Do not edit this section. */}

## Configure

Off by default. To turn it on:

```toml bunfig.toml
[lint.rules]
"@next/next/no-img-element" = "error" # or "warn"
```

{/* End of the generated section. */}

## Examples

Reported:

{/* bad */}
```jsx
export default function Avatar({ user }) {
  return <img src="/avatars/default.png" alt={user.name} />;
}
```

Not reported:

{/* good */}
```jsx
import Image from "next/image";

export default function Avatar({ user }) {
  return <Image src="/avatars/default.png" alt={user.name} width={64} height={64} />;
}
```

{/* good */}
```jsx
export default function Hero() {
  return (
    <picture>
      <source srcSet="/hero.avif" type="image/avif" />
      <img src="/hero.jpg" alt="Our office" />
    </picture>
  );
}
```

## When not to use it

Image optimization runs on a server, and some hosts bill for it. If you export a static site or your images already come from an image CDN, a plain `<img>` can be the right choice.