All language subtitles for lesson7

now we are on the

official site of next as and if you head

over the showcase tab this specific

webpage shows hundreds of beautiful

websites built with nextgs and let's use

this website to demonstrate our next

image component

as this specific website

uses the next image component to display

all these pretty images right here

now let's head over to our developer

tools and go to the network tab and

inspect the network so we can see what

the size of these images are

so here let's head over to developer

tools

and then let's head to network tab here

so you can already see the size column

here this shows the size for every file

so

let's clear it and select image here if

not already

now if you notice right here we are on a

responsive site so now let's see what

the specific image size is

that next.js uses for this specific

viewport so now let's go ahead and empty

cache and hard reload

all right so now that we have done that

you can see the different file sizes

right here right so now let's go

and pick one of these images now let's

go with this one because this one has a

dog and i really love dogs because i

have one right and it says make your day

now if you take a look at the file size

it is

66.8 kilobytes now this is the file size

for this specific viewport that next

year's image component uses right

and has downloaded that specific image

so now let's go ahead and change it to

maybe iphone 678 version which has a

slightly smaller viewport and let's see

how the next image component performs

now let's make sure that we remember

this number

66.8 right and it is this specific image

so now let's go ahead and do the same

thing again right click and let's empty

cache and hard reload

and now

let's see what the file size is now so

again it was a third from the bottom

right and this is that image right here

so now if you close it you can see that

it's actually

35.9

kilobytes now isn't that crazy and isn't

that amazing we literally went from 66

to approximately 36 kilobytes now now

that's approximately less than half the

size

so this is what the next js image

component does based on the specific

viewport it is automatically going to

render a different file size and you can

already see this helps so much with

performance because when you are on a

smaller viewport that is a mobile device

most likely right you don't want to load

a desktop image here right so next.js

takes care of it for you

all right the next thing let's take a

look at the pre fetching feature of

nexus image component so now again let's

try and scroll down we have cleared the

network and let's see what happens

now as we scroll down you can see how

the images are getting downloaded as we

scroll down so as the images are about

to come in viewport you can see that

this specific image is not even in the

viewport yet but it i'm pretty sure it's

coming up after this one

and look at that and next yes is

essentially prefetching that specific

image so the user gets a really good

user experience but we also see a

performant application as well because

we are only downloading the specific

image

as the user is about to enter that

specific area

now isn't that amazing the next image

component is really really powerful

now that we learned so much more about

images we will keep taking a look at

performance as we build the projects

together

let's take a look at another benefit of

nexus