mirror of
https://github.com/vercel/next.js.git
synced 2026-09-20 02:25:18 +08:00
Delba de Oliveira
3bf570d84d
Closes: - https://linear.app/vercel/issue/DOC-4626/images - https://linear.app/vercel/issue/DOC-4610/split-image-and-font-pages Redirects: https://github.com/vercel/next.js/pull/78769 **Housekeeping:** - Deletes BYA images page - Creates relevant getting started docs in `/pages` - Splits "Images and Fonts" into "Images" and "Fonts" pages to allow us to add more context to each page in the future **API reference**: - Improves image API reference to follow more of a consistent format and language - Adds examples **Follow-up:** https://github.com/vercel/next.js/pull/78857 - Create a Deep Dive Guide on how image optimization works --------- Co-authored-by: Rich Haines <hello@richardhaines.dev>
88 lines
2.7 KiB
Plaintext
88 lines
2.7 KiB
Plaintext
---
|
|
title: 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`](/docs/pages/api-reference/components/image) to improve performance with automatic [Image Optimization](/docs/pages/api-reference/components/image).
|
|
|
|
> **Note**: If deploying to a [managed hosting provider](/docs/pages/getting-started/deploying), remember to check provider pricing since optimized images might be charged differently than the original images.
|
|
>
|
|
> Common image optimization platform pricing:
|
|
>
|
|
> - [Vercel pricing](https://vercel.com/pricing)
|
|
> - [Cloudinary pricing](https://cloudinary.com/pricing)
|
|
> - [imgix pricing](https://imgix.com/pricing)
|
|
|
|
> **Note**: If self-hosting, remember to install [`sharp`](https://www.npmjs.com/package/sharp) and check if your server has enough storage to cache the optimized images.
|
|
|
|
```jsx filename="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
|
|
```
|
|
|
|
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](/docs/pages/api-reference/components/image#unoptimized):
|
|
|
|
```jsx filename="pages/index.js"
|
|
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:
|
|
|
|
```jsx filename="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>
|
|
)
|
|
}
|
|
```
|
|
|
|
4. You can use a [custom image loader](/docs/pages/api-reference/components/image#loader) to optimize images. Set [loaderFile](/docs/pages/api-reference/components/image#loaderfile) to the path of your custom loader.
|
|
|
|
```js filename="next.config.js"
|
|
module.exports = {
|
|
images: {
|
|
loader: 'custom',
|
|
loaderFile: './my/image/loader.js',
|
|
},
|
|
}
|
|
```
|
|
|
|
## Useful Links
|
|
|
|
- [Image Component and Image Optimization](/docs/pages/api-reference/components/image)
|
|
- [next/image API Reference](/docs/pages/api-reference/components/image)
|
|
- [Largest Contentful Paint (LCP)](/learn/seo/web-performance/lcp)
|
|
- [Next.js config loaderFile option](/docs/pages/api-reference/components/image#loaderfile)
|