Having good performance is a really important part of making a successful website, and Nuxt prioritizes making performance easy in a lot of ways. One of those ways is by providing a component to optimize our images. Why? Because images are a notoriously heavy part of any website.
What do I mean by that? Let's take a look at what one of these images look like in the source code. Here you can see that we're only displaying this image at a width of two hundred pixels. That is hard coded into the HTML.
This image will never get larger than two hundred. If I hover over the source for this image, though, you will see, yes, it is rendered at two hundred by two hundred and ninety seven pixels. However, the intrinsic image size is three hundred by four forty five. That means we're loading in an image with a hundred extra pixels of width that we just don't need.
So that's extra data that the user is having to download in order to view our page, which means the website is going to take longer to display the final state of things. The obvious solution to this is to serve images in a format, or at the size rather, that they're actually going to be displayed in on the page. However, some solutions mean you end up saving multiple different versions of the same image on your server. You have to manage all of them independently, and it really can become a mess.
In order to avoid this, a really nice strategy is to render the proper size image once at the time of request to a page, and then just have that cached indefinitely so you're only ever managing the original source image, but all the resized images are auto-generated for you. How can we do that in Nuxt? Well, I'm glad you asked. That's why we have this first party module from the Nuxt core team.
It's called Nuxt Image. It quote unquote is a plug and play image optimization tool for Nuxt apps. You can resize and transform your images using the built-in optimizer or even your favorite images CDN. So this approach to generating the images on the fly and caching them indefinitely is such a popular solution.
There are whole services out there dedicated to doing just this. So you could mix Nuxt image with one of those services if you already have a favorite, or you can use the built-in optimizer from Nuxt. So that's what you see here in this checklist. And let's just click on the eighteen plus providers here.
You might recognize a few of them. Cloudflare is huge. Cloud Image is also a really good one. Cloudinary, Contentful, and the list goes on and on.
The other really nice part about Nuxt Image is its interface is a drop-in replacement for the native image tag. That means a lot of the same attributes that you have on your image tag will work just the same on the Nuxt Image component, making migration from regular images to optimized images really straightforward. Lastly, besides generating responsive sizes, that is, sizes that are fit just right for whatever screen size the user is using, you're also able to optimize into modern formats such as WebP and AVIF, which are especially compressed image file sizes that makes things even faster. js Fundamentals course, I want to show you how to use Nuxt Image and how you can use it to increase performance in your apps.
Let's get to it.