1 00:00:00,000 --> 00:00:03,000 [Maximilian Schwarzmüller] So this next image component 2 00:00:03,000 --> 00:00:05,000 automatically determines the width and height 3 00:00:05,000 --> 00:00:07,000 of the input file when you're using it. 4 00:00:07,000 --> 00:00:10,000 And therefore you should indeed make sure 5 00:00:10,000 --> 00:00:14,000 that the input file isn't unnecessarily large 6 00:00:14,000 --> 00:00:17,000 because otherwise, even though NextJS will perform 7 00:00:17,000 --> 00:00:21,000 some resizing for different screen sizes automatically 8 00:00:21,000 --> 00:00:25,000 or for different screen resolutions specifically, 9 00:00:25,000 --> 00:00:27,000 even though NextJS will do that, 10 00:00:27,000 --> 00:00:29,000 if the raw input file is too big, 11 00:00:29,000 --> 00:00:32,000 of course the entire base for the resizing operations 12 00:00:32,000 --> 00:00:35,000 performed by NextJS will be wrong. 13 00:00:36,000 --> 00:00:38,000 So one thing you could do then, 14 00:00:38,000 --> 00:00:42,000 and you should typically do is resize that input image. 15 00:00:42,000 --> 00:00:44,000 But one other thing you could do 16 00:00:44,000 --> 00:00:49,000 is manually override the inferred width and height. 17 00:00:49,000 --> 00:00:51,000 And you can do this by setting the width 18 00:00:51,000 --> 00:00:54,000 and height props on that NextJS image component. 19 00:00:55,000 --> 00:00:59,000 And here I could, for example, set that to 100 each, 20 00:00:59,000 --> 00:01:04,000 so to 100 pixels each and of course you should set a width 21 00:01:04,000 --> 00:01:08,000 and height that's in line to the approximate size 22 00:01:08,000 --> 00:01:11,000 at which the image will be displayed here. 23 00:01:11,000 --> 00:01:14,000 So that comes down to your specific use case. 24 00:01:15,000 --> 00:01:17,000 But I can set the width and height like this 25 00:01:17,000 --> 00:01:21,000 and if I then save that and reload, 26 00:01:21,000 --> 00:01:22,000 you will see that of course, 27 00:01:22,000 --> 00:01:24,000 still the image element is rendered 28 00:01:24,000 --> 00:01:28,000 but now my width and height has been set as a value here 29 00:01:28,000 --> 00:01:33,000 on that image element and the sizes that are generated 30 00:01:33,000 --> 00:01:36,000 by NextJS automatically, you can tell 31 00:01:36,000 --> 00:01:39,000 the generated width here by this special query parameter 32 00:01:39,000 --> 00:01:42,000 that's set on these image URLs. 33 00:01:42,000 --> 00:01:46,000 These sizes got down and were decreased 34 00:01:46,000 --> 00:01:50,000 and therefore now by manually setting a lower width 35 00:01:50,000 --> 00:01:53,000 and height than the input image has, 36 00:01:53,000 --> 00:01:56,000 I'm making sure that NextJS actually serves 37 00:01:56,000 --> 00:01:58,000 smaller image files. 38 00:01:59,000 --> 00:02:04,000 Now whilst you can tweak the width and height like this, 39 00:02:05,000 --> 00:02:07,000 this is actually not the recommended way 40 00:02:07,000 --> 00:02:09,000 though I will say it does work 41 00:02:09,000 --> 00:02:13,000 and it therefore can be a decent workaround 42 00:02:13,000 --> 00:02:17,000 or a quick way of getting NextJS to resize an image. 43 00:02:18,000 --> 00:02:21,000 Still, when importing a local image, 44 00:02:21,000 --> 00:02:23,000 it's typically not recommended 45 00:02:23,000 --> 00:02:26,000 to set the width and height like this. 46 00:02:26,000 --> 00:02:30,000 Instead, you should keep it to the native raw sizes, 47 00:02:30,000 --> 00:02:33,000 the raw width and height of the input file 48 00:02:33,000 --> 00:02:36,000 and instead, if you want to resize the image, 49 00:02:36,000 --> 00:02:40,000 it's recommended that you do this with the sizes prop, 50 00:02:40,000 --> 00:02:44,000 which is another prop you can add on that image element. 51 00:02:45,000 --> 00:02:48,000 And the sizes prop then can take 52 00:02:48,000 --> 00:02:51,000 actually a list of different sizes. 53 00:02:51,000 --> 00:02:55,000 The image should assume depending on the width 54 00:02:55,000 --> 00:02:57,000 of the view port so that you could set up 55 00:02:57,000 --> 00:03:00,000 a responsive image but if like here, 56 00:03:00,000 --> 00:03:04,000 we have one size that's used all the time, 57 00:03:04,000 --> 00:03:09,000 this image size doesn't change as my viewport width changes, 58 00:03:09,000 --> 00:03:12,000 if that's the case, you can just set up one value 59 00:03:12,000 --> 00:03:15,000 for this sizes setting 60 00:03:15,000 --> 00:03:19,000 and that value could be 10vw, for example, 61 00:03:19,000 --> 00:03:21,000 which is a CSS unit. 62 00:03:21,000 --> 00:03:23,000 And this means that this image will take up 63 00:03:23,000 --> 00:03:28,000 approximately 10% of the available viewport. 64 00:03:29,000 --> 00:03:32,000 And this setting will then also get NextJS 65 00:03:32,000 --> 00:03:37,000 to resize the image and serve an image of a different size 66 00:03:37,000 --> 00:03:38,000 behind the scenes. 67 00:03:39,000 --> 00:03:41,000 So that's an alternative way 68 00:03:41,000 --> 00:03:45,000 and actually the recommended way of resizing an image 69 00:03:45,000 --> 00:03:48,000 and you can therefore also learn more 70 00:03:48,000 --> 00:03:50,000 about using this sizes prop 71 00:03:50,000 --> 00:03:53,000 in the official NextJS documentation. 72 00:03:53,000 --> 00:03:57,000 However, I will say that for use cases like this here 73 00:03:57,000 --> 00:04:00,000 where I have a fixed size image, 74 00:04:00,000 --> 00:04:03,000 where I don't need different resizing 75 00:04:03,000 --> 00:04:06,000 for different viewport widths, 76 00:04:06,000 --> 00:04:11,000 I personally actually like to manually override the width 77 00:04:11,000 --> 00:04:14,000 and height of the raw input file and set a width 78 00:04:14,000 --> 00:04:17,000 and height explicitly as I'm doing it here 79 00:04:17,000 --> 00:04:20,000 to get NextJS to serve me a different image file 80 00:04:20,000 --> 00:04:24,000 of a different size, simply because that's a quick 81 00:04:24,000 --> 00:04:26,000 and easy solution. 82 00:04:26,000 --> 00:04:30,000 Nonetheless, you should know about this sizes prop as well. 83 00:04:30,000 --> 00:04:33,000 Of course, as mentioned, it would be even better 84 00:04:33,000 --> 00:04:35,000 to decrease the size of the input image, 85 00:04:35,000 --> 00:04:39,000 but manually setting a width and height that differs 86 00:04:39,000 --> 00:04:43,000 from the base image size also can be an alternative.