1
00:00:00,000 --> 00:00:03,000
So, now that we styled this header,

2
00:00:03,000 --> 00:00:07,000
there's another element of this header that can be improved

3
00:00:07,000 --> 00:00:09,000
and that would be this image here.

4
00:00:11,000 --> 00:00:12,000
Because at the moment,

5
00:00:12,000 --> 00:00:15,000
we're simply using the regular image element

6
00:00:15,000 --> 00:00:17,000
for displaying this image.

7
00:00:17,000 --> 00:00:22,000
And that's not bad or a problem, but in NextJS,

8
00:00:22,000 --> 00:00:25,000
you actually got a better element

9
00:00:25,000 --> 00:00:29,000
for outputting images than this default image element.

10
00:00:29,000 --> 00:00:30,000
Because in NextJS,

11
00:00:30,000 --> 00:00:33,000
you have a special built-in image component,

12
00:00:33,000 --> 00:00:36,000
which exists to help you output images

13
00:00:36,000 --> 00:00:39,000
in a more optimized way.

14
00:00:39,000 --> 00:00:43,000
For example, by lazy loading images under the hood

15
00:00:43,000 --> 00:00:44,000
so that they're only displayed

16
00:00:44,000 --> 00:00:46,000
if they're really visible on the page.

17
00:00:46,000 --> 00:00:48,000
It does that automatically for you

18
00:00:48,000 --> 00:00:51,000
without any extra configuration.

19
00:00:51,000 --> 00:00:53,000
It can also simplify the process

20
00:00:53,000 --> 00:00:57,000
of setting up responsive images and so on.

21
00:00:57,000 --> 00:00:59,000
And therefore, the recommendation is

22
00:00:59,000 --> 00:01:02,000
to use this image component in your NextJS projects

23
00:01:02,000 --> 00:01:04,000
if you are outputting any image.

24
00:01:06,000 --> 00:01:08,000
Now, this image component has a lot of props

25
00:01:08,000 --> 00:01:11,000
and configuration options,

26
00:01:11,000 --> 00:01:14,000
and attached you find a link to the full article

27
00:01:14,000 --> 00:01:15,000
on this component.

28
00:01:15,000 --> 00:01:17,000
Though I will say that many of those props

29
00:01:17,000 --> 00:01:21,000
and options are really for more advanced use cases.

30
00:01:23,000 --> 00:01:26,000
In general, getting started with that image component

31
00:01:26,000 --> 00:01:29,000
and using it in most use cases is pretty simple

32
00:01:29,000 --> 00:01:31,000
and straightforward.

33
00:01:31,000 --> 00:01:34,000
And all you have to do here in this main header component

34
00:01:34,000 --> 00:01:39,000
is to replace the default IMG element here

35
00:01:39,000 --> 00:01:42,000
with the image element

36
00:01:42,000 --> 00:01:45,000
that can be imported from next/image.

37
00:01:48,000 --> 00:01:52,000
Then you need to set the source to such an imported image,

38
00:01:52,000 --> 00:01:54,000
but now to that overall object

39
00:01:54,000 --> 00:01:58,000
and not just the src property value.

40
00:01:59,000 --> 00:02:02,000
So I changed that src prop value therefore,

41
00:02:04,000 --> 00:02:07,000
because this object that's generated by NextJS,

42
00:02:07,000 --> 00:02:08,000
when you import an image like,

43
00:02:08,000 --> 00:02:11,000
this contains useful information

44
00:02:11,000 --> 00:02:14,000
that's used under the hood by this image component

45
00:02:14,000 --> 00:02:16,000
to display it in an optimized way.

46
00:02:17,000 --> 00:02:20,000
For example, it automatically detects the size

47
00:02:20,000 --> 00:02:23,000
of this image, and therefore, in its simplest form,

48
00:02:23,000 --> 00:02:25,000
this is all we have to do.

49
00:02:25,000 --> 00:02:27,000
No other setup is required.

50
00:02:28,000 --> 00:02:32,000
With that, if you reload, you will see the image as before,

51
00:02:32,000 --> 00:02:33,000
but if you now inspect it,

