Skip to content
Biome
Docs Blog Playground

noImgElement

Diagnostic Category: lint/nursery/noImgElement

Since: v1.9.4

Sources:

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/nursery/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/nursery/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.

Valid

Section titled Valid
<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>
Section titled Related links