Using Images in Next.js (next/image examples)

if you're working with images on the web you might have noticed three common problems the first is that there's layout shipped from your images loading in which is distracting for your visitors two is that you load images that are too large for your page so they don't get optimized for the viewport or for the device that the visitor is using and the third is that the experience of actually getting the images on the screen and the layout that you want is actually pretty difficult to do so you want to have a little bit better developer experience for using images well the image component index.js is hopefully here to solve those problems for you okay so in my editor I have the nexgs image component examples from the documentation running locally and we're going to walk through a few different examples of using the image component so let's start with the most basic I have this image component defined on the left it takes an ALT tag for accessibility some Source image and then I also passed in some styles to make it take up the full width of the screen now the source is coming from up top or actually importing the image file from the public directory now this is nice because we don't have to manually set the width or height setting the width and height is important because this is how you prevent layout shift so when you import an image here it's going to automatically do that for you so now let's go look at the browser and see what's actually happening here so on localhost 3000 I have Dev tools opened here and I see an image tag so there's no wrapping elements it's just the native web image tag in previous versions of nexgs we had to add wrapping elements to help support the features that were not cross browser yet in terms of aspect ratios and styling but now in the latest version of next.js there's no wrapping elements so we have an image tag we see our alt tag we see some properties that we've automatically defined for you like the width and the hype to prevent that layout shift and then we see this interesting URL now this URL is the automatically optimized image for us so let's take a quick detour here and I'll go look at this file Slash pursell.png from the public directory that we're serving up now if we look down here we see that the original size of This Is 30.3 kilobytes this is a PNG file and I've done a hard reload here so it's not being cached but this underscore next slash image route is what's automatically optimizing that image and making it a bit smaller so the same image passed in through that route we look here and we see that it detects that because I'm using Chrome we can actually use a more modern file extension so we're going to use the format of avif or webp which are going to help you get even smaller file sizes so we see that down below here with content type and if I close this out we see that the size of this one is 7.2 kilobytes so again I'll do a hard reload here and we see 7.2 kilobytes that's quite a bit smaller and you know 30 kilobytes was already a decently small image this gets even more impactful when you talk about megabyte sized images or really high quality images but what if my images aren't in my repository they're from some remote location well that's okay too let's take a look at another example so in my left to have another image component with an ALT tag and a source and a width and a height and the max width but notice that the source is a URL that some external image now this also works inside of next.js but we have to Define an explicit allow list of the domains that we want to be able to optimize images from so if we hop over to our next config we see that not only have we defined the image formats that we want to support which are avif and webp we also can Define some patterns that we want to match for the URLs inside of our source so we're saying we're going to allow all of the images from this assets.presell.com subdomain and specifically for this path name image slash upload slash something now this is important because it makes sure that you lock down the URLs that people can use your next.js server to optimize images with it's important to note here that we still had to define the width and the height of the image now this can be a little bit tricky sometimes if the width or the height are really Dynamic but it's really important because this is the only way that you can go without having layout shift from your image loading in okay let's look at another example of setting a background image for the entire page so on my left I have another image tag it has an alt and a source just like before but there's a couple new things here we want to dig into the first I'm going to talk about which is the most important is fill so rather than setting a width and height of this image we wanted to take up the entire width of our parent and we can do that by specifying this fill prop now previously in older versions of nexjs there was a layout prop that had a few different options but layout has been replaced with different options including this fill prop so go check out the documentation if you want to see those new options and secondly we Define this sizes prop so we're telling next JS and I'll actually pull up these here because there's quite a bit of details here on sizes but it's really important that if you're using fill you should also use sizes the most important part here is if the sizes property includes something like 50 view width or 100 view width in this instance which is a percentage of the viewport width The Source set or the number of images is trimmed down to not include any values which are too small to ever be necessary so you get a really configure the different variations of the image that you want next.js to automatically serve up depending on the viewport and the device of your visitor now there's a couple other cool things here one there's this optional quality prop it defaults to 75 I believe percent but you can optionally do 100 if you would like it's going to be a slightly bigger image but for a background image that might be nice to have you can have a nice blur up placeholder which is really easy to do when you're importing a local image that local image nextges is going to be able to automatically generate the blur data URL which gives you that nice blur up placeholder and has a better ux and the last thing here is a style prop so this is just using CSS you could do this through a class name if you wanted to too but we have object fit cover we could also do something like contain in we could do something like none I think is another one you could have a couple different options here on how you want to actually lay this out but I typically use cover for most of these things let's look at another example of using multiple images with layout fill in a grid pattern so on the left this image looks pretty similar to the last one it has fill it has some sizes and then I'm also using object fit cover but you'll notice that I've specified a relative parent around it which is very important and a height now the parents of this element is a CSS Grid it's got a little bit of spacing between the items we've got some CSS magic of Auto fitting the sizes so what happens here if I take this element of the mountain image and we add some more images to the grid so let's do let's do maybe six images here so now what you'll see is that these images are going to have this relative position of their wrapping component and it's going to have a height of 400 pixels and this value let me just resize here a little bit you get this really nice effect from CSS grid where the combination of object fit cover means that this scales really well and it can be responsive thanks to CSS grid as well too so this is a really nice pattern that I like to use okay the last one I want to talk about is responsive images which the great thing about the image component is that they're responsive by default so on the left again I have an ALT tag I have a source sizes and then I'm making the image display full width but now what's really cool is that by default what I resize the viewport the image component is automatically responsive so that's really really nice and because I have a flex parrot here I could also do something like let's say I want hello world another item I can display that down below and I could have some kind of card layout for example and I can just use this really really nicely now if you want to fine tune or tweak any of the knobs on the image component we have a full API reference in our documentation including the ability to change what service actually optimizes your images through loaders so by default and it works whether you self-host or you use a managed service you can optimize images on the next.js server now if you for example want to use a different service to optimize your images you can specify a loader that will make this very easy for you so if you look at loader it takes in a function this can Define the URL for any service and you can pass in things like the source the width and the quality and it makes it really easy to swap out for whichever service you prefer okay that's all for this video hopefully you found this helpful to see some practical examples of how to use the image component stay tuned for the next one and let me know in the comments what you'd like to see peace

Channel: Lee Robinson

Views: 44,814

Keywords:

Id: IU_qq_c_lKA

Length: 9min 10sec (550 seconds)

Published: Sun Jun 25 2023