Next.js Image - Never struggle again (+ ImageKit)

you need to add an image to the page how difficult Could That Be Well turns out it's not so easy so the nextjs image component is extremely powerful but you do need to know how it works so it can help you out with layout shift it can do some basic optimization for you like create different sizes of the image it lazy loads the image so it only loads when it comes into viewports it helps you out with the blur up effect as the image loads so very powerful components but most people in practice struggle with this component so I prepared five common layouts for you and we're going to go through each one and I'll show you exactly how to use the next gen s image component in each one I recommend that you watch the video in full because I'll explain all the little details as we go through those common layouts so in nextjs with this component you can do basic optimizations but very often you want to go beyond the basics and you want to use a third-party service so I'll will also show you how that works so in this video we're going to use image kit so image kit helps you optimize and transform your images and also videos and you can upload images to their library and host it with image kit but maybe you already are hosting them with for example S3 or Google Cloud platform and you can keep your images there as well image kit can then automatically compress and convert images to an optimized format like webp for example and you can do a lot of sophisticated Transformations on these images so when you upload to image kit you get a URL for that image it will automatically convert it to webp and then if I want to make any transformation I can just add this query pram where I say transform is and then in this case I made the with 500 pixels but they also have more sophisticated Transformations like AI cropping adding water marks and even for video hls or Dash streaming so they have sdks for the framework in which you want to use them now in this case we're going to use nextjs we're going to integrate with the nextjs image component as you'll see with a custom loader as it's called they actually have a very generous free tier and you'll see it's a very powerful combination because we'll get all of the benefits from the nextjs image component and then in addition even more sophisticated features from image kit and they are of course today sponsor example one let's say we have some kind of a hero section on a landing page we have some text a button and let's say we want to have an image next to here very standard layout so here I have my image it's a huge image now traditionally in HTML and also in jsx of course we have the native image tag so I can just use its URL you can see it's a huge image so it takes up a lot of space so then here with CSS you can change its Styles let's say I want this to be 400 pixels wide so if we don't really care about what the height is going to be we can say it's h Auto all right so then we have this so this is with the native image tag what is wrong with this we're only displaying this image in a small area like this we're still loading over the Internet this huge image you can actually see how big it is if you go to network and just refresh this 2 and2 megabytes and there are other issues with this as well so now let's actually convert this to the image component in nextjs and let's see what we get so the way that we do it right now is with an external image so here we can prevent layout shift by telling the browser hey this image image is going to be this particular width and height so you can already Reserve that space so then when the image actually is loaded it doesn't shift other parts around here the width is going to be 400 but what is the height going to be because we haven't explicitly set the height so let me just try a 100 just so we can get rid of the error before we can actually see our image we have another error here so we need to go to the next JS config now we don't want somebody else to use our server to optimize their images so we may want to restrict this even further all right so now we see our image again we can see it actually just renders this native image tag on the page the way to think about it is first you style the size of the image with CSS just like you're used to and then as an optimization you can use these width and height properties right so this is not what you use to actually specify how large the image should be on the page that's something that you still do with CSS and this is more like an optimization that you can do after styling it to prevent that layout shift so when you hover the image you can see the height and we can also see it down here so the height is some 26 so we can actually be super precise and actually we also need to specify an ALT value here this will be displayed in case the image cannot be loaded or for people that are using screen readers the first thing that the browser will receive is actually HTML it doesn't know anything about CSS yet or JavaScript so the browser can see hey there's going to be an image but the browser doesn't know how much space it's going to take up because the size depends on the CSS right the CSS and the Styles sheet and things like that come later but now with width and height we can already specify in the HTML here width and height how big that space is going to be so it can already Reserve that space so it's not going to shift other content around later that's the only reason why I'm using width and height here and it's also important to not it's more about the ratio than the specific value here now in the real world of course we want to have responsive layouts right so inwind is always a little bit tricky Twi is mobile first so if you want the big one on bigger devices you say from medium and up we have this bigger width and then on a smaller device you do it without the breako let's say that's 250 pixels and so now you can see on smaller devices it's 250 pixels once it crosses the medium break point and up it's going to be the 400 now here it's 250 so when somebody goes to this page on a mobile phone let's say we also want to prevent layout shift and to prevent that layout shift we have to width and height props but here I still have the values from the wider view Port so now on a smaller device the width is 250 but here I have 400 for example so should we change these well not necessarily because remember it's about the ratio so the ratio for these two numbers is actually about 1.5 so if the ratio that it has on the smaller viewport is the same we don't have to change anything so let's see what we have so here the width is 250 height 166 and that is the same ratio 1.5 so we don't have to change this so if you want to be a little bit more certain that you're going to keep that aspect ratio as you're going to resize the image over time you actually can set the aspect ratio in CSS so here I can actually also just set it to something like this so that it will always keep that ratio so that's something you may want to use as well there is something that's even more important here which has to do with Source set as well as sizes a lot of people are confused by these two as well so it actually starts with Source set let's talk about this a little bit if you remember from the Native image tag at the beginning we were able to display the image just like this but we were still loading this huge image over the internet and so we were displaying it like this with CSS but we were loading this gigantic image of 2.5 megab so that's very inefficient so ideally what we could do is we could take this image and create a smaller version of that so just the amount that we need here which is like 400 pixels and some height and then on mobile we would like that to be even smaller right so on mobile we can use an even smaller version of this this image this gigantic Source image we can create a derivative of this another version of the image basically another image file that is even smaller that we can then load on mobile so we can use the source set for that so what we could do is we can say we want to have an image file specifically for when the image is 400 pixels wide and then we want to have another image file that is the one that we want to use for when the image is 250 pixels wide this image here this URL here needs to be changed so that we actually get an image that is not so huge the standard Syntax for this that you'll see around is provide a parameter in the URL so we would like to take that original image and create like a derivative of it like create a separate image file that is exactly 400 pixels wide as well so then that's the one that we're going to use when the size for the image as specified by the CSS is also 400 pixels that would be a perfect match because then with CSS we say the width here is going to be 400 pixels and then over the Internet what we're actually downloading is also 400 pixels right and then here on a smaller device with CSS we style this to be 250 pixels wide and what we would like to download over the internet is not this gigantic image of 2.5 mbes we would like to download an image that is of course exactly 250 pixels wide as well so here we would also like to do something like w is 250 right so then ideally this server that we're making that request to can see that this is part of the URL and it can return an image of that particular width this is the image URL that we want to load for when the image is 400 pixels wide right as determined by the CSS right so Source set is just a set of options for the image that could be loaded on the page now remember the first thing that will receive is just the HTML so the browser does not know when it first receives the HTML how wide the image is going to be right that's actually why we specified width and height here because the browser doesn't know how much size how much space the image will take up so we can already tell the browser hey we know it's going to be it's going to take up this size so Reserve that space already so that's not going to shift other content around and now we need to do something similar here because now we have specified the options for the browser right so we tell the browser hey when the when the image is 400 100 pixels wide this is the file that you need to get but the browser doesn't know what the size of the image is going to be right and that's why we have sizes here so we can already tell the browser when it first gets the HTML hey when the view Port is let's say this big right you can ignore this well then the image is going to be 400 pixels wide right so let's take a look so here medium inwind that's 768 pixels So Below 768 pixels the image is going to be 250 pixels wide right and that's that's the only thing we need to specify here so we can actually have like a media query so when the width is at most 760 pixels the image size is going to be 250 pixels and else so above 768 after that we can just specify 400 pixels this will be included as part of the initial HTML if the vi Port is small if it's a mobile phone let's say and the vi Port is let's say 500 that is less than this so now the browser knows hey oh the image is going to be 250 pixels wide so then it can go to the set of options and it can find the best possible match for that we have actually explicitly said hey if the image is 250 pixels pick this URL to download the image so that we actually load the smallest possible image to save as much space as possible now if a user comes to our a page and they are on a desktop and the viewport is 1,00 pixels wide the browser will receive HTML it doesn't know how big the image is going to be right so we as developers can see it right here in class name but in reality it depends on the stylesheet it's a separate file it's loaded after the HTML so the browser doesn't know initially when it receives the HTML that the image is going to be 400 pixels wide on a few Port like that here we tell the browser hey if the F Port is uh well if it's bigger than 768 so above 768 the image is going to be 400 pixels wide now the browser knows oh I need to pick this URL to download the image because that fits best with this 400 pixels from sizes right so ideally of course when we use a URL like this and we make a request to the imate server that imate would actually return me an image that is of that particular width right now imature isn't set up to do that for us like this and I'm just using imature as an example of my host here but our own nexts server will be able to do this actually as we'll see in a second and actually if you use something like image kit so if you host your image on image kit it's actually very easy you can do uh something like this right so imager isn't set up to do that but other servers are now it's a little bit cumbersome to specify the entire s set so I have some good news for you we don't need to do that with the image component we can actually just remove this we only need to specify how large the image is going to be on a particular viewport and with nextjs the source set is automatically generated for you I do need to specify the original Source here so that nextjs knows the original Source image so it can generate those derivatives from that so this image actually should have that Source set you can see here we have sizes and then here it has a source set so these are all the possible options that the browser can pick from and so you can see it's a lot so what nextjs does it automatically looks at your sizes here and from that has some standard interf Falls but so this is actually coming from our own nextjs server remember nextjs it has both a client as well as a server site so our own server right now not image ER our own nexts server right now is going to generate a derivative of that original Source image and then at the end we see those parameters actually so we see see that this image needs to be 256 pixels wide so our nextjs server will actually generate an image that is of this particular WID from that original Source we could also do this with image kit and we can also specify quality parameters so by default is actually set to 75% now when you hover any of these URLs you will also see which one is currently loaded so right now the few Port here is 900 pixels wide so in the sizes we specify that if it's 900 pixels wide the image will wi is going to be 400 pixels wide that's what we specified here with sizes then the browser knows so the image is going to be 400 pixels so out of all of these options it's going to find the one that's closest to there so here we have an image that's 384 pixels now it will not pick that one because the image here will be displayed at 400 pixels if you load an image that's slightly smaller than that it's going to stretch it's going to look this DED so the 400 pixels is more like a minimum the next one is actually this one that's actually 640 pixels wide and if you hover any of these and you can see the one that's currently loaded is indeed this 640 if I click on that you can actually see it in a new tab so this is the image that's actually coming over the internet you could say to be displayed here right and you can see this is much smaller than this gigantic image that we had before and you can actually also see that here so here in next if we go into cache and then images you will actually see images here you will see actual webp image files that have been generated for me so you get those basic optimizations out of the box with the nextjs image component but as we just saw it does run all on your nextjs server if you don't want to have all of those images on your own server you may want to use a third party service like image kit which can do the exact same for you and has a lot of other benefits as well like more sophisticated Transformations and much more we'll talk more about image kit in a second all right now one other confusing part is that uh some screens for example I'm on a MacBook recording right now my screen has more pixels available so in my Dev tools here I have specified a device pixel ratio of one but that's only in the def tools here if I close out of here my computer actually has a a DPR of two meaning there are more pixels available on a screen like mine and therefore if I actually take a look at which image is loaded here my image here that that's loaded on my computer is actually 12200 pixels wide because I have more pixels available on my screen so on a wider screen we say that the image size is going to be 400 pixels and so the browser now is okay I'm going to take a look here at what's the best match for that so it's going to be this 640 pixel one but then another factor is how many is your DPR so on a DPR of one it will indeed pick this 640 but if you have twice as many pixels available on your screen the browser will think we can take the 640 pixels size image but you actually have twice as many pixels available so we may actually want to take a look at an image that is actually twice as big so it will actually take this 1200 pixel image right so if you're testing this on a MacBook make sure that you're taking that into account when you make these tests in a Dev tools you can actually specify DPR as well you may need to get that from the settings here in case you don't see it yourself now a fancy word for this is a routina screen routina is actually just like a branding Name by Apple so for the rest of the tutorial I will just look at DPR of one another good thing by the way is when you're testing this you may actually also want to disable the cache because if you've already downloaded a bigger version of the image then when you try to load a smaller one the browser won't do that because the browser thinks well I already downloaded this big image I'm not going to download the smaller image now cuz we already have a big one in the cache and so while you're testing this I like to disable the cache as well but there are also other things that the browser takes a look at for example the users internet speed so if the user has bad internet the browser may actually pick a smaller image so that you're not transferring too many bytes right so with sizes we just give one hint to the browser but that doesn't mean that for sure it's going to pick a certain option the browser takes other things into a consider consideration as well if you want to make sure that the browser actually picks a very specific URL you may want to take a look at the picture element in HTML so what they actually recommend is that on the images that load above the fold right so before it start scrolling down so here on a hero image very typical that you actually add the priority to here so I can say priority is true or in jsx you can actually leave off true here if it's a Boolean the mere presence of it means it's going to be true so this means it will load with priority so it will not be lazy loaded it will be loaded as fast as possible and this is actually recommended over the loading is eager option that you may know about from the past a very common effect for when the image is loading is a blur up effect so before the final image has been completely loaded we may load a lower quality version of this image first that is blurred out so basically just an image with low quality for example or just low in width or height that will simply be scaled up to fit this area but we can make it blurry so it looks kind of nice we can do that here as well with the nextjs image component we can say placeholder is blur Now with an external image which we have here it's not in our local file system this is somewhere else on the internet we need to specify ourselves what the URL is for that lower quality image that that placeholder image so we would have to generate this ourselves image kit makes it very easy to manipulate this image create the derivatives of it so I can just specify certain Transformations I want to make to this image with TR equals I can make it a width of let's say 300 so now you can see image kit has generated another file off of that original Source image that's now only 300 pixels wide and then I can also easily blur this with comma and then another transformation bl30 let's say and you can see now we get this blurred IM and so it's easier to generate these blur up images with image kit that's one way of getting the URL now it does need to be in base 64 format so you have to then also convert it to Bas 64 so it's a bit of a hassle to generate this image if you have external image so now let's actually take a look at a local image and you'll see that it simplifies things by a lot so I put this image actually here in my public folder this is where you want to put your static asset like an image so here you can see I have it in my public folder this is the same image now I want to use this on my page how do we do that so here we have the source right so we still have a source we still need a source let me put that here how do I now reference this image here well you have two options here actually so everything in the public folder you can reference in your code like this so stock prices D photo. jpack I'm going to remove the blur stuff for now I'm going to save here now you can see I still see the image here so technically this works uh referencing the image like this but certain optimizations like an automatic blur data URL will not be generated for you if you do it like this so instead you want to import it in a different way if you want to use those optimizations so you actually want to import it just like you would do an mpm package let's say right so now if I save here and actually we need one more so now if I save here and now I go back you can see I still have this here now one of the benefits of having a local image is we don't have to specify width and height so we can actually leave this off and one other benefit is now you can just specify placeholder blur and the nextjs server will automatically create that a blurred image URL for you now it's good to mention you cannot add files here while the project is running so if you want to allow users to upload images let's say you cannot put them in the public folder right so only during development is where we can put files here or using image kit which easily allows your users to upload images as well so this was a simple layout let's go to example two so here we have another common layout where you have the image that essentially spans the entire width of the container of some container and that also means that when we make it responsive you can see we have the situation here where it will get smaller and smaller as the viewport gets smaller so here we have the image component so we still have a source and then here I'm styling it with CSS so what we want is that this image just takes up whatever the width is of the parent element right so we have width full right so until when CSS if I hover it you can see it's going to be 100% width now here we actually do want to set a fixed height otherwise the height will be depends on how large the original image is but that's not what I want I always want this image to be 400 pixels tall so in that case you actually want to use object cover this will make sure that the aspect ratio of the image is preserved when you're actually displaying it here so it will cut off part of the image if necessary right so that's all styling with CSS so after that we have to take a look at these width and height properties to prevent layout shift so I just put in some placeholders here because if you don't do it you'll get an error so now I still have to fix this so now I can take a look and I can see okay so how wide is this image so here I can see image is 900 pixels wide and 400 pixels tall so here for width I can say 900 for height I can say 400 now the problem with a layout like this is of course that the width and height change on a wide Port indeed the width is 9900 by 400 but if a user comes to this page on a mobile phone let's say it's going to be something like this that's on a mobile phone this is going to be the width and this is going to be the height more like a square shape on a mobile the width would actually be something like maybe 400 and actually the height stays the same right so the height is still 400 as well right on mobile phone so you can see that on a mobile phone the width and height would actually be different that would be a different ratio so in practice it's actually very difficult to get these width and Heights correct so instead what a lot of people also do is they use the other option which is you can use fail so you can just leave fail right so in jsx if you have a Boolean value like that just the presence of it means it's true we just specify F in that case you don't have to specify the width and height props yourself next gen s will actually apply some styles to here like absolute positioning so if it if we inspect this so now you can see it has absolute positioning it has height and width of 100% so typically what you want to do is just create a separate div that will actually just be responsible for the size of the image right so I'm actually going to to create a separate div for it and then this div will take care of the size of the image as how it is displayed on the page so I would make this one relative I could remove it from here and then this one should have uh the actual width and height so remember this image now has height 100% width 100% automatically applied because of fill here so I don't need to style that myself like this so the width and height styling I can move to the div itself I can remove these from the image now the image itself I still want to use object cover because I want it to look good not distorted right so now when I go back here you can see I have the same layout as before but now I don't need to specify width and height on the image itself and all the width and height styling is now on the parent element here but we should also Supply the sizes so that it can generate that source so with sizes remember we're just going to tell the browser how large the image is going to be displayed on the page right so on small viewports we can actually see that so we can see the container this overall container has a width at most of 900 and guess less than that the image just takes up actually 100% of the viewport so what we can say here is when the viewport is at most 900 pixels and so you only really specify the width of the image we don't really work with the height of images so here we say the width of the image is going to be 100% of the viewport right so if the viewport width is let's say 500 pixels the image will also be 500 pixels wide and if the viewport is 800 pixels it's going to be 800 now if we go beyond 900 well the image is constrained to the maximum size of the container right so no matter how big big I make it here it's always going to be 900 here so here it's just going to be 900 pixels the image based on this nextjs can generate an optimized Source set for us now what if you have some pading actually that's also quite common let's say there is actually some petting a horizontal pading of let's say eight in tnd so now you can see the image is not taking up everything in this overall container there's just some additional padding here maybe also on the top here let's also quickly do that but it's mostly about the width of the image here so here when we specify in sizes how large the image is going to be well if you have petting that may actually change a little bit so here we say when the viewport width is below 900 it's going to be 100% of the viewport width well is that true so if it is indeed 900 here is the image actually 100% of the viewport width right now right and actually the answer is no it does it never becomes 100% of the viewport width here anymore because now we have pading so here this is not going to be the correct size of the image now you could ignore that it's only a small difference so basically the we're specifying the image to be a little too big this may result in an image that's being loaded that's a little bit too big not the end of the world but if we want to be precise we may want to calculate here so the image width right now is going to be something less than 100% of the viewport width so it's we can use Cal here actually so we can say it's going to be something like 100% of the viewport width minus the padding on these two sides 32 pixels so 64 pixels in total so you would do something like this right so now this is the correct size of the image when the viewport is below 9 100 right so if you have petting and you want to be very precise you may want to use the Cal option as well so far everything that we've been doing with the nextjs image component creating different versions of this image all of that runs on our own nextjs server and you can see that because here in souret you can see all of these links they have uncore next that's a folder in our own project now this does have certain limitations so in the real world you often do want to use something like image kit because it has more sophisticated optimizations and transformation that you can take so I have uploaded this image here in my image kit dashboard you get this media library where you have both a dashboard and with search Etc but you also can programmatically interact with that so I have uploaded this here so this is the Big Image right so this is the original Source image if I go here now I have updated that I can remove that from the URL but you can see now this image here is the same image still a huge image here but it's now coming from image kit so now with image kit I can also transform this into all of those sizes so with image kit you say you have a pram here so you say transform you a TR and then whatever transformation you want to take so here for example in the source hat here we have a width of 8 to8 let's say I can do the exact same here I can say give me a version of this image with 828 width and you can see now I get this image now one of the benefits is with image kit you get more sophisticated Transformations you can make as well like a blur filter you can remove the background of an image very helpful for e-commerce you can add watermarks to your images very easily it's all put on a CDN for us webp versions are all created for us by image kit now so let's see how we can integrate a third party image kit with the nextjs image component now so the only thing I actually have to do here is instead of having a source like this I just need the name of the image so if I go here you can see the name of my image is actually just stock prices that's not the only thing I have to specify for Source now this alone of course won't work cuz the nextjs image component doesn't know anything about stock prices what is this we need to what's called resolve this Source into a URL like this right so I will just say resolve into a URL that's going to be like this right so here we want to take the stock prices and actually with image kit you have like a base URL so here B grad is my ID on image kit and then here you have the name of the asset and then after that you have all the Transformations you can take so how can we do that with the next image component well we can specify a so-called custom loader as it's called it looks very complicated but actually is very straightforward we have the image kit loader and that's going to be a function so that function looks like this don't be intimidated it's actually very straightforward you can copy paste it from the documentation it's very easy they have a very easy nextjs setup when it creates all of those URLs for the source set it will run through this so it will take the source whatever string you specify here and it will give you that here in that function so we can take that Source we can return a URL that is going to be like this and then we also get a width here so this width will actually be the width that will be part of the source set this function will be called mult MP times for each of those widths and then optionally also the quality right so remember we can also specify the quality here because an image kit will create a webp version of this it will it will compress that original jpeg we can specify how much it should compress we can actually leave off because the default is going to be 75% so let me actually specify the type here so Source width and then quality is actually optional so this actually only works in a client component now this is my page component so typically I don't recommend that you make the entire page a client comp component but this is just an example and now if we take a look at the source set that was generated for us still by nextjs but now you can see all of those URLs are pointing at image kit servers so it's now image kit that's going to be responsible for actually creating all of those derivative files serving them through a CDN and you can see when I click on any of them served from image kit and if I inspect this you can see it's a small size right only 21 kiloby actually and you can see here when I scroll down it's a webp version right so image kit can do this automatically you can actually specify this in the settings here by default here if I go to settings when you upload an image and you you use it in your project by default actually it will create a webp version and here it will actually also automatically optimize the image quality actually the default quality on image kit is 80% right so there are other settings that we can add here you don't have to specify the format or the quality yourself image kit will automatically deliver an optimized image let's take a look at some other layouts as well so example three here shows a three column layout on desktop and then as the viewport gets smaller it turns into a two column layout eventually a one column layout right so here we have cards let's say but any kind of gallery type of layout would look something like this so here I created a card component for each one the layout here I'm just using CSS grid that doesn't really matter for image optimization right so we have three cards here right so here I have a separate component this is the card component so this has a div that for the entire card then we have the content the text content below there and then we have our image here so I'm going to use image kit here to actually load my image right so here I would still need to specify with and height but we just saw that it's a very fluid layout so that width and height changes drastically as the viewport changes so here it's easier to just use fill and typically you want to create a separate div in that case and you want to make that div responsible for the actual image sizing so this one would then become relative and then let's say I want this image to be the full width of that card but always a height of 170 pixels and because we are changing the width and height of the image it's typically a good idea to use something like object cover so that it doesn't look distorted object cover is just something the browser can quickly do it has nothing to do with width or height or sizes all right so if we do that this is what we have now to get a proper Source set we do need to specify sizes here so with sizes we specify how wide the image is going to be right so here on a wi view Port the image is going to be 380 pixels wide right so so on a wi view Port so this white means 1 12200 pixels so max width 12 I like to work with Max width you can also work with minimum width but for me it's a little bit more intuitive to work with Max so if it's below 1200 pixels we don't know yet what it's going to be but if it's bigger than that it's going to be 380 pixels right so if it's bigger than that is 380 pixels wide now how do we work with when it's smaller than 1200 so now for example it's not 380 pixels wide anymore it's a little bit less and it gets even trickier because if I push a little bit more you can see at some point it starts to move on to a new line and then it becomes wider again and then boom now it's wider again now in practice what I see people do so here for example people will say oh there three columns so approximately the image will be 33% of the viewport right so there is some padding in between here as well on the sence as well so it's not perfectly 33% of the viewport that is approximately true so here we could say something like 33% of the viewport width at some point it becomes a two column layout so here it becomes like 50 % it's not perfect cuz there's some padding here but it's approximately true right so you could do something like this when the width is smaller than that an image becomes 50% of the viewport width right so this is about 50% then later here it becomes 100% of the viewport width well a little bit less right so you can use Cal as well to subtract the petting from there right so if you have a column type of layout so if you have three columns you would have one for 33% 50% and then 100% all right example for a background image let's say we we want to have a background image that spans the entire viewport and then we have have some text on top you could technically do a background image with CSS background image I find it's a bit easier to just use the nexs image components for this just like all the other examples I'm just going to use image kit loader here so it's all optimized by image kit and then I'm going to use fill here which will make the position absolute and it will it will make the height and width 100% make the main element the relative and then it will take up the entire space now we do want to make sure that it sits below all the other things I just have a negative Z index here so then if I have text with which is what we see here on you need to make sure that this is also positioned as it's called so the default for prision is actually static you need to make it something else than static and then just to be certain also a positive Z index if you have a background color on the main here then the negative Z index may actually place this image below the background color so in that case some other positive number but still less than the Z index on this one all right now with sizes we always need to specify how large the image is going to be now here it's actually quite easy the image is always going to be 100% of the viewport all right now what if you have some kind of gallery and you allow your users to upload photos and you want to display it as a amazing read type of layout let's say but the images that your users upload can be in different sizes so for example here we have our own image that we already used has a certain height but then this image maybe was also uploaded has a different height when you allow your users to upload you may not know the size of the image that they going to upload so you don't know the size right so it's very easy to allow users to upload right you you could use the upload widget by image kit you will get all of the images here in your media library we can easily manage it but you also want to display it here so with is easy because they all need to be the same width so that's not the hard part right let's say that's going to be 300 pixels but we have a height of Auto because we don't want to set one specific height for each one it will just depend on the image itself we don't want to set a fixed height when you don't know the width or height is also when you just want to use fill right so then just like before I can create a wrapper div and I will make this is relative and then here I can have my sizes for the image right so you would do something like this and then for sizes it's actually very similar to the column layout that we saw before and so that's assuming we don't know what the height of the image will be image Cas actually does give you metadata about the image as well it will actually give you the height of that image right so that was lot to take in I think it's a complex component but hopefully this video helped you out a bit I want to thank image kit for sponsoring this video check out image kit they have lots of additional features that you don't get out of the box with the nextjs image component it also works with external storage so if you already have your images on S3 you can still easily integrate it here with image kit you can use the media L to easily manage hundreds or even thousands of assets not just in a dashboard also with their API also works with videos by the way so we looked at images but works with videos as well and lots more advanced features that you simply don't get out of the box in nextjs so I would say check out image kit as well I want to thank you for watching this video hopefully it was helpful and then I hope to see the next one bye

Channel: ByteGrad

Views: 12,090

Keywords:

Id: XL3gth5Bmjw

Length: 36min 1sec (2161 seconds)

Published: Mon Apr 22 2024