Next.js Image Component and Image Optimization + srcset and sizes explanation

hello youtube today we are going to talk about the new image component in xjs with it we can send resized and optimized images to our browser let's say we have a user in a very small viewport for example a mobile phone we don't need to send a very high resolution for that device on the contrary if we are in a very large device we probably need to send a higher resolution image to that specific device another very good advantage of using this image component in xjs is that next.js will check which image formats your browser receives and then we'll send that specific image format at the time the best image format that next.js supports is the webp format that is already in the source code some references to a newer and better format called avif so in the future you may expect that nextgs will add that format apart from the performance improvements that will make our application faster there is another benefit by using this image component which is that we will minimize the layout shifts in our application if you don't know what is a layout shift let me give you this as an example we have a div an image and another div when we load this in our browser the first thing that happens is that we will get this result a few milliseconds after the image we load when that image loads it will shift our second div to the bottom of the page that is called a layout shift and is something that we should try to avoid in our applications google already announced that in the future they will take this cumulative layout shift as a metric for your page ranks in google so it's something we should take into consideration let me just add one last note before we jump into code this component was announced during the next js conference in collaboration with the google chrome team so a lot of people send me messages asking if this is something that only works with google chrome or if this also works in firefox and safari and other browsers and the answer is this is 100 web standards you can even see that when we have this image component in xjs it will generate this html with source sets and sizes that means that this is 100 web standards to prove you that during this video i will even be using only firefox okay i will not touch chrome during this video you can also see inside those search sets that we have an api endpoint over there which means that those components will call an api from next.js at runtime and so our build time is not affected by that it has a small drawback if you are doing next export like guillermo rush said over there if you are trying to host your pages in for example github pages it will not work for you in order to explain the source set attribute to you i already went ahead and created the file with an image using the normal source attribute and what we are saying to our browser over here is independently of our browser width or our viewport tweet our browser will always download that specific image if we want to give more information to our browser to take smarter decisions and load only the images it needs for that specific viewport tweet we can use the source set attribute if you want to support also i11 i recommend that you keep a source always there okay if you don't care about older browsers like ie11 you can altogether remove this source and just use the source set okay so using the source set what we can do is the following is to say okay i have this source and this source has some amount of pixels horizontally in this case it's 800 pixels the pixels unit is not valid inside a source set so we need to replace it by w which is the valid unit to represent the amount of pixels horizontally on that specific image then we can load the other three images we have over here which is the medium image and then we will also load the large image so our medium image is 1200 pixels so we can now copy this one and load our large image which will be 1600 pixels and so 1600 pixels over there now if we go into our browser you can see if i refresh this that we only load the small image because we are in a very small viewport when i increase the viewport a little bit you will see that i downloaded the medium image right now because the viewport is slightly larger so our browser took the assumption that it needs a little bit larger image in order to keep it crisp and beautiful for our users right then if i keep increasing the viewport as you may imagine sooner or later i download the large image now you may be asking yourselves look bruno that's all very good but i have a question we are saying that that image is 800 pixels but no way your browser at the moment is 800 pixels right and you are right my browser at the moment is 455 pixels and i'm already downloading an image that is 1600 pixels width so what's happening over here well you need to be aware that on windows mac os and even linux if you go to your display settings you will have something called scale or zoom depending on the operating system if you are using a mac you are probably familiar with the term retina display and basically a retina display means that your software is having a pixel but in reality that pixel is two or even three or four hardware pixels right so in order to keep your image crisp your screen is behaving or your software is behaving as if it has less resolution but then you have a lot of resolution in hardware in my case i have a 4k screen but as you can see i have a pixel density of 250 percent right so what it means if i go back to my browser is the following i have the 800 pixels right and if i divide the 800 by what we call device pixel ratio which is in my case 2.5 i can even show it to you device pixel ratio is 2.5 because of my 250 percent right what's happening is the following our 800 pixel image we will divide by 2.5 which is my device pixel ratio and so we will change from the small image to the medium image at around 320 pixels then we will change from the medium image to our large image at around 480 pixels so let's come over here and validate that let's put around 320 pixels right let me go to the smaller one around 320 and as you can see if i'm on 316 pixels i'm on the small when i increase the bit i will go to 320.8 and i load the medium one then if i go i think is 480 pixels i will start to download the large image so 492 478 right so over here is our breakpoint if you want to call it that way you can also see that our browser at this moment is always assuming that our image is occupying 100 percent of the screen but what if you are using stuff like bootstrap or any other library and you are doing something like this imagine that you are in bootstrap you will have something like this right class name class name equals to row and then you will have for example an image with class name class name equals to call sm6 for example right so what we are going to say is that our image will be off of the screen and if our image is off of the screen we would like to tell our browser look after this specific screen width my image is no longer 100 is now 50 percent let me just go to the bootstrap website to copy the bootstrap source tag and i will come back to you i already went to the bootstrap website so i can now do the following and i have this link to the bootstrap css and now if i go to my browser you will see that i can refresh and if i refresh i will have the large image at around 576 or 68 wherever bootstrap does that media query and then it will be a two column layout but when there is a two column layout i would love to let my browser know that my image is no longer occupying 100 of the screen is now only occupying 50 of the viewport so we can do that with the sizes property so let me come over here format this code and thank you videos code it becomes even uglier than it was but let's say we have the sizes over here and the sizes over here will behave as the normal media queries you already know in css so we can come over here and say the following min width of i think it was 568 pixels that bootstrap had that um breakpoint and then when the browser is bigger than 568 pixels we will say we only want 50 of the viewports by the way percentages are not valid over here okay so we need to use vw and then everything else it will be 100 you can see this as a if else right so if for some reason over here you have something like this let's say you have something like this now 768 right which is the next breakpoint in bootstrap i guess or 767 something like that this one will catch everything right because width 578 if the mean width is 900 it will be catched inside this one so this one will never be triggered so keep attention to that because the order is important so in that case you will have to do something like that for the 33 33 of the viewport right so we can come even over here now and do call instead of being sm i think the next breakpoint in bootstrap is md and we will do four so at this stage if we have more than 767 pixels we are telling our browser that our image is only 33 of the screen then when we have the two column layout is 50 of the screen and everything else which means one column layout it will be 100 of the screen if i go back to my browser and i refresh this you can see that now i mean m l i go to grow it goes to the small one every time i keep growing and i go to the 767 you see that on the two column layout it was a medium then when i increase even more it goes to a three column layout so my image is smaller and now it downloads the small image again if you want i can come over here copy paste this one and i will put instead of the red image i will put the blue image so we have now two images for you to see right and i will then do a commit with those two images and deploy this into versailles so you can see this oops i copied this wrong good job bruno what i did wrong yeah good job bruno it happens let me just copy paste now this copy paste over there and now everything seems to be good so i will go back and i went one too much and now you can see that when i am in the medium ones i'm downloading the large ones for both when the browser starts to grow it will go both to the medium one and then when i keep growing i will go both to the medium one and then i will go both to the small device now if i go back to my ide you can see that i have both like that if i remove the sizes from one of them i will remove the sizes from the blue you can see that the blue now is loading the larger one because my browser is assuming that my blue image is 100 of the screen so i will probably even do the comment like that so you can see the difference between the two images right so when i keep going down my blue is always large and i will also do a deploy to versailles so you can see that in the comments down below now that we understand about the source set and the sizes property it's time for us to load more images into the same page so over here i think i have 10 or 12 images and i already mapped all of those images into this photos array so you don't see me typing for the next 10 or 20 minutes all the widths the heights and the sources right over here on this normal image component i'm already looping through that array and just creating normal html emg tags nothing special over here so if i go into my browser you can see that all of these images they are just the emg tag nothing special over there you can also see that they are not responsive so nothing happens to my images now if i want to convert this normal html image tag into the next.js image component the only thing i need to do is to come over here into the following image and now i will do import image from next slash image that's all you need to do in order to convert it right it was just a few characters different now if i go over here and i refresh all the images that we are going to see were processed through the image component of next.js i can do an inspect element and you will be able to see that in this inspect element we have also source sets and you will notice that these source sets are slightly different than the ones we saw two minutes ago over here they are only using the 1x and 2x so you see 2x over here and 1x over here what that means is that they are only taking care about the device pixel ratio so if the device pixel ratio is one they are loading this image if the device pixel ratio is two they are loading this image or bigger than two they are loading that image usually what i like to do is to do what i showed you before taking into account the device pixel ratio but also the dimensions of my browser in pixels and if you want to do that as well you just need to do one more thing layout equals to responsive and that gives you another benefit apart from also being responsive on the way down like the intrinsic it now also grows to the full screen of your container so in this case it will fill all of the container of that image this is usually very good but keep in mind that if your image is very small and your container is very large trying to stretch that image it will probably become a bit pixelated but now if i do inspect you can see that inspecting that image for example you can see that we have source sets with a lot of options next.js puts a lot of options sorry you can see that we have 640 750 828 we have like eight or nine options over there in my example we only add three so next js is putting enough images if you want to override those values you can override those values in the next config.js and i will leave an image over there with that change right but usually i don't think you need to change that because the values are very very good now the question that you are probably asking for the last two minutes which is bruno show me the difference in performance comparing the normal emg tag and the next.js image component with this layout responsive so let's see that so on the left we have the normal emg tag the html emg tag that we know and love and on the right we have the next.js image component using the layout to responsive okay so i think the numbers speak for themselves i don't need to say much you can stop the video compare the two everything between the two and then when you are ready we will go back over here if we do inspect and i go down to this list you will see that my last image doesn't even have a source yet and this is one of the best benefits as well from the next.js image component it only loads the images that are visible in our viewport this last image is not visible so there is no need to download it yet if i start to scroll you will see that this bit will blink in a second when i reach the end this bit blinks and now we have a source we have a source set and we start to download that image alright so this is very very impressive what the next js image component is doing over here i need to show you one more layout actually two more layouts the next layout that i want to show you is a very obvious one which is the fixed and as you may imagine it will do very similar to what the normal html image does so it will not stretch and it will also not shrink so it's always that size no matter what happens right it might be very useful for you but i never use that one specifically okay the next one that's very useful is the feel and when we use fill we can't use the width and the height okay so we will remove the width and the height and in this moment it doesn't make sense to have an array of images because what's going to happen is that we will fill the container if the container is a position relative right so if you have a div with a position relative it will fill that container but in my case what i want to show you is how to do background images right so i will remove everything from here and i will also remove these and now i will remove this key and the source will be just this oliveira wins.jpg so oliveira wins.jpg i don't need this old stack i can say just uh oliveira wins in portugal doesn't matter what we put there for the demo right and so if i put the field and i go back to my browser i need to refresh this and you will see that when i refresh these i had a problem what was the problem oliveira wins doesn't exist that image okay probably i made a mistake oliveira dash wins.jpg okay let's do this because sometimes i fail what i'm doing and i just need to do slash photos slash photos oliveira wins.jpg now i can refresh and now you have oliveira wins over there it's now as the background of our page but we have this small detail if you want to call it a detail it's a huge problem right so you can use something called the object fit if you don't know about it we can open the next js documentation nextgs.org go to the docs and when we go to the docs we can click on the image and we will go oops yep i think that's the one we go to the image and then at the bottom we will have something called the object fit and the object position for us the first thing we want is the object fit but immediately after we will also need the object position this is nothing special from next.js next.js is just passing these properties as normal css uh and there is nothing special from next js this is just css over here next yes is just giving us the helpers to use that directly right so the one we want at the moment and i will use will be the object fit to cover so let me come over here to my browser once again inside the object fit object fit equals to cover right and immediately the image from miguel will looks much much better so now the image is no longer being stretched as it was miguel looks nice but we have a slight problem with this image still if i make this developer tools being docked at the bottom you can't see miguel's face because miguel's face is at the bottom of the image and for that we will use the object position and in my case i will just use the object position as bottom and centered if i do that i can come again into my ide i will do object position equals to bottom center and now if i go back over there and i open miguel's face now miguel's face is always on the screen well unless i go to extreme measures but miguel's face is usually always on the screen if i go dock to the right miguel's face is always on the screen as well and as you can see if you want to be very detailed you can go to this 50 or 60 or even putting 250 pixels stuff like that right so you can go very very very very deep on that now i have two more things to show you before we wrap up this video that might be very important for you or not important for you the first one is the loading so when we are scrolling sometimes you want a specific image to be always there doesn't matter if it is on the viewport or not imagine that image is very important and when the user scrolls it needs to be there already you can say that for that specific image the loading is not lazy but it's eager by default it's lazy so only when we scroll next yes changes the source to have the source and the source set so the browser starts to download if you want to make let's say an image and let's just do ctrl z once again to go back to our array right then when i commit i will have multiple pages on the left with all the examples there so don't worry too much so if i just remove these now and i can come over here and say the following loading equals two and if it is the last photo for example we think that last photo is very important so we want to show it all the time we can do something like this photos.land equals equals equals to an index we can receive the index over here and we can do index plus one if that's true then it will be eager all the other images will still be lazy and lazy is the default okay so i can now go back over here to our browser refresh this page and you will see that by the way this sometimes happens next.js crush is loading one of the images in development mode it never happened to me on production or even in my linux machine is only on my windows machine you can see here that it failed in a link so if you kill the server and you restart the server again then that image will load which was the first image i can go again here oops i went a bit too much i will refresh and you will see that the first image now will load okay so it's a problem that sometimes happens to me on windows only on windows and only on development mode i don't know if it's a bug on my computer or general but at least if it happens to you you know what to do go there kill the server and restart it again now what i was saying is that now this last image so this is the first image but if i scroll up to the penultimate image that penultimate penultimate image doesn't have a source but our last image will have a source already and a search set so doesn't matter if i scroll that image is already there downloaded this might be useful for you the last thing that might be useful for you and i use it probably a bit too much is the quality of the image right there is a property over here called the quality of the image and this quality of the image goes from 1 to 100 percent next js by default sets it at 75 but most of the times even if you put let's say 50 or 40 percent is just good enough so let me just delete this one i will also have a demo for this specific one so don't worry so if i come over here and i do for example quality equals to 30 i'm putting all my images to 30 and you will see that they still look acceptable not perfect but still acceptable and we removed quite a few uh kilobytes from each image right so as you can see over here if i refresh yeah we noticed that especially in those leaves there is a bit more pixelation but honestly sometimes i use that i go as low as like 25 you can use that to get even better results by default next is on 75. one last note before we wrap it up you can see that these sizes at the moment it's saying that it defaults to device sizes in the future in the next version 104 it will become 100 vw that's a poor request that a familiar face open to next js and the reason that that was happening was that next js in the sizes property was saying that if the screen was up to i think it was 568 or something like that the image will become 568 so in very small devices we were still downloading a very large image i will leave a link to that poor request in the description if you want to have a look into it so any questions you might have or anything that might change in the future i will leave a comment pinned uh below so please have a look into the comments below because if there is something that changes i will pin a comment i hope this video was helpful if you have any questions let me know and i will answer to all of them and i hope to see you in the next video bye bye

Channel: Bruno Antunes

Views: 41,392

Keywords: nextjs tutorial, next.js image component, next js image component, nextjs image component, nextjs image optimization, next.js image optimization, next js image optimization, next js srcset sizes, next.js image component how it works, how to use next js image component, next.js image tutorial, next js image tutorial, next js image component tutorial, next/image, nextjs objectFit, nextjs objectPosition, nextjs image, next js image, next image component

Id: R4sdWUI3-mY

Length: 28min 9sec (1689 seconds)

Published: Mon Dec 21 2020