No img element

Prevent usage of <img> element due to slower LCP and higher bandwidth.

Why This Error Occurred

An <img> element was used to display an image instead of <Image /> from next/image.

Possible Ways to Fix It

1. Use next/image to improve performance with automatic Image Optimization.

Note: If deploying to a managed hosting provider, remember to check provider pricing since optimized images might be charged differently than the original images.

Common image optimization platform pricing:

• Vercel pricing
• Cloudinary pricing
• imgix pricing

Note: If self-hosting, remember to install sharp and check if your server has enough storage to cache the optimized images.

import Image from 'next/image'
 
function Home() {
  return (
    <Image
      src="https://example.com/hero.jpg"
      alt="Landscape picture"
      width={800}
      height={500}
    />
  )
}
 
export default Home

2. If you would like to use next/image features such as blur-up placeholders but disable Image Optimization, you can do so using unoptimized:

import Image from 'next/image'
 
const UnoptimizedImage = (props) => {
  return <Image {...props} unoptimized />
}

3. You can also use the <picture> element with the nested <img> element:

function Home() {
  return (
    <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"
        alt="Landscape picture"
        width={800}
        height={500}
      />
    </picture>
  )
}

4. You can use a custom image loader to optimize images. Set loaderFile to the path of your custom loader.

module.exports = {
  images: {
    loader: 'custom',
    loaderFile: './my/image/loader.js',
  },
}

Useful Links

• Image Component and Image Optimization
• next/image API Reference
• Largest Contentful Paint (LCP)
• Next.js config loaderFile option