Original subtitles

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.