Now that we have the module installed, let's get to using the component. That's as simple as taking any existing image tag and then replacing it with nuxt-image. Or if you prefer, you could use the Pascal casing like I do. Awesome.
Let's see what that looks like over in the browser. We'll give the page a refresh and then inspect one of the images. OK, so here we have rendered size, which is the width we specified. But this intrinsic size is still different.
It still says, . I thought NuxtImage was going to fix this for me. The reason this happens is because these images aren't served from the same domain as our current site. So if these were images kept up with within our project folder, we would have nothing left to do, and this would just work.
com. So we need to provide a single setting over in our Nuxt config in order to tell the module to handle images from this domain. To configure the images module, we'll start out by specifying the image key here in Nuxt config. And then the precise setting we want to use is called domains.
Awesome. This will be an array of those domains we want to allow. Great. This time when I inspect my image, you can see the rendered size, but that intrinsic size is gone, meaning the intrinsic size is the exact same as the rendered size.
This is perfect. We're not downloading any extra image that we don't need. You'll also notice the file size is a bit smaller. If I were to go back and then adjust my width to, say, three hundred pixels, and then inspect the image again, you'll see that that is now the intrinsic image size.
Great. Rendered is three hundred and intrinsic is gone. Notice the file size did jump up just a little bit as we're now downloading a larger image. Now, besides the image width, we could also specify the height if we wanted to.
Let me do something crazy, and I'll say, two hundred. Very interesting. Now, over on the right-hand side, you can see that our images have actually been cropped so that they fit within the size we specified. And this is more than just how they're displayed on the page.
This is the actual image sent to the browser. Cool. What if we wanted to adjust how the image fit into that width and height instead of covering the entirety of it? Well, we could do that with an attribute or a property called fit.
As you might imagine, fit could take some values you're probably already kind of familiar with based on CSS. So I could add contain here. And sure enough, now we have the image contained within that dimension. And on the sides is just black.
That's not CSS. That's not browser painting that. That is actually part of the image. OK, so what did we have by default?
Well, you probably guessed it. That was cover. Cool. Or we could do fill, which ignores the aspect ratio altogether and stretches the image, which usually isn't a good option.
Ooh, yeah, kind of gross. Lastly, there is also inside, which resizes the image to be as large as possible while ensuring its dimensions are less than or equal to both of those specified. In our use case, it doesn't make for a very good result. And then finally, there's also outside.
Also not that great. But it does the exact opposite of InSight, resizing the image to be as small as possible while ensuring the dimensions are greater than or equal to both of those specified. Let's just get rid of that now. Another prop we could provide is the format prop.
This allows us to specify what file type we want to send down to the browser. So we were sending JPEGs before, but there's actually a file type called WebP, which has better compression and is less that we have to send over the wire. Cool. Let me check on the image size now.
Hovering over it, you can see it is seventeen point seven kilobytes. Let's turn that back to JPEG real quick and see what the difference is. Nineteen point four. So yeah, we've saved a couple of kilobytes just by sending a WebP instead.
And we didn't have to do anything on our server really to save these images in different places and manage them. We just let Nuxt Image do it for us. Pretty great. So there you go.
Those are some of the very useful properties you can provide to Nuxt Image. And it's pretty simple to use, but there is a lot more power built into it. If you visit this Nuxt Image page in the official documentation, you can see a wealth of other props that you can pass to it. So things that we didn't talk about like sizes, densities, provider, preset, quality, modifiers, and still some more that we'll take a look at in the next lesson.