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
- 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
- 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 />
}
- 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>
)
}
Useful Links
Was this helpful?