Skip to content
DocsErrorsNo img element

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:

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

pages/index.js
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
  1. If you would like to use next/image features such as blur-up placeholders but disable Image Optimization, you can do so using unoptimized:
pages/index.js
import Image from 'next/image'   const UnoptimizedImage = (props) => {  return <Image {...props} unoptimized /> }
  1. You can also use the <picture> element with the nested <img> element:
pages/index.js
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>  ) }
  1. You can use a custom image loader to optimize images. Set loaderFile to the path of your custom loader.
next.config.js
module.exports = {  images: {  loader: 'custom',  loaderFile: './my/image/loader.js',  }, }