So, now that we styled this header,
there's another element of this header that can be improved
and that would be this image here.
Because at the moment,
we're simply using the regular image element
for displaying this image.
And that's not bad or a problem, but in NextJS,
you actually got a better element
for outputting images than this default image element.
Because in NextJS,
you have a special built-in image component,
which exists to help you output images
in a more optimized way.
For example, by lazy loading images under the hood
so that they're only displayed
if they're really visible on the page.
It does that automatically for you
without any extra configuration.
It can also simplify the process
of setting up responsive images and so on.
And therefore, the recommendation is
to use this image component in your NextJS projects
if you are outputting any image.
Now, this image component has a lot of props
and configuration options,
and attached you find a link to the full article
on this component.
Though I will say that many of those props
and options are really for more advanced use cases.
In general, getting started with that image component
and using it in most use cases is pretty simple
and straightforward.
And all you have to do here in this main header component
is to replace the default IMG element here
with the image element
that can be imported from next/image.
Then you need to set the source to such an imported image,
but now to that overall object
and not just the src property value.
So I changed that src prop value therefore,
because this object that's generated by NextJS,
when you import an image like,
this contains useful information
that's used under the hood by this image component
to display it in an optimized way.
For example, it automatically detects the size
of this image, and therefore, in its simplest form,
this is all we have to do.
No other setup is required.
With that, if you reload, you will see the image as before,
but if you now inspect it,
you will see that this image element
that's being rendered here has a couple of extra attributes
which we didn't add.
For example, this loading lazy attribute,
which makes sure that the image is lazy loaded,
and therefore, only loaded if it's really visible.
In addition, it automatically inferred the width and height,
though we could overwrite that if you wanted to.
And it's generated this source set attribute here,
hence ensuring that differently sized images are loaded
depending on the viewport
and the device we are using to visit this website.
In addition, it will also automatically serve that image
in the best file format for the browser
that's being used by a user,
so for example, as a WebP image,
if you're visiting this page with Chrome.
As you can see if you visit the Network tab
and reload,
there you'll see that this image that's being served here
was returned as a WebP image,
which is a special file format
that is more efficient than a PNG.
And you get all of that out of the box
when using this image component.
Now, one thing we should do here,
about which we also learn here in the console,
the JavaScript console, is add the priority property
to this image since it will always be visible
when this page loads.
So lazy loading doesn't make a lot of sense here,
and we want to tell NextJS and the browser
that this image should always be loaded
as quickly as possible to make sure
that we got no unnecessary content shift
or flickering when the page loads.
Therefore, on this image component,
I'll now also add the priority property, like this,
to make sure that this is loaded with priority.
With that added, if we save that and reload,
the page still looks as before, but this warning went away.
And that is how we can use this image component.
Now as mentioned, you can definitely dive in deeper
to explore all the different use cases of this component
and all the different configuration options.
For example, also, if you're loading images
from a third party website
or anything like this, here for this website,
this is all we have to do.