Optimizing images with Next.js is easy.
Here I'm in the event item component,
which is the component that renders the image
in that list of event items.
Now, currently we're using the standard image tag,
the standard image element,
but for optimizing images
we can import a component offered by Next.js,
the image component from next/image.
Now, this is a special component which we can use
to replace the standard image element.
And when we use that special component,
Next.js will create multiple versions of our image
on the fly when requests are coming in,
optimize for the operating systems and device sizes
that are making the request.
And then those generated images will be cached
for future requests from similar devices.
So to enable this,
we need to use this image component here,
instead of our own image component.
And we can copy over source and alt,
that also works on that next image component.
But now we also need to add two more attributes,
two more props here.
And that's the width and the height attributes.
We need to set those to basically inform Next.js
about the width and height of this image.
And with that, I don't mean
the original width and height of the image,
but the width and height which we need for the image here.
For determining the width and height,
we should keep in mind that our image
is displayed in two possible ways.
It either takes the full width of the container
on smaller screens
or just a fraction of the width on bigger screen sizes.
Because then we have the image on the left side
and the other content on the right side.
Now in the CSS code,
we can see this here basically.
I'm using Flexbox on the parent container
and on smaller screens status a column Flexbox,
so items are rendered on top of each other.
But on bigger screens,
the items sit next to each other.
And then the image has 40% of the width of the overall item.
Now, the overall item width
is determined by the event-list styles.
And there we have a max width of 40 rem.
So overall we have around 640 pixels,
that is what 40 rem are in pixels.
As a width for the overall item.
And the image has around 40% of that.
Hence here we could try setting width
to around 340 pixels maybe,
which are roughly 40% of 640.
And set the height to,
here we have 10 rem for the image
so that our 160 pixels.
So that's the value I will use here.
So with that, I'm determining the width and height
of the image, as it should be loaded on the screen.
I'm not setting with an height of the original files.
As you see these files here, have much bigger dimensions.
I'm not using those.
So with that, if we save this
and we reload,
we see our image showing up here.
Now it's a little bit too wide.
So I'll actually shrink this to 250 here
and that looks better,
and on a smaller screen, that also works.
And the nice thing here now is
that if we now open the developer tools again,
and we again empty the cache and hard reload,
we will see that these images are much smaller.
We see that here,
this image is now only 19 kilobytes
instead of the megabytes we had before.
So all these images are much smaller.
They are all the fetched as a different type now.
As webp here, since I'm using Chrome
and Chrome supports this optimized image format.
And they also have reduced quality
to shrink the file size even more
without impacting the image.
The quality is only reduced such
that we don't really see it.
Now that's working because Next.js, as I explained
generates optimized images on the fly.
Now we can see those generated images
in the .next folder.
They're in the cache folder.
We have an images folder.
And in there we have a couple of triptych files,
which in the end contained the images
as they are generated by Next.js.
And these are the optimized images,
which are generated when they're needed.
So they're not generated in advance,
but when a request reaches the page.
But then they are stored so did future requests
from a similar devices
immediately get that already generated image.
And that's there for another very nice feature
Next.js has built.
Now besides the size optimizations,
which are of course super important.
Those images also have a never nice benefit
or the image component offered by Next.js
has another nice benefit.
if we're on a smaller screen here.
And I then reload.
If I clear my network tab,
watch what happens if I increase the screen size,
as it increases you see a new request is made
for that bottom most image.
That request is being made,
because by default images are lazy loaded.
Which means if they're not visible,
Next.js will not download them.
And that's another difference
to the built in image component.
There all images were loaded eagerly,
which means they were loaded all the time.
Now they are only loaded when they're needed
and that further decreases the amount of requests
we're making in advance,
and the bandwidth we're taking up with our page.
So that's another nice feature.
We don't load what we don't need.
So next/image is a super important component.
It allows us to ship production-ready images
and therefore I also wanna use it on the event detail page.
There in event logistics,
I'm also displaying an image
and I now also wanna use the next/image component there.
So we import image from next/image here as well,
and replace this image, the default image
with the next/image.
Again, copying source and Alt.
And then we need to figure out the width and the height.
So for this, let's briefly again have a look at
the CSS code here.
And we see for the image,
I'm using a width and height of 10 rem each.
So that would be 160 pixels,
hence that's what I wanna load here.
160,
160.
And with that set, if we now go back to the page
and we visit an individual image,
we see that's all that is being loaded.
Now it's looking a bit blurry.
So maybe here, we should actually use a bigger
width and height, maybe 240 instead of 160.
And if we do that, it looks sharper.
Maybe we ramped that up even more.
So finding the right width and height here,
all that will be a bit of trial and error.
You still override width and height,
as you set it here with your CSS styles.
So if you give the image a hard-coded width and height,
those CSS styles still kick in.
The width and height, you set here only determine
the image size that will be fetched in the end.
The final styling is still being done with CSS.
And here it's simply looking a bit blurry,
because I was zoomed in.
If I wasn't zoomed in, 160 pixels would have worked out.
But I also want it to look good when I do zoom in,
so I will pick slightly bigger values here, maybe 400.
Again, only because I'm being zoomed in here.
Yeah, I think that looks all right.
So now with that, we're using the image component
on this page as well and in general.
In your Next applications,
you wanna use the next/image component
instead of the standard image component.
Since that next/image component gives you
a lot of optimizations out of the box,
and it is super easy to use.