Improving Performance of Nuxt with NuxtImage 🚀

#vue #nuxt #performance #javascript

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:

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

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:

drop-in replacement for the native <img> element
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:

yarn add --dev @nuxt/image@rc

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

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

We can pass some configuration optionally if we like:

image: {
  // Options
}

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

<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

Resources

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

Top comments (5)

Abdou • Aug 28 '23

Great article as I was looking for better ways to compress pictures to improve loading time.
1- Does this package compress images ?
2- Why is it using public folder rather than assets folder ? -which is the advised one in most cases -

Jakub Andrzejewski • Aug 28 '23

Hey, I am glad that you liked it!

I dont think that it compresses assets like images. For that you should be using another package like vite-plugin-compress
This is just a convention created by the module authors to use public. But you can also configure it image.nuxtjs.org/configuration#dir