It is recommended not to use an <img> tag; instead, use the built-in Image component. Image component is an extension of img element, and it offers the following advantages:

Handles automatic lazy loading
Preloading of critical images
Correct sizing across devices and optimized the image for various viewpoints
Automatic image optimization
- Automatically serves the image in modern formats like WebP (30% smaller than JPEG)
- It also allows NextJS to automatically adopt future image formats and serve them to browsers supporting those formats.
- Image optimization works with any image source.
- NextJS optimizes the images on demand when requested by the users instead of optimizing them during the build time.
Improved and optimized page performance
Reduces the size of the image

Bad Practice

function Home() {
  return (
    <>
      <img
        src="https://example.com/test"
        alt="Landscape picture"
        width={500}
        height={500}
      />
    </>
  )
}

export default Home

Recommended

import Image from 'next/image'

function Home() {
  return (
    <>
      <Image
        src="https://example.com/test"
        alt="Landscape picture"
        width={500}
        height={500}
      />
    </>
  )
}

export default Home

References

Nextjs Image component and optimization

homarr-labs / homarr

No ignore rules found