1
00:00:01,000 --> 00:00:05,000
Optimizing images with Next.js is easy.

2
00:00:05,000 --> 00:00:08,000
Here I'm in the event item component,

3
00:00:08,000 --> 00:00:10,000
which is the component that renders the image

4
00:00:10,000 --> 00:00:13,000
in that list of event items.

5
00:00:13,000 --> 00:00:15,000
Now, currently we're using the standard image tag,

6
00:00:15,000 --> 00:00:17,000
the standard image element,

7
00:00:17,000 --> 00:00:19,000
but for optimizing images

8
00:00:19,000 --> 00:00:23,000
we can import a component offered by Next.js,

9
00:00:23,000 --> 00:00:27,000
the image component from next/image.

10
00:00:28,000 --> 00:00:31,000
Now, this is a special component which we can use

11
00:00:31,000 --> 00:00:34,000
to replace the standard image element.

12
00:00:34,000 --> 00:00:37,000
And when we use that special component,

13
00:00:37,000 --> 00:00:41,000
Next.js will create multiple versions of our image

14
00:00:41,000 --> 00:00:45,000
on the fly when requests are coming in,

15
00:00:45,000 --> 00:00:49,000
optimize for the operating systems and device sizes

16
00:00:49,000 --> 00:00:51,000
that are making the request.

17
00:00:51,000 --> 00:00:54,000
And then those generated images will be cached

18
00:00:54,000 --> 00:00:58,000
for future requests from similar devices.

19
00:00:58,000 --> 00:00:59,000
So to enable this,

20
00:00:59,000 --> 00:01:01,000
we need to use this image component here,

21
00:01:01,000 --> 00:01:04,000
instead of our own image component.

22
00:01:04,000 --> 00:01:07,000
And we can copy over source and alt,

23
00:01:07,000 --> 00:01:11,000
that also works on that next image component.

24
00:01:11,000 --> 00:01:15,000
But now we also need to add two more attributes,

25
00:01:15,000 --> 00:01:17,000
two more props here.

26
00:01:17,000 --> 00:01:20,000
And that's the width and the height attributes.

27
00:01:21,000 --> 00:01:25,000
We need to set those to basically inform Next.js

28
00:01:25,000 --> 00:01:28,000
about the width and height of this image.

29
00:01:28,000 --> 00:01:30,000
And with that, I don't mean

30
00:01:30,000 --> 00:01:32,000
the original width and height of the image,

31
00:01:32,000 --> 00:01:37,000
but the width and height which we need for the image here.

32
00:01:37,000 --> 00:01:38,000
For determining the width and height,

33
00:01:38,000 --> 00:01:41,000
we should keep in mind that our image

34
00:01:41,000 --> 00:01:43,000
is displayed in two possible ways.

35
00:01:43,000 --> 00:01:46,000
It either takes the full width of the container

36
00:01:46,000 --> 00:01:48,000
on smaller screens

37
00:01:48,000 --> 00:01:52,000
or just a fraction of the width on bigger screen sizes.

38
00:01:52,000 --> 00:01:54,000
Because then we have the image on the left side

39
00:01:54,000 --> 00:01:57,000
and the other content on the right side.

40
00:01:57,000 --> 00:01:58,000
Now in the CSS code,

41
00:01:58,000 --> 00:02:00,000
we can see this here basically.

42
00:02:00,000 --> 00:02:03,000
I'm using Flexbox on the parent container

43
00:02:03,000 --> 00:02:07,000
and on smaller screens status a column Flexbox,

44
00:02:07,000 --> 00:02:10,000
so items are rendered on top of each other.

45
00:02:12,000 --> 00:02:13,000
But on bigger screens,

46
00:02:13,000 --> 00:02:16,000
the items sit next to each other.

47
00:02:16,000 --> 00:02:21,000
And then the image has 40% of the width of the overall item.

48
00:02:21,000 --> 00:02:23,000
Now, the overall item width

49
00:02:23,000 --> 00:02:26,000
is determined by the event-list styles.

50
00:02:26,000 --> 00:02:28,000
And there we have a max width of 40 rem.

51
00:02:29,000 --> 00:02:33,000
So overall we have around 640 pixels,

52
00:02:33,000 --> 00:02:36,000
that is what 40 rem are in pixels.

53
00:02:36,000 --> 00:02:38,000
As a width for the overall item.

54
00:02:38,000 --> 00:02:42,000
And the image has around 40% of that.

55
00:02:42,000 --> 00:02:44,000
Hence here we could try setting width

56
00:02:44,000 --> 00:02:48,000
to around 340 pixels maybe,

57
00:02:48,000 --> 00:02:51,000
which are roughly 40% of 640.

58
00:02:52,000 --> 00:02:55,000
And set the height to,

59
00:02:55,000 --> 00:02:57,000
here we have 10 rem for the image

60
00:02:57,000 --> 00:03:00,000
so that our 160 pixels.

61
00:03:00,000 --> 00:03:02,000
So that's the value I will use here.

