Now one other thing
that's worth noting about using the image component
on this image is that, as mentioned by default,
NextJS sets this loading attribute
on the native image element to lazy,
and that's the attribute that's supported
by all modern browsers that will make sure
that the image only loaded
and displayed if it's visible on the screen.
Now the problem we have here
is that this image here is in the header,
and therefore it will always be visible on the screen
when the page loads,
so lazy loading this image here doesn't make any sense.
Instead, it's just an unnecessary check for the browser
to find out whether this image needs to be loaded or not,
because we as a developer already know
that it always needs to be loaded.
So therefore, what you should do if you have an image
where you know with certainty
that it will be displayed on the screen when the page loads,
is you should add another special prop
to this image component, the priority prop.
This tells NextJS,
and therefore in the end, the browser,
that this image will always be visible when the page loads
and therefore when navigating to that page,
NextJS would preload the image
and lazy loading will also be disabled
so that the browser doesn't need to check
whether the image should be loaded or not,
but that it will instead always load it.
So after adding priority here
and saving that file, if I reload,
you see that now this lazy loading attribute
has been removed,
and instead this fetchpriority,
which is set to high, attribute has been added.
And therefore you want to consider
adding this priority prop here
to all images where you know with certainty
that they will be visible after the page has been loaded.
That's definitely something you should consider.
And of course, as mentioned,
there is more you can configure
depending on the exact use case you have,
and there are more optimizations you could perform
on images like this,
and therefore you absolutely want to check out
the official image optimization guide
to learn all about that if you need more specific settings.
However, I now wanna move on
to the other images we have on this site,
which are regular images,
but which are images that have not been added by us,
the developer, during development,
but that instead will be added at runtime
by the users using our website.
And therefore there are a couple of important differences
compared to images that are added
by us as a developer that should be considered
when it comes to image optimizations.