Skip to content

Commit d4a92d9

Browse files
styflestyfle
authored
Update example for Image Component (#18762)
1 parent 89a3249 commit d4a92d9

File tree

9 files changed

+201
-9
lines changed

9 files changed

+201
-9
lines changed

‎docs/api-reference/next/image.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,8 +52,8 @@ export default Home
5252
- `sizes` - Defines what proportion of the screen you expect the image to take up. Recommended, as it helps serve the correct sized image to each device. [More info](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes).
5353
- `quality` - The quality of the optimized image, an integer between 1 and 100 where 100 is the best quality. Default 75.
5454
- `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)
55-
- `priority` - When true, the image will be considered high priority and [preload](https://web.dev/preload-responsive-images/).
56-
- `unoptimized` - When true, the source image will be served as-is instead of resizing and changing quality.
55+
- `priority` - When true, the image will be considered high priority and [preload](https://web.dev/preload-responsive-images/). Should only be used when the image is visible above the fold.
56+
- `unoptimized` - When true, the source image will be served as-is instead of changing quality, size, or format.
5757
- `unsized` - **Deprecated** When true, the `width` and `height` requirement can by bypassed. Use the `layout` property instead!
5858

5959
All other properties on the `<Image>` component will be passed to the underlying `<img>` element.

‎docs/basic-features/image-optimization.md

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,8 @@ Instead of optimizing images at build time, Next.js optimizes images on-demand,
2323

2424
Images are lazy loaded by default. That means your page speed isn't penalized for images outside the viewport. Images load as they are scrolled into viewport.
2525

26+
Images are always rendered in such a way as to avoid prevent [Cumulative Layout Shift](https://web.dev/cls/), a [Core Web Vital](https://web.dev/vitals/) that Google is going to [use in search ranking](https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html).
27+
2628
## Image Component
2729

2830
To add an image to your application, import the [`next/image`](/docs/api-reference/next/image.md) component:
@@ -48,14 +50,11 @@ function Home() {
4850
export default Home
4951
```
5052

51-
- `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)
52-
- `width` and `height` are automatically responsive, unlike the HTML `<img>` element
53-
- `quality` can be configured per image, default 75
54-
- See [`next/image`](/docs/api-reference/next/image.md) for list of available props.
53+
[View all properties](/docs/api-reference/next/image.md) available to the `next/image` component.
5554

5655
## Configuration
5756

58-
You can optionally configure Image Optimization by using the `images` property in `next.config.js`.
57+
In addition to [using properties](/docs/api-reference/next/image.md) available to the `next/image` component, you can optionally configure Image Optimization for more advanced use cases via `next.config.js`.
5958

6059
If no configuration is provided, the following default configuration will be used.
6160

@@ -127,11 +126,11 @@ module.exports = {
127126

128127
The following Image Optimization cloud providers are supported:
129128

130-
- When using `next start` or a custom server image optimization works automatically.
131-
- [Vercel](https://vercel.com): Works automatically when you deploy on Vercel, no configuration necessary.
129+
- [Vercel](https://vercel.com): Works automatically when you deploy on Vercel, no configuration necessary. [Learn more](https://vercel.com/docs/next.js/image-optimization)
132130
- [Imgix](https://www.imgix.com): `loader: 'imgix'`
133131
- [Cloudinary](https://cloudinary.com): `loader: 'cloudinary'`
134132
- [Akamai](https://www.akamai.com): `loader: 'akamai'`
133+
- Other: Works automatically with `next dev`, `next start`, or a custom server
135134

136135
## Caching
137136

‎examples/image-component/pages/background.js

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import Image from 'next/image'
2+
3+
const Background = () => (
4+
<div>
5+
<div className="container">
6+
<Image
7+
alt="Mountains"
8+
src="/mountains.jpg"
9+
layout="fill"
10+
quality={100}
11+
className="cover"
12+
/>
13+
</div>
14+
<h1>
15+
Image Component
16+
<br />
17+
as a Background
18+
</h1>
19+
<style jsx global>{`
20+
body {
21+
margin: 0;
22+
padding: 0;
23+
background: black;
24+
color: white;
25+
}
26+
.container {
27+
position: fixed;
28+
height: 100vh;
29+
width: 100vw;
30+
overflow: hidden;
31+
z-index: -1;
32+
}
33+
.cover {
34+
object-fit: cover;
35+
}
36+
h1 {
37+
margin: 0;
38+
font-size: 2rem;
39+
line-height: 3rem;
40+
text-align: center;
41+
padding-top: 40vh;
42+
}
43+
`}</style>
44+
</div>
45+
)
46+
47+
export default Background

‎examples/image-component/pages/index.js

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import styles from '../styles.module.css'
22
import Image from 'next/image'
3+
import Link from 'next/link'
34

45
const Code = (p) => <code className={styles.inlineCode} {...p} />
56

@@ -45,6 +46,28 @@ const Index = () => (
4546
height={400}
4647
/>
4748
<hr className={styles.hr} />
49+
<h2>Layouts</h2>
50+
<p>
51+
The following demonstrate the <Code>layout</Code> property options
52+
</p>
53+
<ul>
54+
<li>
55+
<Link href="/layout-intrinsic">intrinsic</Link>
56+
</li>
57+
<li>
58+
<Link href="/layout-responsive">responsive</Link>
59+
</li>
60+
<li>
61+
<Link href="/layout-fixed">fixed</Link>
62+
</li>
63+
<li>
64+
<Link href="/layout-fill">fill</Link>
65+
</li>
66+
<li>
67+
<Link href="/background">background</Link>
68+
</li>
69+
</ul>
70+
<hr className={styles.hr} />
4871
Checkout the documentation for{' '}
4972
<a href="https://nextjs.org/docs/basic-features/image-optimization">
5073
Image Optimization

‎examples/image-component/pages/layout-fill.js

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import Image from 'next/image'
2+
3+
const Fill = () => (
4+
<div>
5+
<h1>Image Component With Layout Fill</h1>
6+
<div style={{ position: 'relative', width: '300px', height: '500px' }}>
7+
<Image
8+
alt="Mountains"
9+
src="/mountains.jpg"
10+
layout="fill"
11+
className="cover"
12+
/>
13+
</div>
14+
<div style={{ position: 'relative', width: '300px', height: '500px' }}>
15+
<Image
16+
alt="Mountains"
17+
src="/mountains.jpg"
18+
layout="fill"
19+
className="contain"
20+
/>
21+
</div>
22+
<div style={{ position: 'relative', width: '300px', height: '500px' }}>
23+
<Image
24+
alt="Mountains"
25+
src="/mountains.jpg"
26+
layout="fill"
27+
className="none"
28+
quality={100}
29+
/>
30+
</div>
31+
<style jsx global>{`
32+
body {
33+
margin: 0;
34+
padding: 0;
35+
background: black;
36+
color: white;
37+
}
38+
.contain {
39+
object-fit: contain;
40+
}
41+
.cover {
42+
object-fit: cover;
43+
}
44+
.none {
45+
object-fit: none;
46+
}
47+
`}</style>
48+
</div>
49+
)
50+
51+
export default Fill

‎examples/image-component/pages/layout-fixed.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import Image from 'next/image'
2+
3+
const Fixed = () => (
4+
<div>
5+
<h1>Image Component With Layout Fixed</h1>
6+
<Image
7+
alt="Mountains"
8+
src="/mountains.jpg"
9+
layout="fixed"
10+
width={700}
11+
height={475}
12+
/>
13+
<style jsx global>{`
14+
body {
15+
margin: 0;
16+
padding: 0;
17+
background: black;
18+
color: white;
19+
}
20+
`}</style>
21+
</div>
22+
)
23+
24+
export default Fixed

‎examples/image-component/pages/layout-intrinsic.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import Image from 'next/image'
2+
3+
const Intrinsic = () => (
4+
<div>
5+
<h1>Image Component With Layout Intrinsic</h1>
6+
<Image
7+
alt="Mountains"
8+
src="/mountains.jpg"
9+
layout="intrinsic"
10+
width={700}
11+
height={475}
12+
/>
13+
<style jsx global>{`
14+
body {
15+
margin: 0;
16+
padding: 0;
17+
background: black;
18+
color: white;
19+
}
20+
`}</style>
21+
</div>
22+
)
23+
24+
export default Intrinsic

‎examples/image-component/pages/layout-responsive.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import Image from 'next/image'
2+
3+
const Responsive = () => (
4+
<div>
5+
<h1>Image Component With Layout Responsive</h1>
6+
<Image
7+
alt="Mountains"
8+
src="/mountains.jpg"
9+
layout="responsive"
10+
width={700}
11+
height={475}
12+
/>
13+
<style jsx global>{`
14+
body {
15+
margin: 0;
16+
padding: 0;
17+
background: black;
18+
color: white;
19+
}
20+
`}</style>
21+
</div>
22+
)
23+
24+
export default Responsive

‎examples/image-component/public/mountains.jpg

287 KB
Loading

0 commit comments

Comments
 (0)