52
00:02:33,000 --> 00:02:35,000
you will see that this image element

53
00:02:35,000 --> 00:02:39,000
that's being rendered here has a couple of extra attributes

54
00:02:39,000 --> 00:02:41,000
which we didn't add.

55
00:02:41,000 --> 00:02:45,000
For example, this loading lazy attribute,

56
00:02:45,000 --> 00:02:48,000
which makes sure that the image is lazy loaded,

57
00:02:48,000 --> 00:02:50,000
and therefore, only loaded if it's really visible.

58
00:02:52,000 --> 00:02:55,000
In addition, it automatically inferred the width and height,

59
00:02:55,000 --> 00:02:58,000
though we could overwrite that if you wanted to.

60
00:02:58,000 --> 00:03:01,000
And it's generated this source set attribute here,

61
00:03:01,000 --> 00:03:06,000
hence ensuring that differently sized images are loaded

62
00:03:06,000 --> 00:03:08,000
depending on the viewport

63
00:03:08,000 --> 00:03:11,000
and the device we are using to visit this website.

64
00:03:12,000 --> 00:03:15,000
In addition, it will also automatically serve that image

65
00:03:15,000 --> 00:03:17,000
in the best file format for the browser

66
00:03:17,000 --> 00:03:19,000
that's being used by a user,

67
00:03:19,000 --> 00:03:22,000
so for example, as a WebP image,

68
00:03:22,000 --> 00:03:25,000
if you're visiting this page with Chrome.

69
00:03:25,000 --> 00:03:27,000
As you can see if you visit the Network tab

70
00:03:27,000 --> 00:03:28,000
and reload,

71
00:03:28,000 --> 00:03:31,000
there you'll see that this image that's being served here

72
00:03:31,000 --> 00:03:34,000
was returned as a WebP image,

73
00:03:34,000 --> 00:03:35,000
which is a special file format

74
00:03:35,000 --> 00:03:38,000
that is more efficient than a PNG.

75
00:03:40,000 --> 00:03:41,000
And you get all of that out of the box

76
00:03:41,000 --> 00:03:43,000
when using this image component.

77
00:03:45,000 --> 00:03:47,000
Now, one thing we should do here,

78
00:03:47,000 --> 00:03:50,000
about which we also learn here in the console,

79
00:03:50,000 --> 00:03:54,000
the JavaScript console, is add the priority property

80
00:03:54,000 --> 00:03:57,000
to this image since it will always be visible

81
00:03:57,000 --> 00:03:58,000
when this page loads.

82
00:03:58,000 --> 00:04:01,000
So lazy loading doesn't make a lot of sense here,

83
00:04:01,000 --> 00:04:04,000
and we want to tell NextJS and the browser

84
00:04:04,000 --> 00:04:06,000
that this image should always be loaded

85
00:04:06,000 --> 00:04:08,000
as quickly as possible to make sure

86
00:04:08,000 --> 00:04:11,000
that we got no unnecessary content shift

87
00:04:11,000 --> 00:04:13,000
or flickering when the page loads.

88
00:04:14,000 --> 00:04:16,000
Therefore, on this image component,

89
00:04:16,000 --> 00:04:20,000
I'll now also add the priority property, like this,

90
00:04:20,000 --> 00:04:23,000
to make sure that this is loaded with priority.

91
00:04:25,000 --> 00:04:28,000
With that added, if we save that and reload,

92
00:04:28,000 --> 00:04:32,000
the page still looks as before, but this warning went away.

93
00:04:33,000 --> 00:04:36,000
And that is how we can use this image component.

94
00:04:37,000 --> 00:04:40,000
Now as mentioned, you can definitely dive in deeper

95
00:04:40,000 --> 00:04:44,000
to explore all the different use cases of this component

96
00:04:44,000 --> 00:04:46,000
and all the different configuration options.

97
00:04:46,000 --> 00:04:49,000
For example, also, if you're loading images

98
00:04:49,000 --> 00:04:50,000
from a third party website

99
00:04:50,000 --> 00:04:54,000
or anything like this, here for this website,

100
00:04:54,000 --> 00:04:55,000
this is all we have to do.