All language subtitles for 009 A Closer Look At Our Images_Downloadly.ir_en

So by now we optimized

our meta tags in the head section.

But there's another important aspect of

basically any website you're building that

always should be optimized,

our images.

We are rendering a couple of images here,

when we rendered that list of events.

And also when we explore a single event,

here we also have an image.

And in both cases, those images are not optimized at all.

Let me show you what that means.

On the All Events page,

if I open the developer tools

and we go to the Network tab here.

If we then empty the cache and hard reload,

by right clicking on the refresh icon,

we make sure that we reload all the data for this page,

including the images.

And now let's have a look at this coding-event.jpg file.

If I make this a bit bigger,

we see that this image has two megabytes.

The introvert and extrovert images are even worse,

they have five and four megabytes.

The reason for this is that

these are huge unoptimized images,

which are fetched in full size and quality.

And we are also always using the same image type, jpeg,

no matter if our browser maybe supports a better type.

For example, Chrome would support the webp image type,

which is an optimized image format.

Now for development, that's no problem,

but this would not be okay for production.

These would be way too big images.

And Next.js calls itself,

the react framework for production.

And shipping such big images is

certainly not production ready.

Therefore, for it makes a lot of sense that

Next.js also helps us with images.

It helps us optimize those images,

and it does so in a super simple way.