noImgElement
Summary
Section titled “Summary”- Rule available since:
v1.9.4
- Diagnostic Category:
lint/performance/noImgElement
- This rule doesn’t have a fix.
- The default severity of this rule is warning.
- This rule belongs to the following domains:
- Sources:
- Same as
@next/no-img-element
- Same as
Description
Section titled “Description”Prevent usage of <img>
element in a Next.js project.
Using the <img>
element can result in slower Largest Contentful Paint (LCP)
and higher bandwidth usage, as it lacks the optimizations provided by the <Image />
component from next/image
. Next.js’s <Image />
automatically optimizes images
by serving responsive sizes and using modern formats, improving performance and reducing bandwidth.
If your project is self-hosted, ensure that you have sufficient storage and have
installed the sharp
package to support optimized images. When deploying to managed
hosting providers, be aware of potential additional costs or usage.
Examples
Section titled “Examples”Invalid
Section titled “Invalid”<img alt="Foo" />
code-block.jsx:1:1 lint/performance/noImgElement ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⚠ Don’t use <img> element.
> 1 │ <img alt=“Foo” />
│ ^^^^^^^^^^^^^^^^^
2 │
ℹ Using the <img> can lead to slower LCP and higher bandwidth. Consider using <Image /> from next/image to automatically optimize images.
<div> <img alt="Foo" /></div>
code-block.jsx:2:3 lint/performance/noImgElement ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⚠ Don’t use <img> element.
1 │ <div>
> 2 │ <img alt=“Foo” />
│ ^^^^^^^^^^^^^^^^^
3 │ </div>
4 │
ℹ Using the <img> can lead to slower LCP and higher bandwidth. Consider using <Image /> from next/image to automatically optimize images.
<img />
<Image src="https://example.com/hero.jpg" />
<picture> <source srcSet="https://example.com/hero.avif" type="image/avif" /> <source srcSet="https://example.com/hero.webp" type="image/webp" /> <img src="https://example.com/hero.jpg" /></picture>
How to configure
Section titled “How to configure”{ "linter": { "rules": { "performance": { "noImgElement": "error" } } }}