ContextQMD
Back to Biomejs

noImgElement

src/content/docs/linter/rules/no-img-element.mdx

latest6.7 KB
Original Source

import { Tabs, TabItem } from '@astrojs/starlight/components';

<Tabs> <TabItem label="JSX and TSX" icon="seti:javascript"> ## Summary - Rule available since: `v1.9.4` - Diagnostic Category: [`lint/performance/noImgElement`](/reference/diagnostics#diagnostic-category) - This rule is **recommended**, meaning it is enabled by default. - This rule doesn't have a fix. - The default severity of this rule is [**warning**](/reference/diagnostics#warning). - This rule belongs to the following domains: - [`next`](/linter/domains#next) - Sources: - Same as [`@next/next/no-img-element`](https://nextjs.org/docs/messages/no-img-element)

How to configure

json
{
	"linter": {
		"rules": {
			"performance": {
				"noImgElement": "error"
			}
		}
	}
}

Description

Prevent usage of `` element in a Next.js project.

Using the `` 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

Invalid

jsx
<pre class="language-text"><code class="language-text">code-block.jsx:1:1 <a href="https://biomejs.dev/linter/rules/no-img-element">lint/performance/noImgElement</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <strong><span style="color: Orange;">⚠</span></strong> <span style="color: Orange;">Don't use </span><span style="color: Orange;"><strong>&lt;img&gt;</strong></span><span style="color: Orange;"> element.</span> <strong><span style="color: Tomato;">&gt;</span></strong> <strong>1 │ </strong>&lt;img alt=&quot;Foo&quot; /&gt; <strong> │ </strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong> <strong>2 │ </strong> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Using the </span><span style="color: lightgreen;"><strong>&lt;img&gt;</strong></span><span style="color: lightgreen;"> can lead to slower LCP and higher bandwidth. Consider using </span><span style="color: lightgreen;"><strong>&lt;Image /&gt;</strong></span><span style="color: lightgreen;"> from </span><span style="color: lightgreen;"><strong>next/image</strong></span><span style="color: lightgreen;"> to automatically optimize images.</span> </code></pre>
jsx
<div>
  
</div>
<pre class="language-text"><code class="language-text">code-block.jsx:2:3 <a href="https://biomejs.dev/linter/rules/no-img-element">lint/performance/noImgElement</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <strong><span style="color: Orange;">⚠</span></strong> <span style="color: Orange;">Don't use </span><span style="color: Orange;"><strong>&lt;img&gt;</strong></span><span style="color: Orange;"> element.</span> <strong>1 │ </strong>&lt;div&gt; <strong><span style="color: Tomato;">&gt;</span></strong> <strong>2 │ </strong> &lt;img alt=&quot;Foo&quot; /&gt; <strong> │ </strong> <strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong> <strong>3 │ </strong>&lt;/div&gt; <strong>4 │ </strong> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Using the </span><span style="color: lightgreen;"><strong>&lt;img&gt;</strong></span><span style="color: lightgreen;"> can lead to slower LCP and higher bandwidth. Consider using </span><span style="color: lightgreen;"><strong>&lt;Image /&gt;</strong></span><span style="color: lightgreen;"> from </span><span style="color: lightgreen;"><strong>next/image</strong></span><span style="color: lightgreen;"> to automatically optimize images.</span> </code></pre>

Valid

jsx
jsx
<Image src="https://example.com/hero.jpg" />
jsx
<picture>
  <source srcSet="https://example.com/hero.avif" type="image/avif" />
  <source srcSet="https://example.com/hero.webp" type="image/webp" />
  
</picture>
</TabItem> </Tabs>