Next.js Image Component (next/image) Introduction

okay today we're going to take a look at the new next image component i'm going to show you how it actually works we're going to take a look at all of its props i'm going to explain each and every one of them and at the end i'm also going to show you an example of how you can use it with remotely hosted images like the ones on your cms for example so let's just get right into their blog post they have announced next.js 10 and along with it this new next image component so if we scroll down here we will see that images take up 50 of the total bytes on web pages so there's a lot of potential for optimization there and a bit further down it also says that images often don't have a width and a height property which is causing them to jump around when the page is loaded also 99.7 percent of images on websites do not use modern formats like web p webp is a format developed by google and it's on average about 30 smaller than jpegs i think okay let's see this in action i've set up this little example application it's just rendering an h1 and an image tag and if we take a look at it it just looks like this i picked this little image of a laptop here and now we are going to use the new image component so first thing we're going to do is import image from next image and then we can use it down here the source attribute is identical to the one above nothing changes there that's pretty cool we still need an alt tag and we also need to provide a width and a height property so this image is 6000 pixels wide and it has a height of 4000 pixels i think and based on these values next js automatically creates css that makes this responsive and you know keeps the right aspect ratio so if we save this and we're going to go back to chrome we will see that there's no well two images this one the one above is the original and this one is the optimized one and i guess i can see some compression artifacts here on the side but you know that's to be expected also this image let me just filter by images here in the network tab so yeah the original one is a jpeg which is 1.1 megabytes in size and the new webp image is well just 12.3 kilobytes that's pretty nice but let's go back to the elements tab here and this is the original image and next js actually wraps the image tag for its compressed image in two diffs we can see they have some style attributes some css to make them responsive this padding bottom here is a little well it's not a hack it's how you can actually make how you can actually keep a div at a certain aspect ratio and then they've got the image tag in here which uses um a source set attribute down here to provide urls for different image sizes and then your browser can decide which one it should pick so if you go back to the network tab let's just make this a bit smaller to like simulate the phone refresh the page so now it loaded the image that's 420 pixels wide and now if we change the viewport size it loads bigger images you see there's the thousand and twenty four and there's a thousand one thousand two hundred pixel right and of course they get larger in size because they also contain more pixels obviously okay so now let's look at the api reference for next image if we scroll down here we get a list of all the props that it accepts source is obviously the well path or url to the source image we've used this already we've also used width and height now sizes is a bit more difficult as well if we go to mozilla's docks here it says that it's a list of a media condition and a source size value so basically you can use these media conditions that you know from your responsive css to propose image widths depending on the viewport so in their example here they use max height 500 pixels 1000 pixels which proposes to use a source of 1000 pixels width if the viewport is not higher than 500 pixels this is not really necessary to use as your browser is already doing a good job of this yourself but just know that you can actually override this behavior if you are not satisfied with it your browser usually takes into consideration the viewport width and also your device pixel ratio now next is the quality of the optimized image which is an integer between 100 it defaults to 75 which you can see here in this in the network tab so q equals 75 in this query parameter thing on the image url is actually the quality which you can totally overwrite so let's just go in here and say quality equals 10. now if you refresh the page you will see a very pixelated version of the image which is of course even smaller this one is just 5 kilobytes and if you use something like 95 it looks very close to the original image but it also went up from 5 to almost 40 kilobytes okay next is the loading prop which is the loading behavior it it defaults to lazy which means that it will the image will not be loaded until it's coming close to being scrolled into viewport so if you've got for example a very long blog post then the images at the bottom are not being loaded at the beginning they're only being loaded once they are almost being scrolled into viewport so that's pretty cool and it's also defaulting to lazy so you don't need really need to do anything there in most cases of course then priority when true the image will be considered high priority and preload we can i can show you what this means so let's just say priority and if we go back to chrome hit the elements tab we can see that in the head it adds a new link tag link corel preload and basically as soon as the browser encounters this link tag it will start to load this image if you go into the network tab we will see that the image has been loaded first and then there's the bigger image so let's just change to a slower network speed and hit load and you'll see that this image is being loaded first before this one because well it has priority next is the unoptimized prop this is really simple if you set this prop then the source image will be served as is instead of resizing and changing quality so if you really need to use the original one for some reason you can just set this and unsized is not really recommended but if you set on size then you do not need to use the width and height attributes they should not be used with above default images which means images like this one so the fold is basically where the first page ends so here it's about on the title so everything above here is considered above the fold and yeah that wraps it up that's all the attributes okay now let's take a look at how you can configure this component in your next config.js file you can set device sizes which corresponds to the width values that we have seen here in the browser so 768 is coming from here the next one should be 1024 and if we resize the viewport here we can confirm that this is actually true now another good thing to know here is that if you open this in a new tab and you just change the query parameter to let's say 1025 you'll get that this width is not allowed which is because it is not specified in here so if we were to go in here and add 1025 and then just restart our application 1025 actually works next up is the image sizes this one is for images that are not meant to be responsive so most likely you're going to use this for icons and the way you use this is you will define them here and then you can use with 16 as a width [Music] prop here and now next js knows because 16 is listed in here that this image is not meant to be responsive so it will always render it at 16 pixels width but of course letting the browser decide if he wants to choose let's say the 32 pixel image because its device pixel ratio is 2. now next up we got domains this is for when you actually want to optimize images coming from an external source i told you at the beginning we're gonna we're gonna take a look at an example and we're gonna do this right now so i've prepared this image here from unsplash now this means that we need to whitelist this url so we're going to put this in here because otherwise it will not work images.unsplash.com and then we can copy the link and just put it into the source tag right there and we also need to get width and height correctly so what did i say four thousand and two thousand four 000 width 2000 height and now if we we get that it um not configured under images in your next config.js which is because i have not restarted it here my bad and now it works so now it has loaded the image from here which is well pretty large and it has compressed it down to 48 kilobytes and also converted to webp so it totally works with externally hosted images pretty cool next up we got the path property which is a prefix to the url so if we just take a look in here we will see that the source actually says slash underline next slash image which is exactly this path which also happens to be the default value and this works in conjunction with the loader and a loader allows you to use different cloud image providers so instead of using the built-in one you can use an external one like any of these three are supported currently and this path property is then you know the prefix to this url okay so that wraps up this video thank you for watching till the end and if you learned something new please like the video and consider subscribing to my channel thanks for stopping by

Channel: Patrick M

Views: 1,337

Rating: 5 out of 5

Keywords: nextjs, programming, javascript, tutorial

Id: rcMVetF4NA8

Length: 12min 57sec (777 seconds)

Published: Sun Nov 01 2020

Reddit Comments

[u/tokensushi]

thanks very informative

[u/deivaras1979]

Very nice explanation. Thank you.

[u/Salteh]

Thanks! :)

[u/it_is_a_code]

Amazing explanation. I was needing that. Thank you so much.

[u/Edorino]

We're using next.js for the logged out parts of our application and React Typescript on the logged in parts. Does anyone know if a similar image component exist for pure React? Or React written in Typescript?