1 00:00:00,000 --> 00:00:03,000 So how can NextJS help us 2 00:00:03,000 --> 00:00:06,000 with optimizing images? 3 00:00:06,000 --> 00:00:11,000 Well, it helps us by giving us a specific image component, 4 00:00:11,000 --> 00:00:15,000 which we can import from the NextJS package, 5 00:00:15,000 --> 00:00:20,000 which allows us to display images in an optimized way. 6 00:00:20,000 --> 00:00:24,000 Specifically, when using that image component 7 00:00:24,000 --> 00:00:26,000 provided by NextJS. 8 00:00:26,000 --> 00:00:30,000 NextJS will automatically optimize the size 9 00:00:30,000 --> 00:00:31,000 of the loaded image file 10 00:00:31,000 --> 00:00:35,000 to serve smaller files in optimal formats. 11 00:00:36,000 --> 00:00:39,000 It can also help us with visual stability, as you see here, 12 00:00:39,000 --> 00:00:42,000 so that it prevents shifting layouts 13 00:00:42,000 --> 00:00:46,000 or layouts that jump around as the page is loaded, 14 00:00:46,000 --> 00:00:49,000 and therefore overall, it can speed up the page load time, 15 00:00:49,000 --> 00:00:51,000 also because it, for example, 16 00:00:51,000 --> 00:00:54,000 makes sure that images are only loaded and displayed 17 00:00:54,000 --> 00:00:58,000 when they're actually visible, so that overall, 18 00:00:58,000 --> 00:01:01,000 the performance and the speed of your site improves. 19 00:01:01,000 --> 00:01:04,000 That's the idea behind using this image component. 20 00:01:04,000 --> 00:01:07,000 And as you can see, there's a lot you can learn 21 00:01:07,000 --> 00:01:09,000 about this image component, 22 00:01:09,000 --> 00:01:12,000 a lot you can configure about this image component, 23 00:01:12,000 --> 00:01:15,000 but we'll, of course, dive into the most important settings 24 00:01:15,000 --> 00:01:18,000 and the crucial essentials you'll need to know 25 00:01:18,000 --> 00:01:20,000 in this section here. 26 00:01:20,000 --> 00:01:23,000 So how can we optimize images? 27 00:01:23,000 --> 00:01:27,000 For that, I wanna start with this image in the header here, 28 00:01:27,000 --> 00:01:29,000 and what's special about this image here 29 00:01:29,000 --> 00:01:32,000 is that it's not user-generated, 30 00:01:32,000 --> 00:01:34,000 but instead, it's part of my project, 31 00:01:34,000 --> 00:01:38,000 it's part of my codebase, so to say, 32 00:01:38,000 --> 00:01:40,000 and it'll always be on the page, 33 00:01:40,000 --> 00:01:45,000 and I'm importing it locally from my local file system, 34 00:01:45,000 --> 00:01:49,000 whereas those user-generated files are stored on Cloudinary. 35 00:01:49,000 --> 00:01:52,000 So therefore, I, of course, know things 36 00:01:52,000 --> 00:01:55,000 about this image here, about this logo, 37 00:01:55,000 --> 00:01:57,000 which I don't know in advance 38 00:01:57,000 --> 00:01:59,000 about the user-generated images. 39 00:01:59,000 --> 00:02:02,000 I, for example, know its size in advance 40 00:02:02,000 --> 00:02:07,000 because the image file is stored right here in this project, 41 00:02:07,000 --> 00:02:09,000 and this will become important. 42 00:02:10,000 --> 00:02:11,000 So where am I using this logo? 43 00:02:11,000 --> 00:02:15,000 Well, I'm using it in the header.js file. 44 00:02:16,000 --> 00:02:19,000 There, I'm displaying this logo 45 00:02:19,000 --> 00:02:21,000 here to the left of my navigation, 46 00:02:21,000 --> 00:02:23,000 and I'm, of course, displaying it 47 00:02:23,000 --> 00:02:27,000 with the regular built-in native image element, 48 00:02:27,000 --> 00:02:30,000 so not the image element coming from NextJS, 49 00:02:30,000 --> 00:02:33,000 but instead, the one that's usable on any website, 50 00:02:33,000 --> 00:02:37,000 the standard image HTML tag. 51 00:02:38,000 --> 00:02:40,000 And that's what we'll change now, 52 00:02:40,000 --> 00:02:42,000 because as I mentioned before, 53 00:02:42,000 --> 00:02:44,000 you can import the image component 54 00:02:44,000 --> 00:02:49,000 from next/image like this. 55 00:02:49,000 --> 00:02:52,000 You can add this import to any component file, 56 00:02:52,000 --> 00:02:57,000 not just to page components, but to any component file, 57 00:02:57,000 --> 00:03:01,000 and you can then use this image component provided by Next 58 00:03:01,000 --> 00:03:05,000 instead of the standard built-in IMG element here, 59 00:03:05,000 --> 00:03:08,000 just like that in the end. 60 00:03:08,000 --> 00:03:11,000 And with that, we will use this component 61 00:03:11,000 --> 00:03:13,000 to display the image, 62 00:03:13,000 --> 00:03:17,000 and this component then also takes an SRC prop 63 00:03:17,000 --> 00:03:19,000 to set the source of the image 64 00:03:19,000 --> 00:03:22,000 and an alt prop to set the alt text. 65 00:03:23,000 --> 00:03:27,000 Now, out of the box, when using a locally imported image, 66 00:03:27,000 --> 00:03:31,000 as I'm doing it here, so when importing an image like this 67 00:03:31,000 --> 00:03:33,000 from the local file system, 68 00:03:33,000 --> 00:03:36,000 you don't need to add any other props. 69 00:03:36,000 --> 00:03:38,000 Instead, you can leave it like this, 70 00:03:38,000 --> 00:03:41,000 and you'll be greeted with an error.