1
00:00:02,000 --> 00:00:04,000
So by now we optimized

2
00:00:04,000 --> 00:00:06,000
our meta tags in the head section.

3
00:00:06,000 --> 00:00:09,000
But there's another important aspect of

4
00:00:09,000 --> 00:00:11,000
basically any website you're building that

5
00:00:11,000 --> 00:00:13,000
always should be optimized,

6
00:00:13,000 --> 00:00:15,000
our images.

7
00:00:15,000 --> 00:00:18,000
We are rendering a couple of images here,

8
00:00:18,000 --> 00:00:20,000
when we rendered that list of events.

9
00:00:20,000 --> 00:00:23,000
And also when we explore a single event,

10
00:00:23,000 --> 00:00:25,000
here we also have an image.

11
00:00:25,000 --> 00:00:30,000
And in both cases, those images are not optimized at all.

12
00:00:30,000 --> 00:00:32,000
Let me show you what that means.

13
00:00:32,000 --> 00:00:34,000
On the All Events page,

14
00:00:34,000 --> 00:00:35,000
if I open the developer tools

15
00:00:35,000 --> 00:00:38,000
and we go to the Network tab here.

16
00:00:38,000 --> 00:00:41,000
If we then empty the cache and hard reload,

17
00:00:41,000 --> 00:00:44,000
by right clicking on the refresh icon,

18
00:00:44,000 --> 00:00:47,000
we make sure that we reload all the data for this page,

19
00:00:47,000 --> 00:00:49,000
including the images.

20
00:00:49,000 --> 00:00:53,000
And now let's have a look at this coding-event.jpg file.

21
00:00:53,000 --> 00:00:55,000
If I make this a bit bigger,

22
00:00:55,000 --> 00:00:58,000
we see that this image has two megabytes.

23
00:00:58,000 --> 00:01:00,000
The introvert and extrovert images are even worse,

24
00:01:00,000 --> 00:01:03,000
they have five and four megabytes.

25
00:01:03,000 --> 00:01:05,000
The reason for this is that

26
00:01:05,000 --> 00:01:08,000
these are huge unoptimized images,

27
00:01:08,000 --> 00:01:12,000
which are fetched in full size and quality.

28
00:01:12,000 --> 00:01:16,000
And we are also always using the same image type, jpeg,

29
00:01:16,000 --> 00:01:21,000
no matter if our browser maybe supports a better type.

30
00:01:21,000 --> 00:01:26,000
For example, Chrome would support the webp image type,

31
00:01:26,000 --> 00:01:29,000
which is an optimized image format.

32
00:01:29,000 --> 00:01:31,000
Now for development, that's no problem,

33
00:01:31,000 --> 00:01:34,000
but this would not be okay for production.

34
00:01:34,000 --> 00:01:37,000
These would be way too big images.

35
00:01:37,000 --> 00:01:39,000
And Next.js calls itself,

36
00:01:39,000 --> 00:01:42,000
the react framework for production.

37
00:01:42,000 --> 00:01:44,000
And shipping such big images is

38
00:01:44,000 --> 00:01:46,000
certainly not production ready.

39
00:01:46,000 --> 00:01:48,000
Therefore, for it makes a lot of sense that

40
00:01:48,000 --> 00:01:52,000
Next.js also helps us with images.

41
00:01:52,000 --> 00:01:54,000
It helps us optimize those images,

42
00:01:54,000 --> 00:01:57,000
and it does so in a super simple way.