1
00:00:00,000 --> 00:00:01,000
Now one other thing

2
00:00:01,000 --> 00:00:04,000
that's worth noting about using the image component

3
00:00:04,000 --> 00:00:08,000
on this image is that, as mentioned by default,

4
00:00:08,000 --> 00:00:11,000
NextJS sets this loading attribute

5
00:00:11,000 --> 00:00:14,000
on the native image element to lazy,

6
00:00:14,000 --> 00:00:16,000
and that's the attribute that's supported

7
00:00:16,000 --> 00:00:18,000
by all modern browsers that will make sure

8
00:00:18,000 --> 00:00:20,000
that the image only loaded

9
00:00:20,000 --> 00:00:22,000
and displayed if it's visible on the screen.

10
00:00:23,000 --> 00:00:25,000
Now the problem we have here

11
00:00:25,000 --> 00:00:27,000
is that this image here is in the header,

12
00:00:27,000 --> 00:00:31,000
and therefore it will always be visible on the screen

13
00:00:31,000 --> 00:00:33,000
when the page loads,

14
00:00:33,000 --> 00:00:37,000
so lazy loading this image here doesn't make any sense.

15
00:00:37,000 --> 00:00:41,000
Instead, it's just an unnecessary check for the browser

16
00:00:41,000 --> 00:00:44,000
to find out whether this image needs to be loaded or not,

17
00:00:44,000 --> 00:00:47,000
because we as a developer already know

18
00:00:47,000 --> 00:00:49,000
that it always needs to be loaded.

19
00:00:50,000 --> 00:00:53,000
So therefore, what you should do if you have an image

20
00:00:53,000 --> 00:00:55,000
where you know with certainty

21
00:00:55,000 --> 00:01:00,000
that it will be displayed on the screen when the page loads,

22
00:01:00,000 --> 00:01:03,000
is you should add another special prop

23
00:01:03,000 --> 00:01:06,000
to this image component, the priority prop.

24
00:01:08,000 --> 00:01:10,000
This tells NextJS,

25
00:01:10,000 --> 00:01:12,000
and therefore in the end, the browser,

26
00:01:12,000 --> 00:01:15,000
that this image will always be visible when the page loads

27
00:01:15,000 --> 00:01:18,000
and therefore when navigating to that page,

28
00:01:18,000 --> 00:01:21,000
NextJS would preload the image

29
00:01:21,000 --> 00:01:24,000
and lazy loading will also be disabled

30
00:01:24,000 --> 00:01:27,000
so that the browser doesn't need to check

31
00:01:27,000 --> 00:01:29,000
whether the image should be loaded or not,

32
00:01:29,000 --> 00:01:32,000
but that it will instead always load it.

33
00:01:34,000 --> 00:01:35,000
So after adding priority here

34
00:01:35,000 --> 00:01:38,000
and saving that file, if I reload,

35
00:01:38,000 --> 00:01:41,000
you see that now this lazy loading attribute

36
00:01:41,000 --> 00:01:42,000
has been removed,

37
00:01:42,000 --> 00:01:45,000
and instead this fetchpriority,

38
00:01:45,000 --> 00:01:48,000
which is set to high, attribute has been added.

39
00:01:49,000 --> 00:01:51,000
And therefore you want to consider

40
00:01:51,000 --> 00:01:54,000
adding this priority prop here

41
00:01:54,000 --> 00:01:57,000
to all images where you know with certainty

42
00:01:57,000 --> 00:02:01,000
that they will be visible after the page has been loaded.

43
00:02:01,000 --> 00:02:05,000
That's definitely something you should consider.

44
00:02:05,000 --> 00:02:06,000
And of course, as mentioned,

45
00:02:06,000 --> 00:02:08,000
there is more you can configure

46
00:02:08,000 --> 00:02:11,000
depending on the exact use case you have,

47
00:02:11,000 --> 00:02:15,000
and there are more optimizations you could perform

48
00:02:15,000 --> 00:02:15,000
on images like this,

49
00:02:15,000 --> 00:02:19,000
and therefore you absolutely want to check out

50
00:02:19,000 --> 00:02:22,000
the official image optimization guide

51
00:02:22,000 --> 00:02:25,000
to learn all about that if you need more specific settings.

52
00:02:26,000 --> 00:02:28,000
However, I now wanna move on

53
00:02:28,000 --> 00:02:31,000
to the other images we have on this site,

54
00:02:31,000 --> 00:02:34,000
which are regular images,

55
00:02:34,000 --> 00:02:39,000
but which are images that have not been added by us,

56
00:02:39,000 --> 00:02:41,000
the developer, during development,

57
00:02:41,000 --> 00:02:44,000
but that instead will be added at runtime

58
00:02:44,000 --> 00:02:47,000
by the users using our website.

59
00:02:47,000 --> 00:02:52,000
And therefore there are a couple of important differences

60
00:02:52,000 --> 00:02:54,000
compared to images that are added

61
00:02:54,000 --> 00:02:58,000
by us as a developer that should be considered

62
00:02:58,000 --> 00:03:00,000
when it comes to image optimizations.