Performant Images with Nuxt Image and Cloudinary

#vue #nuxt #javascript #performance

When people ask me what is my first recommendation when trying to improve performance of their websites, my first idea is always to look at the images. Are they served in the modern and optimized formats? Are they properly sized? Are they lazy loaded properly so that the browser will start fetching them the time they are actually needed?

And because of that, I always tend to start using performant images in my projects from the very beginning. As my favourite modern web framework is Nuxt, I instantly thought about Nuxt Image - a module that helps you deliver more performant images to your users. But in order to deliver even better experience, you can configure your Nuxt Image module to work with one of many third party image providers - and here I will always choose Cloudinary 🚀

In this article, I will show you how you can use Nuxt Image and Cloudinary to deliver optimized and performant images to your users.

I hope you will like it :)

Enjoy!

🟢 Performant images with Nuxt Image and Cloudinary

The first thing we need to do to have these performant images is to install the Nuxt Image module in our project. We can do so by using nuxi like following:

npx nuxi@latest module add image

This will add the module to our project with the default (local) configuration. In order to work with Cloudinary, we would need to change that to following:

export default defineNuxtConfig({
  image: {
    cloudinary: {
      baseURL: 'https://res.cloudinary.com/<your-cloud-name>/image/upload/'
    }
  }
})

The Cloudinary provider for Nuxt Image automatically enables automatic format selection and automatic quality selection for best performance. And this means, that we do not need to take care of these aspects unless our use case is different than the most common ones.

Apart from automatic quality and format selection, there are several things we could do to deliver more performant and optimized images to our users.

First, we can configure the sizes property of our images that will be used to generate resized and optimized versions of an image. It can be done like following:

export default defineNuxtConfig({
  image: {
    screens: {
      'xs': 320,
      'sm': 640,
      'md': 768,
      'lg': 1024,
      'xl': 1280,
      'xxl': 1536,
      '2xl': 1536
    },
  }
})

Next, we can add global modifiers that will be added to all our images like following:

export default defineNuxtConfig({
  image: {
    provider: 'cloudinary',
    cloudinary: {
      baseURL: 'https://res.cloudinary.com/<company>/image/fetch/',
      modifiers: {
        quality: 'auto:best',
      }
    }
  }
})

And finally, for the NuxtImg component itself, we could pass following props to achieve better performance:

<NuxtImg src="/nuxt-icon.png" loading="lazy" />

You can check all list of available props here

However, if you are looking for more advanced Cloudinary usage or prebuilt components like VideoPlayer, OgImage or ProductGallery, check out Cloudinary module for Nuxt by visiting module documentation or GitHub repository.

I have also published few articles about it that you can check out here.

📖 Learn more

If you would like to learn more about Vue, Nuxt, JavaScript or other useful technologies, checkout VueSchool by clicking this link or by clicking the image below: