コンテンツにスキップ

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.

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

<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>