Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,289 --> 00:00:05,270
Optimizing images with Next.js is easy.
2
00:00:05,270 --> 00:00:08,020
Here I'm in the event item component,
3
00:00:08,020 --> 00:00:10,700
which is the component that renders the image
4
00:00:10,700 --> 00:00:13,110
in that list of event items.
5
00:00:13,110 --> 00:00:15,830
Now, currently we're using the standard image tag,
6
00:00:15,830 --> 00:00:17,670
the standard image element,
7
00:00:17,670 --> 00:00:19,500
but for optimizing images
8
00:00:19,500 --> 00:00:23,100
we can import a component offered by Next.js,
9
00:00:23,100 --> 00:00:27,093
the image component from next/image.
10
00:00:28,340 --> 00:00:31,560
Now, this is a special component which we can use
11
00:00:31,560 --> 00:00:34,670
to replace the standard image element.
12
00:00:34,670 --> 00:00:37,270
And when we use that special component,
13
00:00:37,270 --> 00:00:41,940
Next.js will create multiple versions of our image
14
00:00:41,940 --> 00:00:45,290
on the fly when requests are coming in,
15
00:00:45,290 --> 00:00:49,510
optimize for the operating systems and device sizes
16
00:00:49,510 --> 00:00:51,450
that are making the request.
17
00:00:51,450 --> 00:00:54,760
And then those generated images will be cached
18
00:00:54,760 --> 00:00:58,780
for future requests from similar devices.
19
00:00:58,780 --> 00:00:59,730
So to enable this,
20
00:00:59,730 --> 00:01:01,890
we need to use this image component here,
21
00:01:01,890 --> 00:01:04,340
instead of our own image component.
22
00:01:04,340 --> 00:01:07,260
And we can copy over source and alt,
23
00:01:07,260 --> 00:01:11,790
that also works on that next image component.
24
00:01:11,790 --> 00:01:15,540
But now we also need to add two more attributes,
25
00:01:15,540 --> 00:01:17,290
two more props here.
26
00:01:17,290 --> 00:01:20,443
And that's the width and the height attributes.
27
00:01:21,580 --> 00:01:25,750
We need to set those to basically inform Next.js
28
00:01:25,750 --> 00:01:28,480
about the width and height of this image.
29
00:01:28,480 --> 00:01:30,240
And with that, I don't mean
30
00:01:30,240 --> 00:01:32,930
the original width and height of the image,
31
00:01:32,930 --> 00:01:37,230
but the width and height which we need for the image here.
32
00:01:37,230 --> 00:01:38,900
For determining the width and height,
33
00:01:38,900 --> 00:01:41,120
we should keep in mind that our image
34
00:01:41,120 --> 00:01:43,890
is displayed in two possible ways.
35
00:01:43,890 --> 00:01:46,510
It either takes the full width of the container
36
00:01:46,510 --> 00:01:48,000
on smaller screens
37
00:01:48,000 --> 00:01:52,770
or just a fraction of the width on bigger screen sizes.
38
00:01:52,770 --> 00:01:54,850
Because then we have the image on the left side
39
00:01:54,850 --> 00:01:57,260
and the other content on the right side.
40
00:01:57,260 --> 00:01:58,720
Now in the CSS code,
41
00:01:58,720 --> 00:02:00,930
we can see this here basically.
42
00:02:00,930 --> 00:02:03,590
I'm using Flexbox on the parent container
43
00:02:03,590 --> 00:02:07,920
and on smaller screens status a column Flexbox,
44
00:02:07,920 --> 00:02:10,483
so items are rendered on top of each other.
45
00:02:12,290 --> 00:02:13,600
But on bigger screens,
46
00:02:13,600 --> 00:02:16,650
the items sit next to each other.
47
00:02:16,650 --> 00:02:21,650
And then the image has 40% of the width of the overall item.
48
00:02:21,960 --> 00:02:23,390
Now, the overall item width
49
00:02:23,390 --> 00:02:26,000
is determined by the event-list styles.
50
00:02:26,000 --> 00:02:28,693
And there we have a max width of 40 rem.
51
00:02:29,600 --> 00:02:33,600
So overall we have around 640 pixels,
52
00:02:33,600 --> 00:02:36,130
that is what 40 rem are in pixels.
53
00:02:36,130 --> 00:02:38,590
As a width for the overall item.
54
00:02:38,590 --> 00:02:42,290
And the image has around 40% of that.
55
00:02:42,290 --> 00:02:44,920
Hence here we could try setting width
56
00:02:44,920 --> 00:02:48,100
to around 340 pixels maybe,
57
00:02:48,100 --> 00:02:51,433
which are roughly 40% of 640.
58
00:02:52,700 --> 00:02:55,070
And set the height to,
59
00:02:55,070 --> 00:02:57,710
here we have 10 rem for the image
60
00:02:57,710 --> 00:03:00,380
so that our 160 pixels.
61
00:03:00,380 --> 00:03:02,383
So that's the value I will use here.
62
00:03:03,220 --> 00:03:05,630
So with that, I'm determining the width and height
63
00:03:05,630 --> 00:03:09,180
of the image, as it should be loaded on the screen.
64
00:03:09,180 --> 00:03:12,430
I'm not setting with an height of the original files.
65
00:03:12,430 --> 00:03:16,170
As you see these files here, have much bigger dimensions.
66
00:03:16,170 --> 00:03:17,503
I'm not using those.
67
00:03:18,440 --> 00:03:20,540
So with that, if we save this
68
00:03:20,540 --> 00:03:21,980
and we reload,
69
00:03:21,980 --> 00:03:24,840
we see our image showing up here.
70
00:03:24,840 --> 00:03:26,550
Now it's a little bit too wide.
71
00:03:26,550 --> 00:03:31,490
So I'll actually shrink this to 250 here
72
00:03:31,490 --> 00:03:32,970
and that looks better,
73
00:03:32,970 --> 00:03:35,730
and on a smaller screen, that also works.
74
00:03:35,730 --> 00:03:38,480
And the nice thing here now is
75
00:03:38,480 --> 00:03:41,530
that if we now open the developer tools again,
76
00:03:41,530 --> 00:03:44,233
and we again empty the cache and hard reload,
77
00:03:45,270 --> 00:03:48,310
we will see that these images are much smaller.
78
00:03:48,310 --> 00:03:49,360
We see that here,
79
00:03:49,360 --> 00:03:53,130
this image is now only 19 kilobytes
80
00:03:53,130 --> 00:03:55,520
instead of the megabytes we had before.
81
00:03:55,520 --> 00:03:58,510
So all these images are much smaller.
82
00:03:58,510 --> 00:04:01,070
They are all the fetched as a different type now.
83
00:04:01,070 --> 00:04:03,820
As webp here, since I'm using Chrome
84
00:04:03,820 --> 00:04:06,970
and Chrome supports this optimized image format.
85
00:04:06,970 --> 00:04:08,970
And they also have reduced quality
86
00:04:08,970 --> 00:04:11,140
to shrink the file size even more
87
00:04:11,140 --> 00:04:13,360
without impacting the image.
88
00:04:13,360 --> 00:04:15,085
The quality is only reduced such
89
00:04:15,085 --> 00:04:17,519
that we don't really see it.
90
00:04:17,519 --> 00:04:21,329
Now that's working because Next.js, as I explained
91
00:04:21,329 --> 00:04:24,670
generates optimized images on the fly.
92
00:04:24,670 --> 00:04:27,020
Now we can see those generated images
93
00:04:27,020 --> 00:04:29,160
in the .next folder.
94
00:04:29,160 --> 00:04:30,820
They're in the cache folder.
95
00:04:30,820 --> 00:04:32,530
We have an images folder.
96
00:04:32,530 --> 00:04:35,000
And in there we have a couple of triptych files,
97
00:04:35,000 --> 00:04:37,390
which in the end contained the images
98
00:04:37,390 --> 00:04:40,600
as they are generated by Next.js.
99
00:04:40,600 --> 00:04:42,710
And these are the optimized images,
100
00:04:42,710 --> 00:04:45,180
which are generated when they're needed.
101
00:04:45,180 --> 00:04:47,940
So they're not generated in advance,
102
00:04:47,940 --> 00:04:50,310
but when a request reaches the page.
103
00:04:50,310 --> 00:04:53,380
But then they are stored so did future requests
104
00:04:53,380 --> 00:04:55,050
from a similar devices
105
00:04:55,050 --> 00:04:58,360
immediately get that already generated image.
106
00:04:58,360 --> 00:05:00,631
And that's there for another very nice feature
107
00:05:00,631 --> 00:05:03,410
Next.js has built.
108
00:05:03,410 --> 00:05:05,590
Now besides the size optimizations,
109
00:05:05,590 --> 00:05:07,520
which are of course super important.
110
00:05:07,520 --> 00:05:10,850
Those images also have a never nice benefit
111
00:05:10,850 --> 00:05:14,180
or the image component offered by Next.js
112
00:05:14,180 --> 00:05:16,350
has another nice benefit.
113
00:05:16,350 --> 00:05:18,580
if we're on a smaller screen here.
114
00:05:18,580 --> 00:05:20,590
And I then reload.
115
00:05:20,590 --> 00:05:22,810
If I clear my network tab,
116
00:05:22,810 --> 00:05:26,910
watch what happens if I increase the screen size,
117
00:05:26,910 --> 00:05:29,760
as it increases you see a new request is made
118
00:05:29,760 --> 00:05:31,940
for that bottom most image.
119
00:05:31,940 --> 00:05:33,550
That request is being made,
120
00:05:33,550 --> 00:05:37,470
because by default images are lazy loaded.
121
00:05:37,470 --> 00:05:39,570
Which means if they're not visible,
122
00:05:39,570 --> 00:05:42,350
Next.js will not download them.
123
00:05:42,350 --> 00:05:43,643
And that's another difference
124
00:05:43,643 --> 00:05:45,950
to the built in image component.
125
00:05:45,950 --> 00:05:49,180
There all images were loaded eagerly,
126
00:05:49,180 --> 00:05:52,160
which means they were loaded all the time.
127
00:05:52,160 --> 00:05:54,710
Now they are only loaded when they're needed
128
00:05:54,710 --> 00:05:58,190
and that further decreases the amount of requests
129
00:05:58,190 --> 00:05:59,490
we're making in advance,
130
00:05:59,490 --> 00:06:02,580
and the bandwidth we're taking up with our page.
131
00:06:02,580 --> 00:06:04,380
So that's another nice feature.
132
00:06:04,380 --> 00:06:06,513
We don't load what we don't need.
133
00:06:07,480 --> 00:06:10,500
So next/image is a super important component.
134
00:06:10,500 --> 00:06:13,550
It allows us to ship production-ready images
135
00:06:13,550 --> 00:06:18,130
and therefore I also wanna use it on the event detail page.
136
00:06:18,130 --> 00:06:19,970
There in event logistics,
137
00:06:19,970 --> 00:06:21,830
I'm also displaying an image
138
00:06:21,830 --> 00:06:25,450
and I now also wanna use the next/image component there.
139
00:06:25,450 --> 00:06:29,700
So we import image from next/image here as well,
140
00:06:29,700 --> 00:06:32,690
and replace this image, the default image
141
00:06:32,690 --> 00:06:34,520
with the next/image.
142
00:06:34,520 --> 00:06:37,560
Again, copying source and Alt.
143
00:06:37,560 --> 00:06:41,130
And then we need to figure out the width and the height.
144
00:06:41,130 --> 00:06:44,248
So for this, let's briefly again have a look at
145
00:06:44,248 --> 00:06:46,080
the CSS code here.
146
00:06:46,080 --> 00:06:47,920
And we see for the image,
147
00:06:47,920 --> 00:06:51,110
I'm using a width and height of 10 rem each.
148
00:06:51,110 --> 00:06:53,990
So that would be 160 pixels,
149
00:06:53,990 --> 00:06:56,120
hence that's what I wanna load here.
150
00:06:56,120 --> 00:06:57,733
160,
151
00:06:58,670 --> 00:07:00,023
160.
152
00:07:01,000 --> 00:07:03,510
And with that set, if we now go back to the page
153
00:07:03,510 --> 00:07:06,060
and we visit an individual image,
154
00:07:06,060 --> 00:07:08,840
we see that's all that is being loaded.
155
00:07:08,840 --> 00:07:11,130
Now it's looking a bit blurry.
156
00:07:11,130 --> 00:07:13,940
So maybe here, we should actually use a bigger
157
00:07:13,940 --> 00:07:18,333
width and height, maybe 240 instead of 160.
158
00:07:19,890 --> 00:07:22,130
And if we do that, it looks sharper.
159
00:07:22,130 --> 00:07:24,700
Maybe we ramped that up even more.
160
00:07:24,700 --> 00:07:26,860
So finding the right width and height here,
161
00:07:26,860 --> 00:07:29,680
all that will be a bit of trial and error.
162
00:07:29,680 --> 00:07:32,050
You still override width and height,
163
00:07:32,050 --> 00:07:35,610
as you set it here with your CSS styles.
164
00:07:35,610 --> 00:07:39,440
So if you give the image a hard-coded width and height,
165
00:07:39,440 --> 00:07:43,000
those CSS styles still kick in.
166
00:07:43,000 --> 00:07:46,070
The width and height, you set here only determine
167
00:07:46,070 --> 00:07:49,920
the image size that will be fetched in the end.
168
00:07:49,920 --> 00:07:53,733
The final styling is still being done with CSS.
169
00:07:54,970 --> 00:07:57,010
And here it's simply looking a bit blurry,
170
00:07:57,010 --> 00:07:59,130
because I was zoomed in.
171
00:07:59,130 --> 00:08:03,790
If I wasn't zoomed in, 160 pixels would have worked out.
172
00:08:03,790 --> 00:08:06,430
But I also want it to look good when I do zoom in,
173
00:08:06,430 --> 00:08:10,910
so I will pick slightly bigger values here, maybe 400.
174
00:08:10,910 --> 00:08:14,070
Again, only because I'm being zoomed in here.
175
00:08:14,070 --> 00:08:16,320
Yeah, I think that looks all right.
176
00:08:16,320 --> 00:08:18,740
So now with that, we're using the image component
177
00:08:18,740 --> 00:08:21,600
on this page as well and in general.
178
00:08:21,600 --> 00:08:23,460
In your Next applications,
179
00:08:23,460 --> 00:08:25,620
you wanna use the next/image component
180
00:08:25,620 --> 00:08:27,800
instead of the standard image component.
181
00:08:27,800 --> 00:08:30,400
Since that next/image component gives you
182
00:08:30,400 --> 00:08:32,960
a lot of optimizations out of the box,
183
00:08:32,960 --> 00:08:35,383
and it is super easy to use.
14005
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.