DEV Community

Cover image for Improving Performance of Nuxt with NuxtImage πŸš€
Jakub Andrzejewski
Jakub Andrzejewski

Posted on

Improving Performance of Nuxt with NuxtImage πŸš€

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

I have already talked about image optimization for Vue and Nuxt here in 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.


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

yarn add --dev @nuxt/image@rc
Enter fullscreen mode Exit fullscreen mode

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

export default defineNuxtConfig({
  modules: [
Enter fullscreen mode Exit fullscreen mode

We can pass some configuration optionally if we like:

image: {
  // Options
Enter fullscreen mode Exit fullscreen mode

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

<nuxt-img src="/nuxt-icon.png" />
Enter fullscreen mode Exit fullscreen mode

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


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

Top comments (5)

3aluw profile image

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 -

jacobandrewsky profile image
Jakub Andrzejewski

Hey, I am glad that you liked it!

  1. I dont think that it compresses assets like images. For that you should be using another package like vite-plugin-compress
  2. This is just a convention created by the module authors to use public. But you can also configure it
thomasbnt profile image
Thomas Bonnet

Great post!

jacobandrewsky profile image
Jakub Andrzejewski


selemondev profile image

Great article πŸ”₯