62
00:03:03,000 --> 00:03:05,000
So with that, I'm determining the width and height

63
00:03:05,000 --> 00:03:09,000
of the image, as it should be loaded on the screen.

64
00:03:09,000 --> 00:03:12,000
I'm not setting with an height of the original files.

65
00:03:12,000 --> 00:03:16,000
As you see these files here, have much bigger dimensions.

66
00:03:16,000 --> 00:03:17,000
I'm not using those.

67
00:03:18,000 --> 00:03:20,000
So with that, if we save this

68
00:03:20,000 --> 00:03:21,000
and we reload,

69
00:03:21,000 --> 00:03:24,000
we see our image showing up here.

70
00:03:24,000 --> 00:03:26,000
Now it's a little bit too wide.

71
00:03:26,000 --> 00:03:31,000
So I'll actually shrink this to 250 here

72
00:03:31,000 --> 00:03:32,000
and that looks better,

73
00:03:32,000 --> 00:03:35,000
and on a smaller screen, that also works.

74
00:03:35,000 --> 00:03:38,000
And the nice thing here now is

75
00:03:38,000 --> 00:03:41,000
that if we now open the developer tools again,

76
00:03:41,000 --> 00:03:44,000
and we again empty the cache and hard reload,

77
00:03:45,000 --> 00:03:48,000
we will see that these images are much smaller.

78
00:03:48,000 --> 00:03:49,000
We see that here,

79
00:03:49,000 --> 00:03:53,000
this image is now only 19 kilobytes

80
00:03:53,000 --> 00:03:55,000
instead of the megabytes we had before.

81
00:03:55,000 --> 00:03:58,000
So all these images are much smaller.

82
00:03:58,000 --> 00:04:01,000
They are all the fetched as a different type now.

83
00:04:01,000 --> 00:04:03,000
As webp here, since I'm using Chrome

84
00:04:03,000 --> 00:04:06,000
and Chrome supports this optimized image format.

85
00:04:06,000 --> 00:04:08,000
And they also have reduced quality

86
00:04:08,000 --> 00:04:11,000
to shrink the file size even more

87
00:04:11,000 --> 00:04:13,000
without impacting the image.

88
00:04:13,000 --> 00:04:15,000
The quality is only reduced such

89
00:04:15,000 --> 00:04:17,000
that we don't really see it.

90
00:04:17,000 --> 00:04:21,000
Now that's working because Next.js, as I explained

91
00:04:21,000 --> 00:04:24,000
generates optimized images on the fly.

92
00:04:24,000 --> 00:04:27,000
Now we can see those generated images

93
00:04:27,000 --> 00:04:29,000
in the .next folder.

94
00:04:29,000 --> 00:04:30,000
They're in the cache folder.

95
00:04:30,000 --> 00:04:32,000
We have an images folder.

96
00:04:32,000 --> 00:04:35,000
And in there we have a couple of triptych files,

97
00:04:35,000 --> 00:04:37,000
which in the end contained the images

98
00:04:37,000 --> 00:04:40,000
as they are generated by Next.js.

99
00:04:40,000 --> 00:04:42,000
And these are the optimized images,

100
00:04:42,000 --> 00:04:45,000
which are generated when they're needed.

101
00:04:45,000 --> 00:04:47,000
So they're not generated in advance,

102
00:04:47,000 --> 00:04:50,000
but when a request reaches the page.

103
00:04:50,000 --> 00:04:53,000
But then they are stored so did future requests

104
00:04:53,000 --> 00:04:55,000
from a similar devices

105
00:04:55,000 --> 00:04:58,000
immediately get that already generated image.

106
00:04:58,000 --> 00:05:00,000
And that's there for another very nice feature

107
00:05:00,000 --> 00:05:03,000
Next.js has built.

108
00:05:03,000 --> 00:05:05,000
Now besides the size optimizations,

109
00:05:05,000 --> 00:05:07,000
which are of course super important.

110
00:05:07,000 --> 00:05:10,000
Those images also have a never nice benefit

111
00:05:10,000 --> 00:05:14,000
or the image component offered by Next.js

112
00:05:14,000 --> 00:05:16,000
has another nice benefit.

113
00:05:16,000 --> 00:05:18,000
if we're on a smaller screen here.

114
00:05:18,000 --> 00:05:20,000
And I then reload.

115
00:05:20,000 --> 00:05:22,000
If I clear my network tab,

116
00:05:22,000 --> 00:05:26,000
watch what happens if I increase the screen size,

117
00:05:26,000 --> 00:05:29,000
as it increases you see a new request is made

118
00:05:29,000 --> 00:05:31,000
for that bottom most image.

119
00:05:31,000 --> 00:05:33,000
That request is being made,

120
00:05:33,000 --> 00:05:37,000
because by default images are lazy loaded.

121
00:05:37,000 --> 00:05:39,000
Which means if they're not visible,

122
00:05:39,000 --> 00:05:42,000
Next.js will not download them.

123
00:05:42,000 --> 00:05:43,000
And that's another difference

124
00:05:43,000 --> 00:05:45,000
to the built in image component.

