FIx image optimization docs (#18254)
Add missing links in the documentation
This commit is contained in:
parent
b90e17e029
commit
ce38e4f6fe
3 changed files with 28 additions and 14 deletions
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
description: Enable image optimization with the built-in Image component.
|
||||
description: Enable Image Optimization with the built-in Image component.
|
||||
---
|
||||
|
||||
# next/image
|
||||
|
@ -29,7 +29,12 @@ function Home() {
|
|||
return (
|
||||
<>
|
||||
<h1>My Homepage</h1>
|
||||
<Image src="/me.png" alt="me" width={200} height={200} />
|
||||
<Image
|
||||
src="/me.png"
|
||||
alt="Picture of the author"
|
||||
width={500}
|
||||
height={500}
|
||||
/>
|
||||
<p>Welcome to my homepage!</p>
|
||||
</>
|
||||
)
|
||||
|
@ -48,6 +53,6 @@ export default Home
|
|||
- `loading` - The loading behavior. When `lazy`, defer loading the image until it reaches a calculated distance from the viewport. When `eager`, load the image immediately. Default `lazy`. [More info](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading)
|
||||
- `priority` - When true, the image will be considered high priority and [preload](https://web.dev/preload-responsive-images/).
|
||||
- `unoptimized` - When true, the source image will be served as-is instead of resizing and changing quality.
|
||||
- `unsized` - When true, the `width` and `height` requirement can by bypassed. Should _not_ be used with `priority` or above-the-fold images.
|
||||
- `unsized` - When true, the `width` and `height` requirement can by bypassed. Should _not_ be used with above-the-fold images. Should _not_ be used with `priority`.
|
||||
|
||||
Another other properties on the `<Image>` component be passed to the underlying `<img>` element.
|
||||
All other properties on the `<Image>` component will be passed to the underlying `<img>` element.
|
||||
|
|
|
@ -19,7 +19,7 @@ The Automatic Image Optimization allows for resizing, optimizing, and serving im
|
|||
|
||||
## Image Component
|
||||
|
||||
To add an image to your application, import the `next/image` component:
|
||||
To add an image to your application, import the [`next/image`](/docs/api-reference/next/image.md) component:
|
||||
|
||||
```jsx
|
||||
import Image from 'next/image'
|
||||
|
@ -31,8 +31,8 @@ function Home() {
|
|||
<Image
|
||||
src="/me.png"
|
||||
alt="Picture of the author"
|
||||
width={200}
|
||||
height={200}
|
||||
width={500}
|
||||
height={500}
|
||||
/>
|
||||
<p>Welcome to my homepage!</p>
|
||||
</>
|
||||
|
@ -44,6 +44,7 @@ export default Home
|
|||
|
||||
- `width` and `height` are required to prevent [Cumulative Layout Shift](https://web.dev/cls/), a [Core Web Vital](https://web.dev/vitals/) that Google is going to [use in their search ranking](https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html)
|
||||
- `width` and `height` are automatically responsive, unlike the HTML `<img>` element
|
||||
- See [`next/image`](/docs/api-reference/next/image.md) for list of available props.
|
||||
|
||||
## Configuration
|
||||
|
||||
|
@ -89,19 +90,19 @@ module.exports = {
|
|||
|
||||
The following Image Optimization cloud providers are supported:
|
||||
|
||||
- Imgix: `loader: 'imgix'`
|
||||
- Cloudinary: `loader: 'cloudinary'`
|
||||
- Akamai: `loader: 'akamai'`
|
||||
- Vercel: No configuration necessary
|
||||
- Imgix - `loader: 'imgix'`
|
||||
- Cloudinary - `loader: 'cloudinary'`
|
||||
- Akamai - `loader: 'akamai'`
|
||||
- Vercel - No configuration necessary
|
||||
|
||||
## Related
|
||||
|
||||
For more information on what to do next, we recommend the following sections:
|
||||
|
||||
<div class="card">
|
||||
<a href="/docs/basic-features/built-in-css-support.md">
|
||||
<b>CSS Support:</b>
|
||||
<small>Use the built-in CSS support to add custom styles to your app.</small>
|
||||
<a href="/docs/api-reference/next/image.md">
|
||||
<b>next/image</b>
|
||||
<small>See all available properties for the Image component</small>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
|
|
@ -21,6 +21,10 @@
|
|||
"title": "Built-in CSS Support",
|
||||
"path": "/docs/basic-features/built-in-css-support.md"
|
||||
},
|
||||
{
|
||||
"title": "Image Optimization",
|
||||
"path": "/docs/basic-features/image-optimization.md"
|
||||
},
|
||||
{
|
||||
"title": "Fast Refresh",
|
||||
"path": "/docs/basic-features/fast-refresh.md"
|
||||
|
@ -216,6 +220,10 @@
|
|||
"title": "next/link",
|
||||
"path": "/docs/api-reference/next/link.md"
|
||||
},
|
||||
{
|
||||
"title": "next/image",
|
||||
"path": "/docs/api-reference/next/image.md"
|
||||
},
|
||||
{
|
||||
"title": "next/head",
|
||||
"path": "/docs/api-reference/next/head.md"
|
||||
|
|
Loading…
Reference in a new issue