5e112c062e
Changes ESLint warning message to still encourage usage of `next/image` for the best experience, but also denoting that optimization could come with incurred costs. ## Feature - [x] Documentation added - [x] Errors have a helpful link attached, see [`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md) ## Documentation / Examples - [x] Make sure the linting passes by running `pnpm build && pnpm lint` - [x] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md) --------- Co-authored-by: Steven Tey <stevensteel97@gmail.com> Co-authored-by: Steven <steven@ceriously.com>
2.1 KiB
2.1 KiB
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
sharpand 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
If you would like to use next/image features such as blur-up placeholders but disable Image Optimization, you can do so using unoptimized.
Or, use a <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>
)
}