125
00:05:45,000 --> 00:05:49,000
There all images were loaded eagerly,

126
00:05:49,000 --> 00:05:52,000
which means they were loaded all the time.

127
00:05:52,000 --> 00:05:54,000
Now they are only loaded when they're needed

128
00:05:54,000 --> 00:05:58,000
and that further decreases the amount of requests

129
00:05:58,000 --> 00:05:59,000
we're making in advance,

130
00:05:59,000 --> 00:06:02,000
and the bandwidth we're taking up with our page.

131
00:06:02,000 --> 00:06:04,000
So that's another nice feature.

132
00:06:04,000 --> 00:06:06,000
We don't load what we don't need.

133
00:06:07,000 --> 00:06:10,000
So next/image is a super important component.

134
00:06:10,000 --> 00:06:13,000
It allows us to ship production-ready images

135
00:06:13,000 --> 00:06:18,000
and therefore I also wanna use it on the event detail page.

136
00:06:18,000 --> 00:06:19,000
There in event logistics,

137
00:06:19,000 --> 00:06:21,000
I'm also displaying an image

138
00:06:21,000 --> 00:06:25,000
and I now also wanna use the next/image component there.

139
00:06:25,000 --> 00:06:29,000
So we import image from next/image here as well,

140
00:06:29,000 --> 00:06:32,000
and replace this image, the default image

141
00:06:32,000 --> 00:06:34,000
with the next/image.

142
00:06:34,000 --> 00:06:37,000
Again, copying source and Alt.

143
00:06:37,000 --> 00:06:41,000
And then we need to figure out the width and the height.

144
00:06:41,000 --> 00:06:44,000
So for this, let's briefly again have a look at

145
00:06:44,000 --> 00:06:46,000
the CSS code here.

146
00:06:46,000 --> 00:06:47,000
And we see for the image,

147
00:06:47,000 --> 00:06:51,000
I'm using a width and height of 10 rem each.

148
00:06:51,000 --> 00:06:53,000
So that would be 160 pixels,

149
00:06:53,000 --> 00:06:56,000
hence that's what I wanna load here.

150
00:06:56,000 --> 00:06:57,000
160,

151
00:06:58,000 --> 00:07:00,000
160.

152
00:07:01,000 --> 00:07:03,000
And with that set, if we now go back to the page

153
00:07:03,000 --> 00:07:06,000
and we visit an individual image,

154
00:07:06,000 --> 00:07:08,000
we see that's all that is being loaded.

155
00:07:08,000 --> 00:07:11,000
Now it's looking a bit blurry.

156
00:07:11,000 --> 00:07:13,000
So maybe here, we should actually use a bigger

157
00:07:13,000 --> 00:07:18,000
width and height, maybe 240 instead of 160.

158
00:07:19,000 --> 00:07:22,000
And if we do that, it looks sharper.

159
00:07:22,000 --> 00:07:24,000
Maybe we ramped that up even more.

160
00:07:24,000 --> 00:07:26,000
So finding the right width and height here,

161
00:07:26,000 --> 00:07:29,000
all that will be a bit of trial and error.

162
00:07:29,000 --> 00:07:32,000
You still override width and height,

163
00:07:32,000 --> 00:07:35,000
as you set it here with your CSS styles.

164
00:07:35,000 --> 00:07:39,000
So if you give the image a hard-coded width and height,

165
00:07:39,000 --> 00:07:43,000
those CSS styles still kick in.

166
00:07:43,000 --> 00:07:46,000
The width and height, you set here only determine

167
00:07:46,000 --> 00:07:49,000
the image size that will be fetched in the end.

168
00:07:49,000 --> 00:07:53,000
The final styling is still being done with CSS.

169
00:07:54,000 --> 00:07:57,000
And here it's simply looking a bit blurry,

170
00:07:57,000 --> 00:07:59,000
because I was zoomed in.

171
00:07:59,000 --> 00:08:03,000
If I wasn't zoomed in, 160 pixels would have worked out.

172
00:08:03,000 --> 00:08:06,000
But I also want it to look good when I do zoom in,

173
00:08:06,000 --> 00:08:10,000
so I will pick slightly bigger values here, maybe 400.

174
00:08:10,000 --> 00:08:14,000
Again, only because I'm being zoomed in here.

175
00:08:14,000 --> 00:08:16,000
Yeah, I think that looks all right.

176
00:08:16,000 --> 00:08:18,000
So now with that, we're using the image component

177
00:08:18,000 --> 00:08:21,000
on this page as well and in general.

178
00:08:21,000 --> 00:08:23,000
In your Next applications,

179
00:08:23,000 --> 00:08:25,000
you wanna use the next/image component

180
00:08:25,000 --> 00:08:27,000
instead of the standard image component.

181
00:08:27,000 --> 00:08:30,000
Since that next/image component gives you

182
00:08:30,000 --> 00:08:32,000
a lot of optimizations out of the box,

183
00:08:32,000 --> 00:08:35,000
and it is super easy to use.