[Maximilian Schwarzmüller] So this next image component
automatically determines the width and height
of the input file when you're using it.
And therefore you should indeed make sure
that the input file isn't unnecessarily large
because otherwise, even though NextJS will perform
some resizing for different screen sizes automatically
or for different screen resolutions specifically,
even though NextJS will do that,
if the raw input file is too big,
of course the entire base for the resizing operations
performed by NextJS will be wrong.
So one thing you could do then,
and you should typically do is resize that input image.
But one other thing you could do
is manually override the inferred width and height.
And you can do this by setting the width
and height props on that NextJS image component.
And here I could, for example, set that to 100 each,
so to 100 pixels each and of course you should set a width
and height that's in line to the approximate size
at which the image will be displayed here.
So that comes down to your specific use case.
But I can set the width and height like this
and if I then save that and reload,
you will see that of course,
still the image element is rendered
but now my width and height has been set as a value here
on that image element and the sizes that are generated
by NextJS automatically, you can tell
the generated width here by this special query parameter
that's set on these image URLs.
These sizes got down and were decreased
and therefore now by manually setting a lower width
and height than the input image has,
I'm making sure that NextJS actually serves
smaller image files.
Now whilst you can tweak the width and height like this,
this is actually not the recommended way
though I will say it does work
and it therefore can be a decent workaround
or a quick way of getting NextJS to resize an image.
Still, when importing a local image,
it's typically not recommended
to set the width and height like this.
Instead, you should keep it to the native raw sizes,
the raw width and height of the input file
and instead, if you want to resize the image,
it's recommended that you do this with the sizes prop,
which is another prop you can add on that image element.
And the sizes prop then can take
actually a list of different sizes.
The image should assume depending on the width
of the view port so that you could set up
a responsive image but if like here,
we have one size that's used all the time,
this image size doesn't change as my viewport width changes,
if that's the case, you can just set up one value
for this sizes setting
and that value could be 10vw, for example,
which is a CSS unit.
And this means that this image will take up
approximately 10% of the available viewport.
And this setting will then also get NextJS
to resize the image and serve an image of a different size
behind the scenes.
So that's an alternative way
and actually the recommended way of resizing an image
and you can therefore also learn more
about using this sizes prop
in the official NextJS documentation.
However, I will say that for use cases like this here
where I have a fixed size image,
where I don't need different resizing
for different viewport widths,
I personally actually like to manually override the width
and height of the raw input file and set a width
and height explicitly as I'm doing it here
to get NextJS to serve me a different image file
of a different size, simply because that's a quick
and easy solution.
Nonetheless, you should know about this sizes prop as well.
Of course, as mentioned, it would be even better
to decrease the size of the input image,
but manually setting a width and height that differs
from the base image size also can be an alternative.