So how can NextJS help us
with optimizing images?
Well, it helps us by giving us a specific image component,
which we can import from the NextJS package,
which allows us to display images in an optimized way.
Specifically, when using that image component
provided by NextJS.
NextJS will automatically optimize the size
of the loaded image file
to serve smaller files in optimal formats.
It can also help us with visual stability, as you see here,
so that it prevents shifting layouts
or layouts that jump around as the page is loaded,
and therefore overall, it can speed up the page load time,
also because it, for example,
makes sure that images are only loaded and displayed
when they're actually visible, so that overall,
the performance and the speed of your site improves.
That's the idea behind using this image component.
And as you can see, there's a lot you can learn
about this image component,
a lot you can configure about this image component,
but we'll, of course, dive into the most important settings
and the crucial essentials you'll need to know
in this section here.
So how can we optimize images?
For that, I wanna start with this image in the header here,
and what's special about this image here
is that it's not user-generated,
but instead, it's part of my project,
it's part of my codebase, so to say,
and it'll always be on the page,
and I'm importing it locally from my local file system,
whereas those user-generated files are stored on Cloudinary.
So therefore, I, of course, know things
about this image here, about this logo,
which I don't know in advance
about the user-generated images.
I, for example, know its size in advance
because the image file is stored right here in this project,
and this will become important.
So where am I using this logo?
Well, I'm using it in the header.js file.
There, I'm displaying this logo
here to the left of my navigation,
and I'm, of course, displaying it
with the regular built-in native image element,
so not the image element coming from NextJS,
but instead, the one that's usable on any website,
the standard image HTML tag.
And that's what we'll change now,
because as I mentioned before,
you can import the image component
from next/image like this.
You can add this import to any component file,
not just to page components, but to any component file,
and you can then use this image component provided by Next
instead of the standard built-in IMG element here,
just like that in the end.
And with that, we will use this component
to display the image,
and this component then also takes an SRC prop
to set the source of the image
and an alt prop to set the alt text.
Now, out of the box, when using a locally imported image,
as I'm doing it here, so when importing an image like this
from the local file system,
you don't need to add any other props.
Instead, you can leave it like this,
and you'll be greeted with an error.