Improving Performance of Nuxt with NuxtImage 🚀
Tags: vue, nuxt, performance, javascript
Published: 2023-08-21 10:44:15

The first thing I always do when I am auditing the website performance is to look at the images. In majority of cases, bad performance is caused by not serving images optimized for the modern web. This is especially interesting case for me because there are actually many quick wins that you can use to improve the performance drastically for both Lighthouse and your actual users.

One of my favourite optimization tips is to use image format that can be used by the browser. To visualize the positive aspect of it, check out the following meme that I have created:

![Image formats](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a9xilv1wtdly2m115mat.png)

I have already talked about image optimization for Vue and Nuxt here in dev.to in one of my recent articles that you can check out [here](https://dev.to/jacobandrewsky/image-optimization-in-vue-nuxt-29hc)

In this article however, I would like to look at the NuxtImage module for Nuxt that helps you deliver optimized images for your users.

## What is NuxtImage?

NuxtImage is a Plug-and-play image optimization for Nuxt apps. Resize and transform your images using built-in optimizer or your favorite images CDN.

It comes with several useful features like:

* <nuxt-img> drop-in replacement for the native `<img>` element
* <nuxt-picture> drop-in replacement for the native `<picture>` element.
* Built-in image resizer and transformer with unjs/ipx
* Support 18+ providers
* Generate responsive sizes
* Optimize using modern formats such as webp and avif

It basically allows you to deliver optimized images for your users which would be good for both Lighthouse and User Experience in general.

Let's take a look below how we can use it in the code.

## Code

Using the NuxtImage module is relatively simple. First of all, you need to install the module like following:

```bash
yarn add --dev @nuxt/image@rc
```

Next, let's add it to the `nuxt.config.ts` file and specifically the `modules` array:

```ts
export default defineNuxtConfig({
  modules: [
    '@nuxt/image',
  ]
})
```

We can pass some configuration optionally if we like:

```ts
image: {
  // Options
}
```

And we can start using the `<nuxt-img/>` component inside of our Nuxt application like following:

```html
<nuxt-img src="/nuxt-icon.png" />
```

This NuxtImg component comes with several props that you can use for delivering optimized images like:

* width / height - Specify width/height of the image
* sizes - This a space-separated list of screen size/width pairs
* provider (by default IPX) - for example Cloudinary, Storyblok, etc
* format - Available formats are webp, avif, jpeg, jpg, png, gif and svg. If the format is not specified, it will respect the default image format.
* quality - The quality for the generated image(s).
* preload - In case you want to preload the image, use this prop. This will place a corresponding link tag in the page's head.
* loading - This is a native attribute that provides a hint to the browser on how to handle the loading of an image which is outside the viewport

And many more! You can check out the full list of available props and events [here](https://image.nuxtjs.org/components/nuxt-img)

## Resources

I have created several videos and articles where I am using the NuxtImage module that you can check out below:

* https://www.youtube.com/watch?v=cfc8msc_Bk4&t=520s
* https://www.youtube.com/watch?v=EuakPz8M7CM&t=660s
* https://www.youtube.com/watch?v=A-G6lPHctPs&t=805s
* https://www.youtube.com/watch?v=1NEOQ2uVHXo&t=620s